[CSS]Fixed header and footer - Softwareontwikkeling

zondag 17 december 2006 00:47

Acties:

Topicstarter

Ik ben bezig met het design van een soort van een site. Voor dit design wil ik een fixed header en footer die een width van 100% hebben. Daar tussen in moet tekst komen te staan. Ik heb het idee dat dit redelijk simpel moet zijn maar ik kom er niet uit.

Ik heb op het moment de footer en header op position:fixed gezet, en de IE hack toegepast. Nu werkt dit allemaal wel, maar zodra ik een overflow krijg aan tekst, dan komen de problemen in IE.
In IE gaat de scrollbar achter de header en footer (case1), logisch aangezien die eerst een lagere z-index had. Dus toen had ik de z-index verhoogd, echter als ik nu omhoog scroll dan gaat de tekst over de header, en over de footer (case2)..

Weet iemand hoe ik dit moet oplossen? Ik heb ook het idee dat ik wellicht de verkeerde kant op denk met mijn fixed waarden, wellicht een andere manier? Ik zou het zelf alleen niet weten en kan ook niet vinden.

De volgende html code gebruik ik:

HTML:

<!-- Quirks mode on -->
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>FormGenerator</title>
        <link rel="StyleSheet" href="Main.css" type="text/css">
    </head>
    <body>
        
            <div id="barTop"></div> 

            <div id="barBottom"></div>

            <div id="content">
                <div id="tekst">
                    Tekst
            </div>
        </div>
    </body>
</html>

En CSS:

Cascading Stylesheet:

html {
    margin:0px;
}
body {
    height:100%;
    width:100%;
    margin:0px;
    
    font-family: "Verdana", arial, lucida sans unicode;
    font-size:12px;
    color:#444444;
    
}

div#tekst {
    margin-top:69px;
    margin-bottom:50px;
    margin-left:10px;
}

div#barTop {
    position:fixed;
    z-index:20;
    left:0px;
    top:0px;
    
    background-image: url("barTop.png");
    background-repeat:repeat-x;
    
    width:100%;
    height:65px;
    margin:0px;
    }
div#barBottom {
    position:fixed;
    z-index:20;
    left:0px;
    bottom:0px;
    
    background-image: url("barBottom.png");
    background-repeat:repeat-x;
    
    width:100%;
    height:48px;
    margin:0px;
    }


/*  INTERNET EXPLORER HACK
        Zorgt ervoor dat de top en de bottom bar fixed gepositioneerd worden
        Hiervoor is ook de quirks mode nodig
        het * voor de naam zorgt ervoor dat alleen IE het leest
*/
* html body
    {
    overflow:hidden;
    margin:0px;
    }
* html div#barTop {
    position:absolute;
}
* html div#barBottom {
    position:absolute;
}
* html div#content {
    position:absolute;
    z-index:30;
    width:100%;
    height:100%;
    overflow:auto;
    }

zondag 17 december 2006 00:54

Acties:

Geert.H

Topicstarter

ok ok...
ongelofelijk suf
http://limpid.nl/lab/css/fixed/header-and-footer
bah, tis verdorie ook nog het eerste resultaat van zoeken op google met "fixed header and footer". Ik had eerst op allemaal andere zoektermen gezocht, dus vandaar dat ik deze niet direct vond (waarom deze wel werkt en die van mij niet, dat moet ik nog even zien uit te vogelen). Hij lijkt verdraaid veel op die van mij.

edit:
Ah ik zie het al, het verschil zit hem in dat zij een padding van hoogte van de header en de footer aan de body mee geven. Vervolgens maken ze content niet absoluut, maar wel 100% hoog. Dit zorgt er dan voor dat de content precies tussen de paddings van de body blijft.

[ Voor 26% gewijzigd door Geert.H op 17-12-2006 01:07 ]

zondag 17 december 2006 01:52

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Mwah, er zijn meer voorbeelden en zou zelf iets zoeken wat niet IE in Quirks duwt