[CSS]Float probleem

[Niakmo]

ik heb een site gemaakt met een variabele hoogte. Omdat ik 3 collomen gebruik heb ik gebruik gemaakt van faux columns. Dit werkt allemaal goed. Nu wil ik de site onderaan "afsluiten" met een witte balk van 10px hoog. Dit probeer ik op te lossen door te gebruik te maken van een siteholder met daarin de site en de onderste balk die na elkaar floaten.

HTML:

<div id="siteholder">
    <div id="site">inhoud van de site</div>
    <div id="bottombalk">de onderste balk</div>
</div>

Cascading Stylesheet:

#siteholder
{
    position: absolute;
    width: 800px;
    top: 35px;
    left: 50%;
    margin-left: -400px;
    background: white url(images/background.gif) repeat-y;  
}

#site
{
    position: relative;
    float: left;
    width: 800px;
    float: left;
    background-color: green;
}

#bottombalk
{
    position: relative;
    float: left:
    width: 800px;
    height: 10px;
    background-color: red;
}

als ik nu de bottombalk div een kleur geef, rood bijv, dan laat hij hem over de site div heen zien. Zodra ik inhoud in de div zet, laat hij hem wel goed zien, dus waar hij hoort. Dus de div word wel goed gepositioneerd maar de achtergrondkleur zet hij ergens anders neer.

de gehele site kan hier gevonden worden en de css hier

Het probleem doet zich voor onder FF en Safari, IE heb ik nog niet getest.

[JHS]

Waarom pas je in vredesnaam floats en relatieve positioning toe . Als je ze gewoon in de siteholder division zet komen ze gewoon onder elkaar terecht, als het goed is .

[Niakmo]

als ik ze niet laat floaten doet hij nog niks met de bottombalk, pas als ik die spacer.gif erin zet doet hij het, maar dat wil ik juist niet, ik wil gewoon de achtergrond kleur van die div gebruiken.

[nemesis_]

wat nou als je #siteholder een clear:both; meegeeft?

[crisp]

netter:

Cascading Stylesheet:

#siteholder
{
    width: 800px;
    margin: 35px auto 0 auto;
    background: white url(images/background.gif) repeat-y;  
}

#topbalk
{
    height: 10px;
    background-color: white;
}

#site
{
    background-color: green;
}

#bottombalk
{
    height: 10px;
    background-color: red;
}

geen absolute positioning nodig en geen floats

[Niakmo]

dat eerste werkt toch niet in IE? dan moet er toch text-allign center bij?

[JHS]

Gebruik borders, of margin . Zie deze testcase . Overigens zou ik centreren niet met behulp van (absolute) positionering doen, maar met margin: 0 auto; . Zie deze testcase.

edit:

Voor IE < 5.5 moet daar text-align: center; op de parent bij, ja .

[ Voor 13% gewijzigd door JHS op 04-05-2006 11:30 ]

[Niakmo]

crisp schreef op donderdag 04 mei 2006 @ 11:27:
netter:

Cascading Stylesheet:

#siteholder
{
    width: 800px;
    margin: 35px auto 0 auto;
    background: white url(images/background.gif) repeat-y;  
}

#topbalk
{
    height: 10px;
    background-color: white;
}

#site
{
    background-color: green;
}

#bottombalk
{
    height: 10px;
    background-color: red;
}

geen absolute positioning nodig en geen floats

dit werkt ook niet, nu word de bottombalk na de topbalk geplaats, maar de site komt er niet tussen, die blijft gewoon zoals die is.

op deze manier krijg de #site div niet de hoogte mee. Ik heb nu een border van 10px gebruikt zoals JHS al opmerkte dit werkt nu wel, mits ik mijn manier gebruik, als ik de container niet absolute positioneer doet hij het niet.

[ Voor 16% gewijzigd door Niakmo op 04-05-2006 11:42 ]

[crisp]

zirus schreef op donderdag 04 mei 2006 @ 11:35:
[...]


dit werkt ook niet, nu word de bottombalk na de topbalk geplaats, maar de site komt er niet tussen, die blijft gewoon zoals die is.

Zet een overflow: auto/hidden op je #site (float-clearing)

[Niakmo]

crisp schreef op donderdag 04 mei 2006 @ 11:43:
[...]

Zet een overflow: auto/hidden op je #site (float-clearing)

Die hielp hem, plus ik moest over al position: relative eerst weghalen en de 3 kolommen naar links laten floaten.

Het enige probleem was ik nu heb is dat de site in IE 10px te veel naar links staat, en dat hij zich niet aan de hoogte van de li houd voor het menu. Denk dat die eerste een double margin bug is en dat die andere kwestie van line height is.

Het eerste was inderdaad een double-margin bug, maar dat de menu items in IE groter zijn ligt niet aan de line-height of de margins/paddings, die staan allemaal op 0 behalve de bottom voor de spacing.

[ Voor 17% gewijzigd door Niakmo op 04-05-2006 12:24 ]

[Calamor]

Klop het als je de menu item heb gelikt dat er een stippel rand om komt behalve aan de rechter kant?

Ik zie dat je meer website's maak. Bij de eerste 2 is de intro in flash. Maar als je geen flash heb kan je niet op de site. Menu's moet je ook hebben zonder flash. Anders kunnen somige mensen niet op de site.

[ Voor 52% gewijzigd door Calamor op 04-05-2006 23:13 ]