[CSS] Ai, tekst door de layout heen

[Verwijderd]

Ik ben bezig met een site voor een basisschool. De (x)html-code is in principe erg simpel:

code:

...
<div id="header">
</div>
<div id="container">
    <div id="menu_links">
        <div id="kolom_links"><!-- LINKERMENU --></div>
        <div id="kolom_rechts"><!-- RECHTERMENU --></div>
        <div id="inhoud"><!-- INHOUD --></div>
    </div>
</div>
<div id="footer">
</div>
...

Er is een linkermenu, daarnaast moet de inhoud komen en daarnaast een rechtermenu (3 kolommen). Dit is omgeven door een header en een footer. Bij deze pagina gebruik ik deze csscode:

code:

...
#header, #footer {
height: 20px;
background-color: #FFCE00;
}

#container {
margin: 0px 20px;
background-color: #FFF;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
height: 100%;
}

#kolom_links {
width: 100px;
padding: 5px;
height: 100%;
position: absolute;
left: 20px;
}

#kolom_rechts {
width: 100px;
padding: 5px;
height: 100%;
position: absolute;
right: 20px;
}

#inhoud {
margin: 10px 110px 0px 110px;
}
...

De div#container moet zo groot zijn dat alle 3 de kolommen erin passen, helaas past het zich alleen maar aan aan de div#inhoud. Het heeft iets te maken met dat div#kolom_links en div#kolom_rechts een absolute positie hebben. div#inhoud daarintegen zit gewoon in de flow van de pagina.

Hoe krijg ik de div#container zo groot dat alle kolommen erin passen? De layout is te zien op: www.kabas.nl.

[Verwijderd]

- edit -

/me houdt even z'n mond

-edit2-

Zo, nu wel de juiste oplossing gevonden

http://cross-browser.com/x/examples/layout3.html

werkt mbv javascript maar dat mag de pret niet drukken

[ Voor 213% gewijzigd door Verwijderd op 16-07-2005 02:41 ]

[NMe]

Ik ben niet zo goed met HTML en CSS, maar komt het niet omdat beide menu's absoluut gepositioneerd zijn? Kun je die niet relatief positioneren?

Er zullen best betere alternatieven zijn, maar like I said: ik ben geen clientside genie.

[curry684]

Niet position:absolute gebruiken, daarmee kieper je het hele ding logischerwijs uit de reguliere flow. Gebruik float:left en float:right, en vervolgens een clear:both om het uit te laten vullen. Zie de link uit m'n sig voor de 2-koloms versie van het verhaal (is hetzelfde als de 3-kolom versie maar dan een float minder).

[edit]

Bliep, waarom ben je nu een ranzige tablebased layout in XHTML aan het gebruiken

Afgezien van het feit dat tables in HTML4+ of XHTML enkel voor tabulaire data gebruikt mogen worden (layout is de taak van CSS) heb je overigens ook nog 8 validation errors merendeels door deprecated properties te gebruiken.

Mag ik vragen waarom je in godesnaam XHTML gebruikt en niet gewoon HTML 4.01?

[edit2]

Ah, Mambo Zou dan alsnog even al die ranzige verwijzingen naar Mambo uit je metameuk halen.

[ Voor 51% gewijzigd door curry684 op 16-07-2005 02:55 ]

[Verwijderd]

Ik weet dat er nog fouten in zitten. Allereerst wil ik de basis-template goed hebben. Daarna kijk ik naar wat Mambo ervan maakt.

Ik heb bij een andere site al enkele aanpassingen gedaan (in de phpcode van mambo) om geldige xhtml-code (= zonder tabellen) te laten genereren, maar ik ben een beetje huiverig om het ook bij deze site te doen, omdat waarschijnlijk Mambo 5.0 eind dit jaar wordt gelanceerd: zie dit artikel... Als ik in de php-code van mambo ga prutsen zal het minder triviaal zijn om nieuwe updates van mambo te installeren, omdat daar mijn aanpassingen niet in zitten. Het komt er dus op neer dat ik het nog niet precies weet.

Ik zal nog eens kijken wat ik kan bereiken met de aanwijzingen: position:left en clear:both.

[Verwijderd]

oftopic: wow, daar heb ik nog op school gezeten

Ik kijk er nog even naar...

[ Voor 20% gewijzigd door Verwijderd op 16-07-2005 09:35 ]