[CSS] <div> hoogte probleem bij het namaken van een table

[Schonhose]

Om mijn layout voor nieuwsberichten te verfraaien probeer ik een aantal plaatjes naast elkaar te zetten zodat ik een mooi geheel krijg. Dit lukt overigens heel makkelijk in een table maar ik slaag er niet in om het voor elkaar te krijgen met behulp van divs en CSS.

Wat is de bedoeling:
De layout dient er als volgt uit te zien:

code:

|---|---------|---|
|---|---------|---| 
|   | hoi,    |   |
|   | 1234    |   |
|   | 1234    |   |
|   | 1234    |   |
|   | 1234    |   |
|   | 1234    |   |
|---|---------|---|
|---|---------|---|

Zoals te zien is heb je een content div en rondom eigenlijk de ruimte voor de plaatjes van de border.

Om het geheel in divs een invulling te geven is er een algemene container gemaakt die alles bevat en zijn de diverse kolommen ook in containers gestopt.

Zo heb je dus een containerleft die drie divs onder elkaar bevatten. Hetzelfde geld voor de content en de rechterkolom. Deze zijn middels floats naast elkaar gezet.

Met CSS is als achtergrond het plaatje ingesteld en tot zover gaat alles goed.

Tijdens het testen treden er echter drie problemen op waar ik geen oplossing voor kon vinden op het net of op GoT. Deze problemen zijn:

• Wanneer de content div (middelste in de contentcontainer) groter wordt bewegen de linker en rechter kolom niet mee naar beneden.
• Ik zou graag de linker en de rechter kolom op een fixed width willen hebben maar de content kolom variabel. Nu moet ik de breedte van de container div - 2x de breedte van een kolom doen om de breedte van de content div te zetten.
• Mozilla rendert het goed, maar IE doet vreemd met de laatste div van de content. Het lijkt er op of deze te groot is.

Voorbeeld code kun je vinden op http://www.schonhose.nl/test/test.html en de CSS op http://www.schonhose.nl/test/layout.css

Aangezien ik vaker tegen dit probleem aan loop hoop ik dat dit op te lossen is. Anders ben ik weer genoodzaakt om tabellen te gaan gebruiken

[edit]
Na lang doorzoeken wat gevonden op deze site.

