Проблем с навигация

[Vladkata]

Исках подобна навигация, като тази на Google, само че малко по-опростена. Направих я, върви перфектно на резолюция 1280х1024, но при по малките, последния бутон застава под другия:

1280х1024:

Вижте я цялата - URL

1024х768:

Вижте я цялата - URL

Ето и кода:

<div id="navigation"> 
          <div id="nav_button_active"><a href="index.html">НАЧАЛО</a></div> 
          <div class="nav_button"><a href="friends.html">ПРИЯТЕЛИ</a></div> 
          <div class="nav_button"><a href="/forums">ФОРУМ</a></div> 
</div>

[css]
#navigation{
background-image: url(../images/navigation.png);
background-repeat: repeat-x;
width: 100%;
height: 40px;
top: 0;
left: 0;
position: fixed;
z-index: 9999;
}

.nav_button{
background-color: #2d2d2d;
width: 250px;
height: 24px;
margin-left: 128px;
padding-top: 12px;
float: left;
font-family: segoe ui, sans-serif, arial;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: center;
border-top: #4c4c4c 3px solid;
}

.nav_button:hover{
background-color: #4c4c4c;
width: 250px;
height: 24px;
margin-left: 128px;
padding-top: 12px;
float: left;
font-family: segoe ui, sans-serif, arial;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: center;
border-top: #008edf 3px solid;
}

#nav_button_active{
background-color: #2d2d2d;
width: 250px;
height: 24px;
margin-left: 128px;
padding-top: 12px;
float: left;
font-family: segoe ui, sans-serif, arial;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: center;
border-top: #008edf 3px solid;
}

#nav_button_active:hover{
background-color: #4c4c4c;
width: 250px;
height: 24px;
margin-left: 128px;
padding-top: 12px;
float: left;
font-family: segoe ui, sans-serif, arial;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: center;
border-top: #008edf 3px solid;
}
[/css]

Как <div>-овете да се редят един до друг, а не един под друг?

Благодаря предварително!

 

[Fakeheal]

За да ги редиш един под друг им задавaш float: left; и не забравяш да клиърнеш float-а след тях <div style="clear:both;"></div>

Пробвай да зададеш някаква широчина на div-овете, като общата им широчина не прехвърля да кажем 1000px.

 

[Vladkata]

Искам да са един до друг, а не един под друг. Имат float: left; и ширина, но не става.

 

[Fakeheal]

Ся ще ти кажа какъв ти е проблема, пък ти реши дали ще избереш мнението ми по-горе. Имаш div-ове, които са по 250px => 3x 250 = 750px. Добавил си и margin-left: 128px, което прави 3x128 = 384px. Като събереш с предните дивове и целия width се получава 1134px (+, не погледнах за border-и и padding-и). За това под по-голяма резозолюция всичко е OK, а под по-малка се разместват.

Edit: Другия вариант е да сложиш на главния див (#navigation), в което е менюто и да заместиш width: 100% с определен width (като 1200px) и така ще се получав scrollbar отдолу при по-малки резолюции.

Edit2: Добра и приета практика е менютата (хоризонтални или вертикални) да се пишат по този начин:

<ul id="navigation">
          <li id="nav_button_active"><a href="index.html">НАЧАЛО</a></li> 
          <li class="nav_button"><a href="friends.html">ПРИЯТЕЛИ</a></li> 
          <li class="nav_button"><a href="/forums">ФОРУМ</a></li> 
</ul>

 

[Vladkata]

Edit: Другия вариант е да сложиш на главния див (#navigation), в което е менюто и да заместиш width: 100% с определен width (като 1200px) и така ще се получав scrollbar отдолу при по-малки резолюции.

<3 ya ! Не се бях сетил за това. Мерси много!