anoniem Geplaatst: 29 juni 2004 Delen Geplaatst: 29 juni 2004 Ik probeer in een lay-out zonder tabellen 2 even brede kolommen in een omvattend blok (met rand) te krijgen. Dit omvattend blok lukt me helaas niet.[code:1:349c5621a9]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="nl" lang="nl" xmlns="http://www.w3.org/1999/xhtml" <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> #content { border: 5px solid Black; padding: 2em; background-color: Yellow; } #links { float: left; width: 50%; background-color: Blue; } #rechts { float: right; width: 50%; background-color: Red; } </style> </head> <body> <div id="content"> <div id="links"> <ol> <li>een</li> <li>twee</li> <li>drie</li> <li>vier</li> <li>vijf</li> <li>veel ...</li> </ol> </div> <div id="rechts"> <p>testje<br />testje</p> <p>testje<br />testje</p> <p>testje<br />testje</p> <p>testje<br />testje</p> </div> </div> </body> </html>[/code:1:349c5621a9]Dus het gele vlak wil ik graag laten doorlopen tot net onder de linker (blauwe) en rechter (rode) kolom. Wie geeft me een zetje in de goede richting? :roll: -- -Jos Quote Link naar reactie
anoniem Geplaatst: 29 juni 2004 Auteur Delen Geplaatst: 29 juni 2004 Ik heb #content een height: 100% meegegeven en dat werkt het. En als je na de div rechts een clear: both; plaats wertk het ook.[code:1:068fdc4213] <p>testje<br />testje</p> </div> <div style="clear:both";></div> </div> </body>[/code:1:068fdc4213] Quote Link naar reactie
anoniem Geplaatst: 29 juni 2004 Auteur Delen Geplaatst: 29 juni 2004 Harry bedankt ![quote:1433ccbd45="boesh"]#content een height: 100%[/quote:1433ccbd45]werkt alleen in IE, niet in Mozilla en Opera... [quote:1433ccbd45="boesh"] div #rechts een clear: both; plaats werkt het[code:1:1433ccbd45] <p>testje<br />testje</p> </div> <div style="clear:both";></div> </div> </body>[/code:1:1433ccbd45][/quote:1433ccbd45]werkt in alle drie... :D -Jos Quote Link naar reactie
anoniem Geplaatst: 29 juni 2004 Auteur Delen Geplaatst: 29 juni 2004 Een andere manier: http://www.stijlstek.nl/archief/2004/05/17/houd-floats-in-bedwang Quote Link naar reactie
anoniem Geplaatst: 30 juni 2004 Auteur Delen Geplaatst: 30 juni 2004 [quote:39895ecaf9=":ben:"]Een andere manier: http://www.stijlstek.nl/archief/2004/05/17/houd-floats-in-bedwang[/quote:39895ecaf9] Bedenkelijk, want die werkt alleen als je er een hack in zet. En of je hacks wilt gebruiken is een eigen keuze. Quote Link naar reactie
anoniem Geplaatst: 30 juni 2004 Auteur Delen Geplaatst: 30 juni 2004 :P [quote:b0a9860363=":ben:"]Een andere manier: http://www.stijlstek.nl/archief/2004/05/17/houd-floats-in-bedwang[/quote:b0a9860363]Bedankt Ben. Vooral de uitleg op de gekoppelde pagina's heeft e.e.a. verhelderd. Het gaat bij mij slechts om één pagina en ik hou het dus bij een eenvoudige <div style="clear:both";></div> ...[quote:b0a9860363="boesh"]Bedenkelijk, want die werkt alleen als je er een hack in zet. En of je hacks wilt gebruiken is een eigen keuze.[/quote:b0a9860363]Is die <div style="clear:both";></div> ook niet een soort hack? Toch min of meer een onvolkomenheid in CSS? :roll: Quote Link naar reactie
anoniem Geplaatst: 30 juni 2004 Auteur Delen Geplaatst: 30 juni 2004 Niet in CSS, in browsers. Quote Link naar reactie
anoniem Geplaatst: 30 juni 2004 Auteur Delen Geplaatst: 30 juni 2004 :roll: [quote:1e056ff72e="Anne"]Niet in CSS, in browsers.[/quote:1e056ff72e]Je hebt vast gelijk Anne. Omdat er -voor zover ik weet- geen enkele is die het goed weergeeft ging ik er vanuit dat het aan CSS lag... :-? -- -Jos Quote Link naar reactie
anoniem Geplaatst: 30 juni 2004 Auteur Delen Geplaatst: 30 juni 2004 Het gebruiken van een semantisch zinloze div in de (x)html vind ik een ergere hack dan de pure css oplossing waar ik naar verwees. Ik denk dat Anne dat wel met me eens is. Bovendien is een hack-loze css oplossing mogelijk, als we dat gedrocht van een IE zouden kunnen uitsluiten. Maar om dat verrotte stuk software (dat om een of andere vage reden ook nog eens door de meerderheid van de internetbevolking wordt gebruikt) toch nog een beetje te laten doen wat wij willen, zullen we daar meestal hacks voor moeten gebruiken. Quote Link naar reactie
anoniem Geplaatst: 1 juli 2004 Auteur Delen Geplaatst: 1 juli 2004 Ik zou het eigenlijk ook niet met floats oplossen. Ik heb altijd al een beetje een afkeer van floats gehad voor dit soort toepassing. Waarom weet ik eigenlijk ook niet precies. Je zou ook gewoon het linkervlak position:absolute mee kunnen geven en het rechtervlak een margin-left die zo groot is als de breedte van het linkervlak. Enige nadeel van deze techniek is dat je ervan uitgaat dat de hoogte van het rechtervlak groter is dan die van het linkervlak. Een andere mogelijkheid zou zijn (en misschien wel het beste) om display:table-cell te gebruiken, maar dat is helaas niet erg bruikbaar, omdat IE het niet ondersteunt. Quote Link naar reactie
anoniem Geplaatst: 1 juli 2004 Auteur Delen Geplaatst: 1 juli 2004 [quote:d3add0fa35="jossan"]Omdat er -voor zover ik weet- geen enkele is die het goed weergeeft ging ik er vanuit dat het aan CSS lag... :-?[/quote:d3add0fa35][url=http://damowmow.com/playground/demos/clear-after/]Dit is toch het effect dat je wilde?[/url] En inderdaad, de 'display' property zou ook prima gebruikt kunnen worden als het niet aan IE lag. Quote Link naar reactie
anoniem Geplaatst: 1 juli 2004 Auteur Delen Geplaatst: 1 juli 2004 @ Anne Ik begrijp na herlezen :oops: van [url]http://www.positioniseverything.net/easyclearing.html[/url] pas dat[code:1:d35d2146c5].clearfix:after { display: block; /* maakt er een "block"-element van mocht het om een "inline"-element gaan */ clear: both; }[/code:1:d35d2146c5]zou moeten werken, de rest is om het ook in de [i:d35d2146c5]mindere[/i:d35d2146c5] browsers redelijk uit te laten zien... @ :ben: en Anne Ik ben overtuigd en heb het aangepast... :wink: -- Bedankt voor uitleg en geduld ! -Jos Quote Link naar reactie
anoniem Geplaatst: 2 juli 2004 Auteur Delen Geplaatst: 2 juli 2004 Kijk, je vat 'm! Mooi! Het werken volgens de webstandaarden vergt gewoon een compleet andere benadering dan de tag-soup van de vorige eeuw. Dat kan best even tijd kosten voordat iemand dat aangeleerd heeft. Maar zolang je leergierig bent, zullen we je willen helpen. :wink: Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen