Problem oko sirine navigation bar-a.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Nasao sam na nekom sajtu navigation bar bas dobar i jednostavan, malo promenio boje i to al sad imam problem... U css kad ukucam width: 980px; nece ostaje isti, evo slike i kod.

#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; width: 980px; } #trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; width: 980px; } #trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #262626 url(nav-bg.png) repeat-x 0 0; } #trans-nav li:hover { background-position: 0 -40px; } #trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; } #trans-nav li a:hover { color: #FF9B2F; } #trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; } #trans-nav li:hover ul { opacity: 1; } #trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; } #trans-nav li:hover ul li { height: 30px; line-height: 30px; } #trans-nav li ul li a { background: #63867f; } #trans-nav li ul li a:hover { background: #5a8078; } #trans-nav li { -webkit-transition: all 0.2s; } #trans-nav li a { -webkit-transition: all 0.5s; } #trans-nav li ul { -webkit-transition: all 1s; } #trans-nav li ul li { -webkit-transition: height 0.5s; }

E sad kad sam to tako uradio nav bar ostaje ovakav kao i pre:



Ja kad dodam u taj navigation bar nesto novo ono se prosiri ali nece ovako...
A sto se tice divova imam samo "container" koji ima sirinu 980px...


Resio sam tako sto sam u photoshopu uradio tu traku da je tako nazovem
Mada znam da to nije pravo resenje ali nema veze...

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Da bi povecao <li> tagove nemoj koristiti width: vec padding
Da bi povecao container <div> stavi mu overflow: hidden

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 21 Sep 2013 20:59

Aha kapiram, hvala

Dopuna: 10 Nov 2013 13:39

Izvinjavam se sto otvaram opet ovu temu, ali opet isti problem imam
Znaci ista stvar je u pitanju, ne mogu da namestim sirinu da ide do kraja ekrana, evo ovako izgleda navigation bar u css-u:

#trans-nav { list-style-type: none; height: 40px; padding-left: 200px; padding-right: 200px; margin: 0; width: 980px; font-size: 15px; } #trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; width: 980px; } #trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #262626 repeat-x 0 0; } #trans-nav li:hover { background-position: 0 -40px; } #trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; } #trans-nav li a:hover { color: #32669f; } #trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; } #trans-nav li:hover ul { opacity: 1; } #trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; } #trans-nav li:hover ul li { height: 30px; line-height: 30px; } #trans-nav li ul li a { background: #63867f; } #trans-nav li ul li a:hover { background: #5a8078; } #trans-nav li { -webkit-transition: all 0.2s; } #trans-nav li a { -webkit-transition: all 0.5s; } #trans-nav li ul { -webkit-transition: all 1s; } #trans-nav li ul li { -webkit-transition: height 0.5s; }

I idalje je isto kao na slici odozgo...Dzabe ja stavlja padding...

--------------------------------------------------------------------------
Reseno pomocu ovog:
cssnewbie.com/full-width-centered-navigation-bar/#.Un-AKfkz12I