uitleg fixed header pagina

Over de fixed header procedure valt erg weinig uit te leggen. Het enige wat de code doet is een fixed header maken (en voor de "liefhebber" ook nog een fixed footer). Het lijkt mij het makkelijkst fixed header om integraal de code van de pagina hieronder te plaatsen. Haal er uit wat je denkt nodig te hebben om een fixed header en/of een fixed footer op jouw pagina te plaatsen. In de stylesheet kan je bij de "div" #fixed-header-midden alle css-statements plaatsen die van toepassing zullen zijn op de inhoud van het "scrollable" midden van de pagina. Het plaatje wat op de pagina staat heeft niets te maken met de procedure. Dat dient er alleen maar voor om de pagina iets minder saai te maken... Let er even op dat je de meta's even aanpast. Ik denk niet dat je het nodig vindt om mijn naam als auteur op jouw pagina te hebben, en ik vermoed dat je de titel ook wel enigszins wil aanpassen...

alle code van de fixed header pagina


<!DOCTYPE html><html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>fixed header</title>
<meta name="keywords" content="fixed header" />
<meta name="description" content="fixed header." />
<meta name="author" content="Bobik" />
<meta name="language" content="nederlands" />
<meta name="robots" content="noimageclick" />
<style type="text/css">
        body {
                height:100%; 
                max-height:100%; 
                overflow:hidden}
        #fixed-header-midden{
                position:fixed; 
                top:13.2em;
                left:0;
                bottom:3em; 
                right:0; 
                overflow:auto; 
                padding:0 40% 0 1%}
        * html #fixed-header-midden{
                height:100%; 
                width:100%}
        #fixed-footer{
                position:absolute; 
                border-top:1px solid;
                bottom:0em; 
                width:100%; 
                height:3em; 
                overflow:hidden}
                * html #fixed-footer{height:3em}
                img{float:right;margin:2em}     
</style>
<!--[if lt IE 9]>
        <style type="text/css">
                body{margin-top:0}
        </style>
<![endif]-->
</head>
<body style="font-family:sans-serif">
<div id="fixed-header-midden">
<h4>uitleg fixed header pagina</h4>
<p>
Over de fixed header procedure valt erg weinig uit te leggen. Het enige wat de code doet 
is een fixed header maken (en voor de "liefhebber" ook nog een fixed footer). Het lijkt mij het 
makkelijkst om integraal de code van de pagina hieronder te plaatsen. Haal er uit wat je denkt 
<img  src="text-effects/fixed-header.jpg" alt="fixed header" width="200" height="208">
nodig te hebben om een fixed header en/of een fixed footer op jouw pagina te plaatsen. 
In de stylesheet kan je bij de "div" <em>#fixed-header-midden</em> alle css-statements 
plaatsen die van toepassing zullen zijn op de inhoud van het "scrollable" midden van de pagina. 
Het plaatje wat op de pagina staat heeft niets te maken met de procedure. Dat dient er alleen 
maar voor om de pagina iets minder saai te maken...
</p>
<h4>alle code van de fixed header pagina</h4>

</div>
<h1>KOMPOOS.NL</h1>
<h2>fixed header - CSS</h2>
<h3><a href="/">home</a></h3>
<p><strong><em><a href="/site-map.html">sitemap</a></em></strong></p>
<hr />
<div id="fixed-footer">

<h5>Gebruik voor alle voorbeelden op de 
http://kompoos.nl een <a href="/manuals/html5/html5.html">valide html5 pagina</a>.</h5>
</div>
</body></html>

KOMPOOS.NL

fixed header - CSS

home » css » fixed-header.html

sitemap