3 svar · 1 153 visningar · startad av andenwee
Hej jag fattar inte hur jag skall flytta ner mitt menu-div element. När jag kör margin-top eller padding-top så ligger det kvar längst upp och det blir som att bara heigten ändras till större. Hur skall jag bygga upp min kod för att detta skall funka?
Min html:
<html>
<head></head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="top">
<div class="menu-div">
<div class="menu">
<ul>
<li>Home</li><li>Contact</li><li>Products</li><li>About us</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Min css:
* {
margin: 0px;
padding: 0px;
background: #421F1F;
}
.top {
background-image: url(images/logo2.png);
height: 400px;
width: 100%;
}
.menu-div {
background-color: #421F1F;
height: 40px;
max-height: 40px;
width: 60%;
max-width: 700px;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
float: inherit;
padding-top: 20px;
}
.menu {
text-align: center;
color: white;
}
.menu ul {
text-align: center;
list-style-type: none;
color: white;
padding-top: 10px;
}
.menu li {
display: inline;
}
Tacksam för lite hjälp är helt ny på html och css
Du kan lägga till följande CSS till .menu-div
position: relative;
top: 20px;
position: relative;
gör att elementets position beräknas utifrån där det SKULLE ha hamnat om man inte positionerat det alls och bara låtit webbläsaren avgöra var det skulle hamna.
top: 20px;
gör tillsammans med position: relative; att elementet positioneras i sin "originalposition" +20 pixlar från toppen.
position: relative;
gör att elementets position beräknas utifrån där det SKULLE ha hamnat om man inte positionerat det alls och bara låtit webbläsaren avgöra var det skulle hamna.top: 20px;
gör tillsammans med position: relative; att elementet positioneras i sin "originalposition" +20 pixlar från toppen.
position relative behåller box-ytan som elementet skulle ha renderats
Tack nu funkar det!
