Problem mit CSS Homepage

InduZz · 22.04.12, 18:34

So der S*****

:

<div id="splash"><img src="Header.jpg" width="1000" height="180" alt="" /></div>
<html>
<head>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#Navigation {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation {
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
width: 100%;
w\idth: 8.8em;
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: black; background-color: #eee;
}
#Inhalt {
margin-left: 20em; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #Inhalt { m
background-color: #ffffe0;
}

#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}

h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}

#Navigation {

}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
</style>
</head>
<body>

<div id="Scrollbereich">
<div id="Inhalt">
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
</div>
</div>

<ul id="Navigation">
<li><h2>Allgemeines</h2></li>
<li><a href="start.html">Startseite</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>

<li><h2>Völker & Anderes</h2></li>
<li><a href="#Beispiel">Fraktionen</a></li>
<li><a href="#Beispiel">Seite 5</a></li>
<li><a href="#Beispiel">Seite 6</a></li>

<li><h2>Weltkarte</h2></li>
<li><a href="#Beispiel">Classic</a></li>
<li><a href="#Beispiel">T.B.C.</a></li>
<li><a href="#Beispiel">W.O.T.L.K.</a></li>
<li><a href="#Beispiel">Cataclysm</a></li>
</ul>

</body>
</html>
</ul>
</div>

</body>
</html>