[CSS/HTML] floating divs geen volledige breedte

[joekoe]

Hi,

Ben sinds kort bezig met css en loop tegen wat probleempjes op.
Ik ben bezig een kleine test website op te zetten volledig bestaand uit divs en css.
http://www.joekoemedia.nl/www.test.nl/productie

Ik heb bijvoorbeeld een knoppenbalk gemaakt, het is de bedoeling dat alle knoppen 20% breed worden. Zodra ik de laatste knop op 20% zet valt deze uit zijn parent div en schiet een regel naar onder.(Hij staat nu op 19%).

Gevoelsmatig denk ik dat het te maken heeft met de borders? Dat deze op 1 of andere manier worden meegeteld?

Misschien dat iemand me uit de brand kan helpen.

Hieronder de stylesheet die misschien het e.e.a kan verduidelijken.

Bedankt!

Cascading Stylesheet: stylesheet.css

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;
text-align:left;
background-color: #996699;
}



div#container{
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -170px;
border:1px solid #FF0099;
width:600px;
background-color:#FFCCFF;
}


div#content{
float:right;
height:300px;
width:469px;

}



div#flash{
float:left;
width:130px; 
height:300px;
border-right:1px solid #FF0099;
}


div#footer{
clear:both;
width:100%;
border-top:1px solid #FF0099;
height:40px;
}

div#spacer{
height:279px;
width:100%;
}

div#menubalk{
text-align:middle;
height:20px;
width:100%;
border-top:1px solid #FF0099;
line-height:19px;
}

div#knop1{
text-align:center;
float:left;
height:20px;
width:20%;
background-color:#B9CAFF;
border-right:1px solid #FF0099;
}

div#knop2{
float:left;
height:20px;
width:20%;
background-color:#B9CAFF;
border-right:1px solid #FF0099;
}

div#knop3{
float:left;
height:20px;
width:20%;
background-color:#B9CAFF;
border-right:1px solid #FF0099;
}

div#knop4{
float:left;
height:20px;
width:20%;
background-color:#B9CAFF;
border-right:1px solid #FF0099;
}

div#knop5{
float:left;
height:20px;
width:19%;
background-color:#B9CAFF;

}


#menubalk a:link {
display:block;
width:100%;
height:100%;
text-align:center; 
color: #FF0099; 
background-color: #B9CAFF;
text-decoration: none;
}

#menubalk a:visited {
display:block;
width:100%;
height:100%;
color: #FF0099; 
background-color: #B9CAFF;
text-decoration: none;
text-align:center;
} 

#menubalk a:hover {
display:block;
width:100%;
height:100%;
color: #FF0099; 
background-color: #FFCCFF;
text-decoration: none;
text-align:center;
} 

[H004]

Je definieert de breedte van #content (469px), en je hebt 5 menu-items, waarvan er 4 een border-right hebben van 1 px: 469 - 4 = 465. 465 / 5 = 93px per menu-item (ipv 20 of 19%)

joekoe schreef op zaterdag 18 juli 2009 @ 18:26:
Ik ben bezig een kleine test website op te zetten volledig bestaand uit divs en css.

Dat is te zien aan je code ja! Gevalletje divitis Ik zou ipv al die divjes een unordered list gebruiken voor je menu. Dat is semantisch gezien een stuk correcter!

Daarnaast definieer je ook 5x vrijwel dezelfde styles voor knop1 t/m knop 5.

Cascading Stylesheet:

div#menubalk div { /* eigenlijk dus ul#menu li */
  text-align: center;
  float: left;
  height: 20px;
  width: 93px;
  background-color: #B9CAFF;
  border-right: 1px solid #FF0099; 
} 

div#menubalk #knop5 { /* en dit zou ik veranderen in ul#menu li#contact */
  border-right: 0; 
} 

Bovenstaande doet precies hetzelfde, maar is wel goed onderhoudbaar, als je bv de kleur van de tekst in de knoppen wil aanpassen. Nu moet je op 5 plekken een kleur aanpassen, voortaan is dat nog maar één handeling!

Edit En nog een tip: aan je styles te zien wil je exact dezelfde styles voor 'a:visited' als voor 'a:link'. Als je 'a:link' gewoon veranderd in 'a', hoef je helemaal geen a:visited te gebruiken...

[ Voor 29% gewijzigd door H004 op 18-07-2009 19:59 ]

[joekoe]

bedankt voor de informatie.

ik was inderdaad al aan het kijken hoe ik mijn stylesheet kon verkleinen, zover was ik nog niet

maar wat je zegt klinkt logisch. Ga er gelijk mee aan de slag.


edit:

93px per knop blijkt inderdaad goed te werken in firefox en ie. Stom dat ik er zelf niet ben opgekomen.

Ga in iedergeval verder met je tips en de stylesheet wat finetunen.

Bedankt!

[ Voor 34% gewijzigd door joekoe op 18-07-2009 20:09 ]