Struppi: Kopfbereich fixieren

Beitrag lesen

Investor_Page

Nun soll das was bisher zu sehen ist fix stehen bleiben. Nur der untere, noch weisse Teil, soll veränderlich sein.

Ich habe SSI (Server Sides Include) gelesen. Das ist aber mit einer Art Script auf dem Server verbunden?

Bevor du dir über sowas Gedanken machst, solltest du dir die Grundlagen mal anschauen.

1. Beim DOCTYPE kann man sich streiten, ich bevorzuge noch HTML strict.
2. Dein charset ist ungünstig, da es ein Betriebsystemabhängiges ist. Nimm
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
oder
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
(da musst dann aufpassen, dass dein Editor das auch unterstützt)
3. schön dass du CSS einsetzt, aber das tust du nur für ein paar rudimetäre Effekte, z.b. bei der Schrift setzt du noch das überflüssige font-Element ein und auch das b-Element gehört in den Mülleimer.
4. Überschriften sollten in einem Hx-Tag stehen, nicht in einem p
5. (Link)Listen in einem Listen Element.

Inklusive deines Wunsches den Bereich zu fixieren, könnte das ganze so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"  
       "http://www.w3.org/TR/REC-html40/strict.dtd">  
<html>  
  
<head>  
<meta http-equiv="Content-Language" content="de">  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>investor</title>  
<style type="text/css">  
body {  
   background-color:#fff;  
   margin:0;  
   padding:0;  
}  
  
#bereichName {  
 position:fixed;  
 text-align:center;  
 width:100%;  
 background-color:#fff;  
 color:#000;  
 font-family:Arial, sans-serif;  
  
}  
#bereichName h1{  
 padding:0;  
 margin:0;  
 font-size:small;  
  
}  
#bereichName ol{  
 width:100%;  
 margin-top:1em;  
 font-size:xx-small;  
}  
#bereichName li{  
 display:inline;  
}  
#bereichName li.inner:before{  
 content: '|';  
}  
#bereichName li a,  
#bereichName li a:visited {  
   color:#000;  
   text-decoration:none;  
}  
  
#bereichName li a:hover {  
   text-decoration:underline;  
}  
#bereichName li a:active {  
   text-decoration:underline;  
}  
</style>  
  
</head>  
  
<body>  
<div id="bereichName">  
<h1>Investor</h1>  
<ol>  
<li><a href="wir_sind.htm">Wir sind</a></li>  
<li class="inner"><a href="unsere_aufgabe.htm">Unsere Aufgabe</a></li>  
<li class="inner"><a href="das_projekt.htm">Das Projekt</a></li>  
<li class="inner"><a href="der_markt.htm">Der Markt</a></li>  
<li class="inner"><a href="ihre_chancen.htm">Ihre Chancen</a></li>  
<li class="inner"><a href="zahlen_fakten.htm">Zahlen & Fakten</a></li>  
<li class="inner"><a href="teilhaber_werden.htm">Teilhaber werden</a></li>  
</ol>  
</div>  
</body></html>  
  

Du musst dir noch für den Bereich einen Namen ausdenken (vermutlich sowas wie 'navi')
das mit den Listentrenner, funktioniert nicht im IE (in den anderen Browsern schon) und man könnte es auch ohne Klasse machen, wenn es nicht so sehr stört, wenn vor oder nach der Liste auch ein Pipe Zeichen steht.
Statt ol, kannst du auch ul verwenden ist Wurscht.

Struppi.