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
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...
<!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="http://kompoos.nl">home</a></h3>
<p><strong><em><a href="http://kompoos.nl/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="http://kompoos.nl/manuals/html5/html5.html">valide html5 pagina</a>.</h5>
</div>
</body></html>