Я не понимаю, почему нижняя граница не относится к строке меню. Я пробовал все типы paddings, поля и все такое. Я не знаю, что добавить или изменить, чтобы он мог применить к нему. Я пытался поставить позицию относительно #header
и абсолютный в .menu
а затем все сломалось. Я не знаю, что я сделал не так?
Мой HTML:
<body>
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
<div class="menu">Naslovna</div>
<div class="menu">PVC stolarija</div>
<div class="menu">ALU stolarija</div>
<div class="menu">Ostali proizvodi</div>
<div class="menu">Reference</div>
<div class="menu">Kontakt</div>
</div>
</div>
<div id="header_line"></div>
<div id="content">
<p> </p>
<p> </p>
</div>
<div id="footer_line"></div>
<div id="footer"></div>
</div>
</body>
</html>
Мой CSS:
@charset "utf-8";
/* CSS Document */
body{
background:#FFF;
margin:0;
padding:0;
}
#wrapper{
backgorund:#FFF;
width:100%;
height:100%;
}
#header{
background-image:url(struktura/header_bckg.png);
background-repeat:repeat-x;
height:140px;
width:100%;
}
#header_left{
width:40%;
height:100%;
display:inline;
}
#header_left img{
margin: 10px 0 0 20px;
}
#header_right{
width:55%;
display:inline;
}
.menu{
width: 100%;
display: inline;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 0 0 0 40px;
bottom:20px;
}
#header_line{
background-image:url(struktura/header_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#content{
background: #FFF;
width: 100%;
height: 600px;
}
#footer_line{
background-image:url(struktura/footer_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#footer{
background-image:url(struktura/footer_bck.png);
background-repeat:repeat-x;
height:250px;
width:100%;
}
Верхнее и нижнее заполнение/маржа не влияют на встроенные элементы.
Вот хорошая статья, объясняющая это.
Итак, решение для вас может выглядеть так:
.menu{
display: inline-block;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 40px;
bottom: 20px;
}
display: inline;
попробуйdisplay: inline-block;