nicht angemeldet
Hallo,
da das Thema interessant ist, haben wir da jetzt mal mit etwas fortgeschritteneren Lehrgangsteilnehmern daran gebastelt. Das Folgende ist dabei rausgekommen. Eventuell kannst Du ja Dein Layout nochmal überdenken. Der Code ist erst mal nur in MSIE 6.0, FireFox 1.5.0.3 und Opera 8.5 unter Windows 2000 getestet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"html-dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="la" >
<head>
<title>Layout fixer Header fixe Navigation gegliederte Nummerierung</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css" media="screen">
* {margin:0; padding:0; font-family:sans-serif; font-size:101%;}
#header {height:100px; width:100%; position:fixed; top:0; left:0; background-color:#AFAFAF;}
#header h1 {margin:10px; background-color:#00F; color:#FFF; font-size:2em; border:1px solid #00AFFF;}
#navigation {width:200px; position:fixed; top:100px; left:0; background-color:#AFAFAF;}
#navigation ul {padding-left:2em;}
#navigation li {padding:1em;}
#content {padding-left:210px; padding-top:100px;}
.numeration {margin:0; padding:0; margin-left:55px;}
.numeration * {margin:0; padding:0; text-align:left;}
.numeration span.number {float:left; margin-left:-55px;}
.numeration span.marker {float:left; margin-left:-20px;}
.numeration h2 {margin-top:1em; font-size:1.5em;}
.numeration h3 {margin-top:.5em; font-size:1.2em;}
.numeration .text_following_number {margin-top:.8em;}
.numeration .text_following_marker {margin-top:.5em; font-size:.8em; line-height:115%;}
/*Ankerproblem bei position:fixed beheben [link:http://molily.de/css-position-fixed#css3]*/
.numeration h2 a {display:block; width:0; height:0; position:relative; top:-100px; visibility:hidden}
</style>
<!--[if IE]>
<style>
/*gegen 3px- und italic-Bug:*/
.numeration span.content {display:block; height:1em; overflow:visible;}
/*fixierter Header [link:http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm]*/
html, body {height:100%; overflow:hidden;}
#header {height:15%;}
#content {height:85%; overflow:auto; padding-top:0;}
/*fixierte Navigation*/
#navigation {position:absolute; top:15%; left:0;}
/*Anker verstecken*/
.numeration h2 a {display:none;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<h1>Hauptueberschrift</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#punkt1">Punkt 1</a></li>
<li><a href="#punkt2">Punkt 2</a></li>
<li>Punkt 3</li>
<li>Punkt 4</li>
</ul>
</div>
<div id="content">
<div class="numeration">
<h2><span class="number">1</span><span class="content"><a name="punkt1" id="punkt1"> </a>Ueberschrift Level 1</span></h2>
<h3><span class="number">1.1</span><span class="content">Ueberschrift Level 2</span></h3>
<p class="text_following_number"><span class="number">1.1.1</span><span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
<p class="text_following_marker"><span class="marker">-></span><span class="content"><em>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</em> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<p class="text_following_number"><span class="number">1.1.2</span><span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span></p>
<p class="text_following_marker"><span class="marker">-></span><span class="content"><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
<h3><span class="number">1.2</span><span class="content">Ueberschrift Level 2</span></h3>
<p class="text_following_number"><span class="number">1.1.1</span><span class="content"><em>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
<p class="text_following_marker"><span class="marker">-></span><span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</em> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<h2><span class="number">2</span><span class="content"><a name="punkt2" id="punkt2"> </a>Ueberschrift Level 1</span></h2>
<h3><span class="number">2.1</span><span class="content">Ueberschrift Level 2</span></h3>
<p class="text_following_number"><span class="number">2.1.1</span><span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span></p>
</div>
</div>
</body>
</html>
Eventuell solltest Du aber auch noch lesen:
http://jendryschik.de/wsdev/css/fixed/
http://molily.de/css-position-fixed
viele Grüße
Axel
Gernot Back