[css / div's] Alignen wil me maar niet lukken.

[_eXistenZ_]

Ik zit met het probleem dat ik een site in elkaar wil steken, waarvan ik de oplossing niet kan vinden qua layout. Dat het mogelijk is weet ik haast wel zeker, maar hoe precies kan ik niet uitvogelen.

Ik ben al een poosje aan het stoeien, online dingen doorlezen, maar geen van allen komen echt overeen met wat ik wil.

Het probleem is namelijk dat de onderste 2 divs niet aan de bodem van de pagina snappen maar aan de bodem van het venster. Als de pagina langer is dan het venster hoog is, en je dus een vertikale scrollbalk krijgt, komen die divs halverwege. Dit zou op te lossen zijn door position:absolute te veranderen in position:relative maar dan klopt er helemaal niks meer van.

Zo ziet het er uit:


Uitleg:
Blauw: Bovenste div, met achtergrondje
Grijs: Div voor de inhoud
Rood: Direct onder de div voor de inhoud staat een plaatje die er onder hoort.
Groen: Hier staat een div die uit kan stretchen naar rechts.

Bij veel info op de site moet dus het blauwe stuk opstretchen, er aan de rechterkant een scrollbar komen, en dan de onderste 2 divs helemaal onderaan de site komen, niet enkel onderaan het venster.


Dit is mijn CSS:

Cascading Stylesheet:

        /* global styles */

        html {
            margin: 0px;
            padding: 0px;
        }
        body {
            margin: 0px;
            padding: 0px;
            font: 10pt Arial;
            color: #000000;
            background-color: #cad6e2;
        }
        a:link,a:active,a:visited {
            color : #000000;
        }
        a:hover {
            color: #FFFFFF;
        }
        div {
            padding: 0px;
            margin: 0px;
        }

        /* specific divs */

        #container {
            min-height: 100%;
            width: 100%;
            background-color: #584738;
        }   
        #bovenkant {
            height: 250px;
            width: 100%;
            padding: 0px;
            margin: 0px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 0;
            background-image: url('background_boven.png');
        }
        #inhoud {
            min-height: 100%;
            width: 699px;
            padding: 0px 0px 150px 0px;
            margin: 0px;
            position: absolute;
            top: 30px;
            left: 20px;
            z-index: 1;
            background-color: #ffffff;
        }
        #onderkant_links {
            height: 150px;
            width: 800px;
            padding: 0px;
            margin: 0px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 1;
            background-image: url('background_onder_links.png');
        }
        #onderkant_rechts {
            height: 150px;
            width: 100%;
            padding: 0px;
            margin: 0px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 0;
            background-image: url('background_onder_rechts.png');
        }

[ Voor 17% gewijzigd door een moderator op 14-03-2007 10:33 ]

[BtM909]

Met kryptische tekens gaan wij er ook niet komen. Maak even goede printscreens en update je topicstart. Ik vraag me tevens af hoe je hebt gezocht met Google, aangezien er wel een aantal oplossingen rondzwerven op GoT en internet

[_eXistenZ_]

Behoorlijk goed, en ik ben ook niet echt een nieuweling met CSS, dit is best een tricky probleem nog
Screenie komt strax, moet dus eerst ff weg Tosso.

/edit

Done

[ Voor 5% gewijzigd door _eXistenZ_ op 13-03-2007 21:17 ]

[P.O. Box]

Waarom kies je voor divs? je zou toch eventueel ook een table met height 100% kunnen doen?

[BtM909]

Edwardvb schreef op woensdag 14 maart 2007 @ 09:13:
Waarom kies je voor divs? je zou toch eventueel ook een table met height 100% kunnen doen?

Meen je deze vraag serieus?

---

_eXistenZ_ schreef op dinsdag 13 maart 2007 @ 19:43:
Behoorlijk goed, en ik ben ook niet echt een nieuweling met CSS, dit is best een tricky probleem nog

Dat jij het inschat als tricky wil niet zeggen dat het het ook daadwerkelijk is

Footer probleem (door simpelweg te zoeken naar footer op GoT )

[ Voor 23% gewijzigd door BtM909 op 14-03-2007 09:47 ]

[P.O. Box]

BtM909 schreef op woensdag 14 maart 2007 @ 09:46:
[...]

Meen je deze vraag serieus?

---

ja, maar niet als oplossing, maar meer om er zelf iets van te leren... want ik had al zo'n vermoeden dat je daar een goede reden voor hebt

[ Voor 13% gewijzigd door P.O. Box op 14-03-2007 10:00 ]

[BtM909]

Edwardvb schreef op woensdag 14 maart 2007 @ 09:59:
[...]


ja, maar niet als oplossing, maar meer om er zelf iets van te leren... want ik had al zo'n vermoeden dat je daar een goede reden voor hebt

[google=semantisch html] levert een hoop relevante hits op. De eerste hit (http://home.parse.nl/~michiel/semantiek.html) komt van onze chem

[P.O. Box]

ok... interessante artikelen... dank !

[_eXistenZ_]

Ben inmiddels overgestapt op een tabel idd, met 100% height, werkt perfect

Problem solved