[CSS] Opvulling en utilijning werkt niet...

[jonggoud.nl]

Ik ben bezig met een nieuwe site. Althans hij bestaat al wel, maar ik probeer alles nu in CSS om te zetten ipv Tables. Veel handleidingen gelezen al.

Voor mijn opmaak heb ik als voorbeeld http://css.maxdesign.com.au/floatutorial/tutorial0916.htm gebruikt. Echter nu wil ik dat de hele linker div (leftnav) als achtergrond het plaatje gebruikt dat ik in de css gezet heb. Echter dit lukt mij niet... hij pakt alleen maar een klein stukje of helemaal niets. Er wordt ook alleen maar gevuld op de plek waar evt tekst staat. Ik heb alles even op de onderstaande link in 1 htm file gezet.

Trouwens, in Mozilla doet ie helemaal gek??

http://www.jonggoud.nl/extra/test.htm

Hier de code van de DIV

Cascading Stylesheet:

#leftnav
{
float: left;
width: 202px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
background-image: url(resources/images/site/layout_left.gif);
 background-attachment: fixed;
}

Weet iemand wat ik fout doe? Ik zoek me echt de pletter, maar mijn verstand van boxes etc. is op dit moment nog niet zo groot, was altijd gewend om om tables te werken.

edit:
Let aub niet op de uitlijning rechtsboven onder het logo, dat is gewoon een plaatje wat niet goed uitlijnt.

[ Voor 4% gewijzigd door jonggoud.nl op 29-11-2003 12:58 ]

[crisp]

op zich logisch, je box wordt zo hoog als de content omdat je geen height hebt opgegeven, daarbuiten zie je logischerwijs je background niet meer.
Wb je problemen in Mozilla: dat komt omdat mozilla de paddings en borders optelt bij de opgegeven breedte, dat heeft te maken met het feit dat Mozilla default met een ander box-model werkt.

[jonggoud.nl]

crisp schreef op 29 november 2003 @ 13:11:
op zich logisch, je box wordt zo hoog als de content omdat je geen height hebt opgegeven, daarbuiten zie je logischerwijs je background niet meer.
Wb je problemen in Mozilla: dat komt omdat mozilla de paddings en borders optelt bij de opgegeven breedte, dat heeft te maken met het feit dat Mozilla default met een ander box-model werkt.

Ok, dat kan ik volgen. Zou het werken als je leftnav en rightnav nested in 'content' zodat ze beidde dezelfde hoogte aannemen als content?

En mbt tot Mozilla, ik zal me gaan verdiepen in de verschillende box modellen. Is zo iets trouwens wel op te lossen? En is er misschien een plek waar een voorbeeldpagina zoals de mijne staat kwa opmaak? Ik kan er niet op komen nml.

[kleautviool]

Je moet gewoon leftnav en rightnav zelf een hoogte meegeven. Door ze in content te nesten nemen ze niet automatisch de hoogte van content aan

[Justice]

jonggoud.nl schreef op 29 november 2003 @ 13:14:
En mbt tot Mozilla, ik zal me gaan verdiepen in de verschillende box modellen. Is zo iets trouwens wel op te lossen? En is er misschien een plek waar een voorbeeldpagina zoals de mijne staat kwa opmaak? Ik kan er niet op komen nml.

http://css-discuss.incutio.com/?page=RenderingMode
http://www.teacherjohn.co...bdesignresources.html#dtd

Die tweede site vond ik net pas en daar staat echt HEEL veel op zeg

[crisp]

Je kan ze wel nesten in content en daarmee dezelfde hoogte laten aannemen:

Cascading Stylesheet:

#content {
  position: relative;
  width: 100%;
  padding-left: 202px;
  padding-right: 202px;
}

#leftNav {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 202px;
  height: 100%;
}

#rightNav {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 202px;
  height: 100%;
}

wb het boxmodel zou je je divs -moz-box-sizing:border-box kunnen geven