CSS: padding forskyver navbar

[hlnd]

Hei,

 

Jeg har litt trøbbel med CSS: når jeg legger til padding til #nav, blir hele #nav-boksen forskøvet, og ender opp for langt til høyre. Uten padding-regelen blir knappene inne i #nav plassert feil.

 

Se nettsida for hva jeg mener: http://mv2.hlnd.net/dynamic_index.php

 

Relevant CSS:

#nav { 
   width: 900px;
   height: 48px;
   background-image: url("../img/layout/nav.png");
   padding: 0px 50px; /* denne som utgjør forskjellen */
   background-repeat:no-repeat;
   margin: 0px;
}

#nav a { 
   float: left;
   height: 26px;
   width: 100px;
   margin-top: 11px;
   margin-bottom: 11px;
   margin-left: 28px;
}

 

Relevant HTML:

<div id="nav">
   <div class="button"><a href="../" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bNytt','','/img/layout/buttons/hov/nytt.png',1)"><img src="/img/layout/buttons/std/nytt.png" name="bNytt" width="100" height="26" border="0" id="bNytt" /></a></div>
   <div class="button"><a href="../bilder/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bBilder','','/img/layout/buttons/hov/bilder.png',1)"><img src="/img/layout/buttons/std/bilder.png" name="bBilder" width="100" height="26" border="0" id="bBilder" /></a></div>
   <div class="button"><a href="../innspillinger/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bInnspillinger','','/img/layout/buttons/hov/innspillinger.png',1)"><img src="/img/layout/buttons/std/innspillinger.png" name="bInnspillinger" width="100" height="26" border="0" id="bInnspillinger" /></a></div>
   <div class="button"><a href="../historie/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bhistorie','','/img/layout/buttons/hov/historie.png',1)"><img src="/img/layout/buttons/std/historie.png" name="bhistorie" width="100" height="26" border="0" id="bhistorie" /></a></div>
   <div class="button"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bSpillejobber','','/img/layout/buttons/hov/spillejobber.png',1)"><img src="/img/layout/buttons/std/spillejobber.png" name="bSpillejobber" width="100" height="26" border="0" id="bSpillejobber" /></a></div>
   <div class="button"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bMusikerne','','/img/layout/buttons/hov/musikerne.png',1)"><img src="/img/layout/buttons/std/musikerne.png" name="bMusikerne" width="100" height="26" border="0" id="bMusikerne" /></a></div>
</div>
<!-- Blir temmelig stygt med all rollover-info der, men strukturen er det relevante. -->

 

Jeg trodde padding bare påvirka det som var inne i "boksen" du setter padding på?

 

På forhånd takk

(Jeg er forresten klar over at jeg ikke bruker .button til noe)

Endret 5. april 2011 av hlnd

[hlnd]

Fikk det til. La det inni en ekstra boks med bredde lik "innholdbredden", med margin: 0px auto;

 

#nav {
   width: 900px;
   height: 48px;
   background-image: url("../img/layout/nav.png");
   background-repeat:no-repeat;
   margin: 0px;
}
#navcontents {
   width: 800px;
   margin: 0px auto;
}

#nav a {
   float: left;
   height: 26px;
   width: 100px;
   margin-top: 11px;
   margin-bottom: 11px;
   margin-left: 28px;
}

[Wedvich]

Det du har gjort nå fungerer også, men grunnen til at det blir forskjøvet er nok måten width fungerer på i forbindelse med padding. widthbestemmer bredden på innholdet i et element, så den totale plassen elementet opptar blir width + eventuell indre marg (padding). Så dersom du f.eks. har en boks på 900px, med 50px padding på hver siden, blir den totale bredden 1000px. Sett heller width til 800px på #nav, så vil det bli 900px totalt med 50px padding på hver side.

[hlnd]

Det forklarer en hel del. Takker.