[CSS] box opvullen

[Verwijderd]

Dag lieve mensen

Klein probleempje met CSS waar ik niet uit kom.
Ik wil dit maken:

maarrr, ik weet niet de hoogte van de rode div (maar neem voor het gemak 200px). De hoogte van de groene div staat vast (bijv. 100px) en nu wil ik met de blauwe div de lege ruimte opvullen. Hoe doe ik dit?

#rood {
border: 2px solid red;
height: 200px;
}
#groen {
border: 2px solid green;
margin: 10px;
height: 50px;
}
#blauw {
border: 2px solid blue;
margin: 10px;
}

<div id="rood">
<div id="groen"></div>
<div id="blauw"></div>
</div>

de hoogte van de rode div is dus variabel, dus de hoogte van de blauwe ook. Ik kan de blauwe div geen hoogte in % of px meegeven, want dan klopt ie niet. Hellup!

[mullah]

Als je het vindt mag je me midden in de nacht wakker bellen...

Volgens mij is het namelijk onmogelijk om puur met CSS een verticale leegte binnen een box met onbekende hoogte op te vullen, je zult hier eventueel met Javascript wat aan kunnen doen.

[UltimateB]

Als je de blauwe div een hoogte van 100% geeft zal hij zich aanpassen aan de hoogte van de content in deze div. Wil je deze pagina even hoog hebben als de browser window dan zal je kunnen werken met de property position:fixed; en dan top:0px; bottom:0x; dit wordt alleen neit ondersteund door brakke browsers (lees IE).

[faabman]

wat is het effect wat je wilt bereiken als het een puur visueel effect is dan kun je ook wat spelen met de achtergrond van de rode container

[crisp]

wat in IE in non-compliant mode werkt is dit:

Cascading Stylesheet:

#rood {
    width: 400px;
    height: 600px; /* of wat anders, maakt niet uit */
    padding-top: 220px;
    padding-bottom: 10px;
    position: relative;
    border: 2px solid red;
}

#groen {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 380px;
    height: 200px;
    border: 2px solid green;
}

#blauw {
    margin: 0px 10px;
    width: 380px;
    height: 100%;
    border: 2px solid blue;
}

voor compliant mode en W3C boxmodel is met wat truukjes ook wel voor elkaar te krijgen

[Verwijderd]

Het truuckje is dus inderdaad één van de twee elementen uit de flow halen, maar die wel weer op de positie terugzetten waar je hem wilt. Het andere element zul je dan zoveel marge moeten geven, dat de bounding boxen elkaar niet meer overlappen (plus een beetje omdat je ruimte ertussen wilt).

[Verwijderd]

Ik moet even huilen
Heb de hele avond zitten prutsen met de tips hier (waarvoor dank!)
maar het is of IE die het fout doet, of mozilla. Fout is hier misschien niet het juiste woord, maar het lukt me niet om in beide browsers het gewenste effect te krijgen. Zou ik dan toch echt met een browserspecifieke css file aan de slag moeten?

[crisp]

Verwijderd schreef op 21 april 2004 @ 00:37:
Ik moet even huilen
Heb de hele avond zitten prutsen met de tips hier (waarvoor dank!)
maar het is of IE die het fout doet, of mozilla. Fout is hier misschien niet het juiste woord, maar het lukt me niet om in beide browsers het gewenste effect te krijgen. Zou ik dan toch echt met een browserspecifieke css file aan de slag moeten?

3 mogelijkheden:

1) gebruik een strict DTD, IE6 zou dan volgens het w3c boxmodel moeten renderen, gebruikers met een lagere IE versie hebben dan pech
2) dwing non-IE browsers het IE-boxmodel te gebruiken
3) maak gebruik van het feit dat IE bijvoorbeeld de descendant-selector niet ondersteund om IE-specifieke CSS rules te overrulen in non-IE browsers; dwing IE6 hierbij ook in quirks-mode

[ Voor 3% gewijzigd door crisp op 21-04-2004 00:57 ]

[T-MOB]

Mullah, wat is je telefoonnummer????

Hier een werkend voorbeeld (ie5, ie6 en moz getest)..... wat Crisp en Cheatah al vertelden. Incluis box-model fixes

[mullah]

uhm.. ik zie dat ik hier vaker moet langskomen

ik zal eens kijken of ik er iets aan heb...

edit, ik heb gekeken en.. nope, hier heb ik niets aan... dit gaat uit van een vaste hoogte en font resizen werkt ook niet

Wat ik zoek is een manier om hetzelfde te doen als je niet weet wat de hoogte van de container box is omdat dit wel afhankelijk is van de inhoud. (en dan eigenlijk voor meerdere kolommen)

Shit, het bestaat al en het heet tables.... en die wilde ik nou niet gebruiken.

Wat ik uiteindelijk zoek zou er ongeveer zo uit moeten zien:

