HTML и CSS нижнее поле не работает

0

Я не понимаю, почему нижняя граница не относится к строке меню. Я пробовал все типы paddings, поля и все такое. Я не знаю, что добавить или изменить, чтобы он мог применить к нему. Я пытался поставить позицию относительно #header и абсолютный в .menu а затем все сломалось. Я не знаю, что я сделал не так?

Ссылка JsFiddle

Мой 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>&nbsp;</p>
  <p>&nbsp;</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%;
   }
  • 1
    Что значит "не работает"? Что не происходит, что вы хотите случиться?
  • 0
    Вместо display: inline; попробуй display: inline-block;
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

Верхнее и нижнее заполнение/маржа не влияют на встроенные элементы.

Вот хорошая статья, объясняющая это.

Итак, решение для вас может выглядеть так:

.menu{
    display: inline-block;
    font-family: "Myriad Pro";
    font-size: 20px;
    color: #333333;
    margin: 40px;
    bottom: 20px;
}
  • 0
    спасибо это очень помогло

Ещё вопросы

Сообщество Overcoder
Наверх
Меню