vaste hoogte van div automatisch aanpassen

[yammaski]

Ik heb een pagina met 3 hoofd-div's : header, middle en footer. Deze staan los van/onder elkaar en zitten dus niet nog eens in een div.
In "middle" zit een andere div (shopping_cart) waar de inhoud van een winkelwagentje komt, de hoogte hangt af van wat erin komt.
Ik zou willen dat deze div een minimum vaste hoogte heeft zodat de pagina mooi "gevuld" is. Als er bvb maar 1 of 2 producten instaan, is de pagina maar half gevuld. Ik had de middle-div een vaste hoogte gegeven, maar als er dan meer producten inkomen en de lijst langer dan de pagina wordt, komt de middle-div over de footer-div. En deze zou mee naar onder moeten gaan.

zie testpage met 2 producten
Deze pagina zou gevuld moeten zijn, de footer (btw inbegrepen, ....) zou onderaan moeten komen.

zie testpage met meerdere producten
Deze is ok.


Yam.

 

[csshunter]

Ehm, je testpagina's gaan naar localhost, en daar zitten ze bij mij niet.

 

[yammaski]

heb het aangepast ... sorry

 

[csshunter]

Hoi Yam,
Ik zou denken: de footer helemaal isoleren van de rest, de hele rest in een paar containertjes stoppen, en dan...:

• Footer via min-height

Met vriendelijke groet,
CSShunter

 

[yammaski]

Bedankt ... de footer (btw inbegrepen, ....) blijft wel net onder het winkelwagentje, maar dan mag eigenlijk voor de duidelijkheid van de klant.
Maar de achtergrond blijft mooi vast en gaat mee als het wagentje voller wordt. :thumb:


Yammaski.

PS : mag je "fieldset" gebruiken zonder een form ?
Ik heb de test gedaan met de validator van W3C in verschillende doctypes en deze geeft toch "groen" aan !?

 

[csshunter]

de footer (btw inbegrepen, ....) blijft wel net onder het winkelwagentje, maar dat mag eigenlijk

Ja, kan ook (maar hoefde niet als de container-div's en binnen-containers anders geordend waren).

=======

mag je "fieldset" gebruiken zonder een form ?

Dat is een interessante.
Het is duidelijk niet de bedoeling, want w3c geeft in de specs aan dat het binnen een form moet gebeuren:

• [url]www.w3.org/TR/html401/interact/forms.html#h-17.10[/URL]

Maar de html-validator slaat er inderdaad niet op aan.

• Test: fieldset-elders.htm
• De html-validator geeft ook geen gemopper.bij een <legend> binnen zo'n losse <fieldset>.
• De in html-Tidy ingebouwde html-validator, die soms wat andere opmerkingen geeft, reageert er ook niet op.
• De pittig strenge webrichtlijnen-quickscan geeft ook geen blijk van wantrouwen (report/160786/330728).
• En de browsers doen eveneens alsof er niets aan de hand is (FF, Chrome, Opera, Safari, IE7, IE8, IE9).

Toch zou ik het in de praktijk niet gebruiken, want de opmaak voor <form>-bestanddelen is erg lastig, en kan per browser(-versie) verschillen.

• Bv. IE7 geeft geen witruimte onder de laatste regel, IE8 zet de legend helemaal links in de hoek.

En <div>'jes zijn een prima alternatief, die heb je qua styling volledig in de hand!

Met vriendelijke groet,
CSShunter