[CSS] 100% width container en fixed width contentdiv

vrijdag 4 maart 2011 11:19

Acties:

0 Henk 'm!

Topicstarter

Hallo medetweakers!

Ik zit even met een CSS/HTML probleem.

Een pagina waarmee ik bezig ben moet een header en footer hebben. Nu moeten beide altijd zichtbaar zijn, ongeacht de hoogte van de content die er tussen word geplaatst.
Een handig voorbeeld hiervan staat hier: http://www.xs4all.nl/~peterned/examples/csslayout1.html
De css heb ik dan ook als basis gebruikt.
Maar ik wil dat zowel de header en als de footer een 100% width hebben, terwijl content een fixed width van bijv. 1000px heeft en centraal gepositioneerd staat.

Zoals:
Afbeeldingslocatie: http://s1.postimage.org/5xuv2il3i/voorbeeld.jpg

Afbeeldingslocatie: http://s1.postimage.org/5xuv2il3i/voorbeeld.jpg

Nu het probleem: Als ik mijn viewport/browser smaller maak dan 1000px ontstaat er een horizontale scrolbalk.
Logisch natuurlijk, maar ik kan verder scrollen dan de content op de pagina waardoor alles (inclusief de 100%width header en footer) worden afgekapt. Ik zie dus de witte achtergrondkleur van de body.

Check:
Afbeeldingslocatie: http://s1.postimage.org/5xvn6nhhq/probleem.png

Afbeeldingslocatie: http://s1.postimage.org/5xvn6nhhq/probleem.png

Dit wil ik dus niet

De header en footer moeten altijd doorlopen, ongeacht de breedte van de viewport.

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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
    <title>Shift Horizon - Motion Design</title>
    <link rel="stylesheet" type="text/css" href="<?=site_url( '/public/css/main.css' )?>"/>
</head>
<body>
    <div id="container">

        <div id="header">
            <h1>CSS layout: 100% height with header and footer</h1> 
            <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
        </div>
    
        <div id="content">
            <h1>What is Lorum Ipsum</h1>
            </p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>  
        
        <div id="footer">
            <p>
                This footer is absolutely positioned to bottom:0; of  #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
            </p>
        </div>
    </div>
</body>
</html>

CSS:

Cascading Stylesheet:

html,body {
    margin:0;
    padding:0;
    height:100%; 
    background: #FFFFFF;
    font-family:Arial,Helvetica,sans-serif;font-size:10px;
}

#container {
    position:relative;
    margin:0 auto;
    width: 100%;
    background:#f0f0f0;
    
    height:auto ;
    height:100%; 

    min-height:100%; 
}

#header {
    padding: 1px;
    background: #000000;
}

#content {
    padding:1em 1em 5em; /* bottom padding for footer */
    width: 1000px;
}

#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
}

Code kan ook een taal bevatten, zoals bijv. [code=html][/]

[ Voor 18% gewijzigd door BtM909 op 04-03-2011 12:05 ]

-[ Het Kwartjuh Valt... ]-

vrijdag 4 maart 2011 11:35

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Je HTML klopt van geen kant. Je sluit je #container direct nadat je hem opent, Er staan een hoop loze </div> tags zonder opener.. Post eerst eens je feitelijke structuur.

Anyone who gets in between me and my morning coffee should be insecure.

vrijdag 4 maart 2011 11:39

Acties:

0 Henk 'm!

Kwartjuh

Topicstarter

Ah, ja ik moest even wat PHP code weghalen en daardoor is dat foutje er ingeslopen.
Is dus niet de reden van het probleem.

Heb het verbeterd.

[ Voor 26% gewijzigd door Kwartjuh op 04-03-2011 18:28 ]

-[ Het Kwartjuh Valt... ]-

vrijdag 4 maart 2011 11:44

Acties:

0 Henk 'm!

-LA-

je content div: margin: 0 auto;

als je wilt dat de header en footer doorlopen bij kleinere vensters dan 1000px breed moet je je container een min-width van 1000px meegeven. Je krijgt uiteraard wel scrollbars....

[ Voor 74% gewijzigd door -LA- op 04-03-2011 11:54 ]

MTB Trail Traffic

vrijdag 4 maart 2011 12:03

Acties:

0 Henk 'm!

Kwartjuh

Topicstarter

Bedankt -LA-! opgelost

[ Voor 12% gewijzigd door Kwartjuh op 04-03-2011 12:04 ]

-[ Het Kwartjuh Valt... ]-

Onderwerpen