anoniem Geplaatst: 23 december 2003 Delen Geplaatst: 23 december 2003 Ik heb één <div id=""box01"> met daarin twee andere <div> (<div id="box01a"> en <div id="box01b">) De hoogte van box01b is variabel (afhankelijk van de content in een database). Nu wil ik dat de box01 dynamisch 'meegroeit' met de hoogte van box01b. Ik heb inmiddels de volgende testcode: [code:1:de5d1ecc5d]<html> <body> <div id="box01" style="z-index: 0; position: absolute; left: 100px; top: 0px; width: 500px; height: 100%; background-color: blue"> <div id="box01a" style="z-index: 0; position: absolute; left: 0px; top: 0px; width: 250px; height: 80%; background-color: yellow"> </div> <div id="box01a" style="z-index: 0; position: absolute; left: 250px; top: 0px; width: 250px; height: 100%; background-color: red"> Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst </div> </div> </body> </html>[/code:1:de5d1ecc5d] In deze testcode zie je dat de box01 NIET meegroeit met de hoogte van de box01b (met de tekst) Hoe los ik dit probleem op? Quote Link naar reactie
anoniem Geplaatst: 23 december 2003 Auteur Delen Geplaatst: 23 december 2003 Wat je vraagt is nou ook weer niet direct het makkelijkste wat er is... Gelukkig had ik wat vrije tijd en dacht ik dat ik het wel kon. Het probleem dat je hebt is niet echt een probleem van de code, die werkt naar behoren, maar je aanpak is verkeerd. Persoonlijk zou ik het aanpakken met [i:7fff89769f]floating divs[/i:7fff89769f]. Dat werkt goed, maar je moet rekening houden met de volgende punten:[list:7fff89769f][*:7fff89769f]Het box-model van Internet Explorer klopt niet, behalve die van IE6 in Standards Compliance mode, wat vrijwel nooit voorkomt. Mocht je dus krijgen dat je boxen in IE smaller zijn dan in Mozilla dan komt dit door het gebruik van borders, padding of margins. Gebruik dan de [url=http://www.tantek.com/CSS/Examples/boxmodelhack.html]Box Model Hack[/url].[*:7fff89769f]Mozilla's invulling van float is zoals het hoort, evenals de implementatie van CSS2 voor zover dat al allemaal werkt. Dat van IE klopt uiteraard van geen kant, zowel floats als CSS2. Hierdoor kun je met een klein CSS-trucje het in Mozilla prima laten werken. Lees ook [url=http://www.cs.hmc.edu/~mbrubeck/clear-after/]How to completely enclose a floated element in CSS2[/url].[*:7fff89769f]Mozilla toont geen lege elementen. Daarom moet in [i:7fff89769f]content[/i:7fff89769f] van [i:7fff89769f]box01::after[/i:7fff89769f] een punt, welke ik vervolgens verberg door 'm 100% tranparant te maken. Dit zou eigenlijk moeten met het officiële [i:7fff89769f]opacity[/i:7fff89769f] maar dat werkte bij mij niet, dus heb ik er maar even [i:7fff89769f]-moz-opacity[/i:7fff89769f] van gemaakt wat de testversie van eerdergenoemde eigenschap is.[*:7fff89769f]Houd je code zoveel mogelijk geldig XHTML, dan is de werking van het CSS ook het meest voorspelbaar.[*:7fff89769f]Gebruik geen inline CSS maar stop het bij voorkeur in een extern bestand. Voor het gemak heb ik het nu even in de header gezet.[/list:u:7fff89769f]Goed, dat gezegd hebbende, de code:[code:1:7fff89769f]<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl"> <head> <style type="text/css"> #box01{ padding: 0; maring: 0; left: 100px; top: 0; width: 500px; background-color: #00f; } #box01::after{ content: "."; display: block; height: 0; clear: both; -moz-opacity: 0; } #box01a{ padding: 0; maring: 0; float: left; width: 250px; background-color: #ff0; } #box01b{ padding: 0; maring: 0; float: left; width: 250px; background-color: #f00; } </style> </head> <body> <div id="box01"> <div id="box01a"><p>Tekst</p></div> <div id="box01b"><p> Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst Tekst, Tekst, Tekst, Tekst </p></div> </div> </body> </html>[/code:1:7fff89769f]Groeten en succes met de code. - Bas Quote Link naar reactie
anoniem Geplaatst: 24 december 2003 Auteur Delen Geplaatst: 24 december 2003 *Anne vindt dat Bas het mooi heeft opgelost, maar hij had er wel even bij kunnen zeggen dat IE6 nu in quirks mode staat en dus hetzelfde box model gebruikt als IE5.x, dat komt in dit geval omdat er iets voor de doctype staat* Quote Link naar reactie
anoniem Geplaatst: 24 december 2003 Auteur Delen Geplaatst: 24 december 2003 Hm, jullie maken het er niet gemakkelijker op. Misschien een stomme vraag, maar IE heeft toch veruit het grootste marktaandeel qua gebruikers. Moet ik mij dan met de techniek niet daar op richten? Quote Link naar reactie
anoniem Geplaatst: 24 december 2003 Auteur Delen Geplaatst: 24 december 2003 [quote:92347dbf9a="termin8or"]*Anne vindt dat Bas het mooi heeft opgelost*[/quote:92347dbf9a]Thnx![quote:92347dbf9a="termin8or"]*hij had er wel even bij kunnen zeggen dat IE6 nu in quirks mode staat en dus hetzelfde box model gebruikt als IE5.x, dat komt in dit geval omdat er iets voor de doctype staat*[/quote:92347dbf9a]O ja, dat ook nog... :D[quote:92347dbf9a="Johant"]IE heeft toch veruit het grootste marktaandeel qua gebruikers.[/quote:92347dbf9a]Yup.[quote:92347dbf9a="Johant"]Moet ik mij dan met de techniek niet daar op richten?[/quote:92347dbf9a]Nope. Klassieke beginnersfout qua redenatie. Waarom zou je je immers op een beperkte groep richten ipv de complete groep. De oplossing die ik je net heb gegeven werkt in alle recente browsers. En ook al is IE nu overheersend, de vraag is hoe lang dat nog zal zijn. Het marktaandeel krimpt al, daarbij komt dat een volgende versie van IE pas in 2005 komt en compleet geïntegreerd zal zijn in het besturingssysteem Longhorn. Iedereen met XP of eerder vist achter het net. Dit zal een (kleine) verschuiving richting andere en modernere (betere?) browsers hebben, dus zorg dat niemand buiten de boot valt en je zit goed. - Bas Quote Link naar reactie
anoniem Geplaatst: 26 december 2003 Auteur Delen Geplaatst: 26 december 2003 Ok, ik ga ermee aan de slag. Thanx alvast. Quote Link naar reactie
anoniem Geplaatst: 3 januari 2004 Auteur Delen Geplaatst: 3 januari 2004 Je boxmodel werkt inderdaad prima, ik ga er verder mee aan de slag. Met 'maring' in de code bedoelde je waarschijnlijk 'margin' Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen