[CSS]Divs positioneren en resizen - Softwareontwikkeling

vrijdag 13 mei 2005 15:36

Acties:

Moderator Devschuur®

Topicstarter

Ik ben bezig om een simpele site te maken met behulp van div's.

wat ik wil is een header, menu ( links ), content ( rechts ) en een footer.

Als ik alle elementen een vaste size geef dan lukt het me redelijk om deze te positioneren en te resizen. Ik wil echter dat mijn header over de hele breedte van de site is. Dit heb ik opgelost door width op 100% te zetten. Ik wil dat mijn content en mijn menu div over de hele hoogte van het scherm staan. Dit kan ik echter niet met percentage's oplossen omdat er een deel van het scherm gebruikt wordt voor de header en de footer. wat ik dus eigenlijk zou willen instellen voor de height is ( 100% - header.height - footer.height ).
Hetzelfde geldt voor de breedte van de content div. die moet de totale breedte van het scherm min de breedte van de menu div zijn.

Ik heb nou een html pagina die er als volgt uitziet

HTML:

<html>
<head>
    <title>Untitled Page</title>
    <link type="text/css" href="StyleSheet.css" rel="stylesheet"/>
</head>
<body>
    <div id="Page">
        <div id="Top">
            Top
        </div>
        <div id="Left">
            Left
        </div>
        <div id="Content">
            Content
        </div>
        <div id="Footer">
            Footer
        </div>
    </div>
</body>
</html>

en een css file die er als volgt uitziet

Cascading Stylesheet:

#Top
{
    width:100%;
    height:100px
}

#Left
{
    width:100px;
    height: ???
}

#Content
{
    width: ???;
    height: ???
}

#Footer
{
    width: 100%;
    height: 50px    
}

Ik ben aan het zoeken geweest maar kon hier niet echt een goed voorbeeld van vinden maar wist ook niet precies welke zoekwoorden ik moest gebruiken en kon daarom door de vele css bomen het bos niet meer zien. Ik hoop dat jullie mij ( een css noob ) een beetje de goede richting op kunnen sturen.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

vrijdag 13 mei 2005 15:44

Acties:

Rowanov

Kop eens wat anders...

Ik weet wat je bedoelt, maar ik kan me zo snel geen 123 oplossing herinneren. Misschien heb je hier wat aan: http://limpid.nl/lab/css/fixed/header-and-left-sidebar

Wat ik wel weet is dat die soort van berekening niet mogelijk is en dat het nu vaak wordt opgelost met behulp van faux-collumns: http://www.alistapart.com/articles/fauxcolumns/

vrijdag 13 mei 2005 16:06

Acties:

Geert.H

een andere manier is (misschien even wat minder netjes) is je header, je middenstuk, en je footer in een grootte div te gooien met height 100%
je zet dan je footer op bottom:0px, en je header op top:0px

vrijdag 13 mei 2005 16:18

Acties:

Verwijderd

of je geeft je menu een float:left en geeft je content een margin-left van 100px, en positioneert je footer absoluut. om de hele linker kolom een achtergrond te geven moet je dan idd faux columns gebruikten. Ik raad je btw aan om bij je css-declaraties ook je laatste declaratie per stijl een puntkomma te geven. zo voorkom je dat je het later vergeet wanneer je er een extra declaratie aan toevoegt.

code:

<html>
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        body {
            margin: 0;
            height: 100%;
        }
        #Top {
            width:100%;
            height:100px;
            background: #ccc;
        }

        #Left {
            float: left;
            width:100px;
            background: #eee;
        }

        #Content {
            margin-left: 100px;
        }

        #Footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="Page">
        <div id="Top">
            Top
        </div>
        <div id="Left">
            Left
        </div>
        <div id="Content">
            Content
        </div>
        <div id="Footer">
            Footer
        </div>
    </div>
</body>
</html>

vrijdag 5 augustus 2005 16:36

Acties: