Issue
I have some work for school to do and I'm having some problems.
I need the menu to be in the center but it doesn't work.
My teacher didnt help me at all so I thought this web could.
This is my code so far:
* {
background-color: #62544f;
color: black;
}
#kk {
text-align: center;
color: #ffffff;
grid-column: 1 /span 3;
border: #ffffff;
border-style: solid;
}
article {
width: 500px;
background-color: #62544f;
margin: auto;
display: grid;
grid-template-columns: min-content auto min-content;
}
article div {
border-bottom: 3px solid black;
height: 3rem;
}
body {
padding-bottom: 150px;
border-style: solid;
border-width: 4px;
border-color: rgb(255, 255, 255);
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#kafe {
position: absolute;
width: 250px;
height: 208px;
left: 166px;
top: 15px;
background: url(hand-drawn-of-hot-coffee-with-roasted-coffee-beans-iam-nee-removebg-preview.png);
filter: drop-shadow(0px 10px 4px rgba(0, 0, 0, 0.21));
}
<img id="kafe" src="./obrazky/kavicka.png" alt="kava" />
<img id="bob" src="./obrazky/bbb.png" alt="kávové semínka??"/>
<img id="logo" src="./obrazky/logo.png" alt="logo"/>
<div><h1 id="kk">MENU</h1> </div>
<main>
<h1>KÁVA</h1>
<article>
<h2>Luongo</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Espresso</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Americano</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Cappucinno</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Café latte</h2>
<div></div>
<h3>60,-</h3>
</article>
<article>
<h2>flat white</h2>
<div></div>
<h3>70,-</h3>
</article>
<article>
<h2>Mocha</h2>
<div></div>
<h3>70,-</h3>
</article>
<article>
<h2>Ledová káva</h2>
<div></div>
<h3>70,-</h3>
</article>
</main>
<main>
<h1>NÁPOJE</h1>
<article>
<h2>coca-cola</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Kofola</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Sprite</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Fanta</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Cappy</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Limonáda</h2>
<div></div>
<h3>60,-</h3>
</article>
<article>
<h2>Perlivá voda</h2>
<div></div>
<h3>25,-</h3>
</article>
<article>
<h2>voda</h2>
<div></div>
<h3>15,-</h3>
</article>
</main>
<main>
<h1>SLADKÉ</h1>
<article>
<h2>Palačinky</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Medovník</h2>
<div></div>
<h3>25,-</h3>
</article>
<article>
<h2>Tiramisu</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Cheesecake</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Míša řez</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>brownies</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Mrkový dort</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Makronky</h2>
<div></div>
<h3>15,-</h3>
</article>
</main>
I was sure this is supposed to put the menu in its place but it didnt. Any help would be appreciated, Im really desperate.
Solution
body {
min-height: 93vh;
margin: 10px;
border-style: solid;
border-width: 4px;
border-color: rgb(255, 255, 255);
text-align: center;
}
* {
background-color: #62544f;
color: black;
}
nav.header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1em;
width: 100%;
gap: 150px;
}
#kk {
text-align: center;
color: #fff;
border: 3px solid #fff;
padding: 5px 25px;
}
.head-img {
width: 100px;
}
/* set the width of images from here */
.head-img img {
width: auto;
}
#logo {
position: absolute;
right: 0px;
top: 0px;
}
.container {
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap;
row-gap: 5em;
column-gap: 1em;
padding: 10px;
}
article {
width: 400px;
background-color: #62544f;
margin: auto;
display: grid;
grid-template-columns: min-content auto min-content;
}
article div {
border-bottom: 3px solid black;
height: 2rem;
}
<body>
<nav class="header">
<div class="head-img">
<img id="kafe" src="./obrazky/kavicka.png" alt="kava" />
</div>
<div>
<h1 id="kk">MENU</h1>
</div>
<div class="head-img">
<img id="bob" src="./obrazky/bbb.png" alt="kávové semínka??" />
</div>
<img id="logo" src="./obrazky/logo.png" alt="logo" />
</nav>
<div class="container">
<main>
<h1>KÁVA</h1>
<article>
<h2>Luongo</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Espresso</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Americano</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Cappucinno</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Café latte</h2>
<div></div>
<h3>60,-</h3>
</article>
<article>
<h2>flat white</h2>
<div></div>
<h3>70,-</h3>
</article>
<article>
<h2>Mocha</h2>
<div></div>
<h3>70,-</h3>
</article>
<article>
<h2>Ledová káva</h2>
<div></div>
<h3>70,-</h3>
</article>
</main>
<main>
<h1>NÁPOJE</h1>
<article>
<h2>coca-cola</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Kofola</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Sprite</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Fanta</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Cappy</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Limonáda</h2>
<div></div>
<h3>60,-</h3>
</article>
<article>
<h2>Perlivá voda</h2>
<div></div>
<h3>25,-</h3>
</article>
<article>
<h2>voda</h2>
<div></div>
<h3>15,-</h3>
</article>
</main>
<main>
<h1>SLADKÉ</h1>
<article>
<h2>Palačinky</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Medovník</h2>
<div></div>
<h3>25,-</h3>
</article>
<article>
<h2>Tiramisu</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Cheesecake</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Míša řez</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>brownies</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Mrkový dort</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Makronky</h2>
<div></div>
<h3>15,-</h3>
</article>
</main>
</div>
</body>
Okay, so first of all I have enclosed the three images and the "menu" heading within a nav
and turned it into a flexbox. I've also put the images into a div
so your code is more organized and easier to understand. Also specified their widths to centre them properly within the flexbox. I applied position: relative
to the parent nav
elements and then applied position: absolute
to the #logo
image within it so it moves relative to it's parent element when positioned.
I could've had messed up the order of images as I cannot understand Czech. But hopefully you can fix that.
I cleaned up your code and organized it, also enclosed the menu into a div.container
and turned it into a flexbox so it's responsive when you zoom in and out of the webpage. Hopefully this helps <3
HTML:
<body>
<nav class="header">
<div class="head-img">
<img id="kafe" src="./obrazky/kavicka.png" alt="kava" />
</div>
<div>
<h1 id="kk">MENU</h1>
</div>
<div class="head-img">
<img id="bob" src="./obrazky/bbb.png" alt="kávové semínka??" />
</div>
<img id="logo" src="./obrazky/logo.png" alt="logo" />
</nav>
<div class="container">
<main>
<h1>KÁVA</h1>
<article>
<h2>Luongo</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Espresso</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Americano</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Cappucinno</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Café latte</h2>
<div></div>
<h3>60,-</h3>
</article>
<article>
<h2>flat white</h2>
<div></div>
<h3>70,-</h3>
</article>
<article>
<h2>Mocha</h2>
<div></div>
<h3>70,-</h3>
</article>
<article>
<h2>Ledová káva</h2>
<div></div>
<h3>70,-</h3>
</article>
</main>
<main>
<h1>NÁPOJE</h1>
<article>
<h2>coca-cola</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Kofola</h2>
<div></div>
<h3>40,-</h3>
</article>
<article>
<h2>Sprite</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Fanta</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Cappy</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Limonáda</h2>
<div></div>
<h3>60,-</h3>
</article>
<article>
<h2>Perlivá voda</h2>
<div></div>
<h3>25,-</h3>
</article>
<article>
<h2>voda</h2>
<div></div>
<h3>15,-</h3>
</article>
</main>
<main>
<h1>SLADKÉ</h1>
<article>
<h2>Palačinky</h2>
<div></div>
<h3>55,-</h3>
</article>
<article>
<h2>Medovník</h2>
<div></div>
<h3>25,-</h3>
</article>
<article>
<h2>Tiramisu</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Cheesecake</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>Míša řez</h2>
<div></div>
<h3>30,-</h3>
</article>
<article>
<h2>brownies</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Mrkový dort</h2>
<div></div>
<h3>35,-</h3>
</article>
<article>
<h2>Makronky</h2>
<div></div>
<h3>15,-</h3>
</article>
</main>
</div>
</body>
CSS:
body {
min-height: 93vh;
margin: 10px;
border-style: solid;
border-width: 4px;
border-color: rgb(255, 255, 255);
text-align: center;
}
* {
background-color: #62544f;
color: black;
}
nav.header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1em;
width: 100%;
gap: 150px;
}
#kk {
text-align: center;
color: #fff;
border: 3px solid #fff;
padding: 5px 25px;
}
.head-img {
width: 150px;
}
/* set the width of images from here */
.head-img img {
width: auto;
}
#logo {
position: absolute;
right: 0px;
top: 0px;
}
.container {
display: flex;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap;
row-gap: 5em;
column-gap: 1em;
padding: 10px;
}
article {
width: 400px;
background-color: #62544f;
margin: auto;
display: grid;
grid-template-columns: min-content auto min-content;
}
article div {
border-bottom: 3px solid black;
height: 2rem;
}
Answered By - Envy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.