pagina header
box 1l	box 1m	box 1r
box 2l	box 2m	box met dynamische hoogte die uitvult tot aan het einde van de pagina
box met dynamische hoogte die uitvult tot aan het einde van de pagina	box 3m
	box met dynamische hoogte die uitvult tot aan het einde van de pagina
pagina footer

[ Voor 84% gewijzigd door mullah op 29-04-2004 11:27 ]

[faabman]

mullah schreef op 29 april 2004 @ 11:05:
uhm.. ik zie dat ik hier vaker moet langskomen

ik zal eens kijken of ik er iets aan heb...

edit, ik heb gekeken en.. nope, hier heb ik niets aan... dit gaat uit van een vaste hoogte en font resizen werkt ook niet

Wat ik zoek is een manier om hetzelfde te doen als je niet weet wat de hoogte van de container box is omdat dit wel afhankelijk is van de inhoud. (en dan eigenlijk voor meerdere kolommen)

Shit, het bestaat al en het heet tables.... en die wilde ik nou niet gebruiken.

Wat ik uiteindelijk zoek zou er ongeveer zo uit moeten zien:

pagina header
box 1l	box 1m	box 1r
box 2l	box 2m	box met dynamische hoogte die uitvult tot aan het einde van de pagina
box met dynamische hoogte die uitvult tot aan het einde van de pagina	box 3m
	box met dynamische hoogte die uitvult tot aan het einde van de pagina
pagina footer

moeten die boxen en visueel uitgevuld uitzien of moeten ze echt uitvullen... in het eerste geval moet je ff op www.alistapart.com zoeken naar het artikel faux columns... in het andere geval denk ik niet dat je dat op dit moment voor elkaar krijgt...

[Clay]

Er is idd een verschil tussen een visueel effect, en de fysieke afmetingen van de elementen die daarin zitten. Zo'n tabelletje posten met "zo moet het eruit zien" is heel leuk, maar dat zegt dus helemaal nix over de markup of de afmetingen van de elementen daarin.

Het enige zinvolle is dus imo het posten van een design, en daarvan aangeven wat scalable is en wat niet. Een design wordt nog teveel denkend aan tables in vlakken verdeeld (en dan met tig divjes in elkaar gezet), en als je dat gaat proberen te CSS'en maak je het jezelf gewoon ontzettend moeilijk. Zijn er eigenlijk echt goeie tuto's over "zo CSS je dit design" Het werkt namelijk gewoon helemaal anders.

[T-MOB]

Mullah, het is idd een één-kolomsvoorbeeld (daat vroeg de TS ook om)... Voor jouw probleem zou je hier eens naar kunnen kijken. Gemaakt voor een ander probleempje op GOT, maar ik vind het zelf wel een leuk ding

[mullah]

het idee lijkt inderdaad op het faux columns verhaal... behalve dat ik het niet alleen qua uiterlijk wil maar ook qua structuur.

Dus je hebt een aantal columns die allemaal even hoog zijn maar een willekeurig aantal elementen hebben.
Het onderste element is een box met een minimale hoogte van x.. maar wel zo dat de hele hoogte die over is uitgevuld wordt als dit groter is.

een voorbeeld waar ik het met absolute waarden heb geprobeerd http://lodewijk.mmda.nl/~lodewijk/2004-02-08-prototype/ (was al helemaal vergeten dat ik die als eens online had staan )

Het faux columns idee komt daar maar gedeeltelijk aan, als je gaat werken met 5 kolommen bijvoorbeeld (even ervanuitgaande dat dat nuttig is) heb je er niet veel meer aan.

edit:
typos zuigen

[mullah]

T-MOB schreef op 29 april 2004 @ 13:19:
Mullah, het is idd een één-kolomsvoorbeeld (daat vroeg de TS ook om)...

Klopt, maar het onderdeel dat voor mij het belangrijkste was was de onbekende hoogte...

Verwijderd schreef op 20 april 2004 @ 18:30:
maarrr, ik weet niet de hoogte van de rode div (maar neem voor het gemak 200px). De hoogte van de groene div staat vast (bijv. 100px) en nu wil ik met de blauwe div de lege ruimte opvullen. Hoe doe ik dit?
[...]
de hoogte van de rode div is dus variabel, dus de hoogte van de blauwe ook. Ik kan de blauwe div geen hoogte in % of px meegeven, want dan klopt ie niet. Hellup!

Als je de hoogte dus niet absoluut weet maar dat deze wel door de omstandigheden (andere kolommen in mijn voorbeeld) wordt vastgelegd kom ik dus op mijn voorbeeld uit.

[T-MOB]

Ik zal even kijken of ik het eerste voorbeeld om kan bouwen... BRB

Hmmzz.. helaas, niet zonder faken...

[ Voor 24% gewijzigd door T-MOB op 29-04-2004 15:40 ]