Toegepast op mijn voorbeeld (moest wat divs verschuiven en in rijen gaan denken levert het volgende op:

http://www.schonhose.nl/test/test2.html en de CSS op http://www.schonhose.nl/test/layout2.css

Begint er op te lijken maar het ziet er niet uit in IE en dat is ook niet te fixen volgens het artikel omdat IE het niet ondersteund

Voor Mozilla nu alleen nog variable width en de header en de rest aan elkaar zetten dus zonder witruimte. Spelen met margins geeft geen resultaat nog.

[ Voor 16% gewijzigd door Schonhose op 07-10-2004 10:38 ]

[SchizoDuckie]

[google=css 3 column layout]

[Schonhose]

Papa Eend schreef op 07 oktober 2004 @ 10:10:
[google=css 3 column layout]

Pappa Eend, dit levert me niets op... deze zoekactie geeft resultaten over een fullpage layout.
Misschien maar even de linkjes bekijken naar wat ik precies wil????

[update]
Na weer wat bedenken kom ik op het volgende:

http://www.schonhose.nl/test/test3.html
http://www.schonhose.nl/test/layout3.html

Ik maak nu gebruik van de borderproperties en heb alleen de header in stand gehouden. Daaronder zit nu slechts 1 div (content) met een border.

Probleem is nu alleen nog de witte regel tussen deze divs. Een geforceerde clear in de headercontainer (als laatste item) lost het niet op, evenals het gebruik van margin:0; (zie code)

Een manier om het op te lossen is door de header container een position:absolute mee te geven en met behulp van padding-top:25px de tekst in de content iets naar beneden te zetten. Dit omdat de header dan over de content box heen float.

http://www.schonhose.nl/test/test3a.html
http://www.schonhose.nl/test/layout3a.html

Maar zo moeilijk moet het toch niet zijn om die divjes aan elkaar te zetten?

* Schonhose is er wel overuit dat de gifjes in de left en de right content columns overbodig waren. Dit kan via de border en dat lost meteen het probleem van het niet overnemen van de volledige height van de content voor deze kolomen op.

[ Voor 111% gewijzigd door Schonhose op 07-10-2004 11:30 ]

[OzBoz]

Speel hier eens mee:

code:

display: table;

Voor je container-div

[SuperRembo]

Is dit niet precies wat je wil bereiken?

[Schonhose]

OzBoz schreef op 07 oktober 2004 @ 12:46:
Speel hier eens mee:

code:

display: table;

Voor je container-div

Deze property wordt door alle Gecko browsers ondersteund maar niet door IE.

Ik heb met die properties zitten spelen:
http://www.schonhose.nl/test/test2.html
http://www.schonhose.nl/test/layout2.css

en het werkte op zich goed in FF. Maar ook weer die #&*$ white space tussen de header en de rest...

SuperRembo schreef op 07 oktober 2004 @ 13:13:
Is dit niet precies wat je wil bereiken?

Ja zo ongeveer wel... denk dat ik deze maar eens ga aanpassen aan mijn wensen.

[ Voor 23% gewijzigd door Schonhose op 07-10-2004 13:33 ]

[Schonhose]

http://www.schonhose.nl/test/test4.html
http://www.schonhose.nl/test/layout4.css

Eindelijk een werkend voorbeeld... \o/

Echter toen ik probeerde om er ook images onder te zetten bleek dat dit helemaal niet werkte. Wel in Mozilla \o/ maar niet in IE

Ondanks de height property is de div te hoog in IE en worden de linker en rechter plaatje niet goed weergegeven:

http://www.schonhose.nl/test/test5.html
http://www.schonhose.nl/test/layout5.css

gestoord word ik er van...
Ik wil gewoon ook onder in afbeeldingen kunnen zetten...

[Schonhose]

Goed.... de laatste kick met de oplossing \o/

De uiteindelijke HTML file

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test layout</title>
    <link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div class="Container">
    <div class="BoxHeaderContainer">
        <div class="BoxHeader"><h2>Test Headline</h2></div>
    </div>
    <div class="BoxContentBody">
        <p>This is a short sample paragraph. and so on on on on on on on on on</p>
        <p>And another one.</p>
    </div>
    <div class="BoxFooterContainer">
        <div class="BoxFooter"><p>&nbsp;</p></div>
    </div>
</div>
</body>
</html>

En de daarbij behorende layout.css

Cascading Stylesheet:

/* Show only to IE PC \*/
* html div.BoxHeader h2 {height: 1%;} /* For IE 5 PC */

div.Container {
    margin: 0 auto; /* center for now */
    width: 17ems; /* ems so it will grow */
}

div.BoxHeaderContainer {
    background: url(layout/bgtable.jpg) repeat top left;
}

div.BoxHeader {
    background: url(layout/bgright.jpg) no-repeat top right;
}

div.BoxHeader h2 {
    background: url(layout/bgleft.jpg) no-repeat top left;
    margin: 0;
    padding-left: 10px;
    color: black; 
    font-weight: bold; 
    font-size: 1.2em; 
    line-height: 1em;
}

div.BoxContentBody {
    background: #E9E9E9;
    border-right-style: solid;
    border-left-style: solid;
    border-width: 1px;
    border-color: #656565;
    margin: 0;
    padding: 5px 30px 31px;
}

div.BoxFooterContainer {
    height: 5px;
    background: url(layout/bgbottom.jpg) repeat top left;
}

div.BoxFooter {
    height: 5px;
    background: url(layout/bgbottomleft.jpg) no-repeat bottom left;
}
/* IE HACK for positioning image at the left footer */
* html div.BoxFooter {
        margin-left: 2px;
}

div.BoxFooter p {
    height: 5px;
    background: url(layout/bgbottomright.jpg) no-repeat bottom right;
    font-size: 0px; 
    line-height: 0px;
}
/* IE HACK for positioning image at the right footer */
* html div.BoxFooter p {
        margin-right: 2px;
}

Getest onder IE 6.0 en FF 1.0..

Transparante gifs zijn niet te gebruiken omdat deze over de andere image heengelegd worden. Indien de pagina in een andere kleurstelling is moet je dit dus aanpassen aan het plaatje.

Niet echt mooi, dus waarschijnlijk ga ik daar nog mee bezig. Suggesties zijn welkom hoe het beter kan.

[ Voor 16% gewijzigd door Schonhose op 07-10-2004 17:04 ]