Einzelnen Beitrag anzeigen
Ungelesen 22.04.12, 18:34   #8
InduZz
Anfänger
 
Registriert seit: Feb 2012
Beiträge: 7
Bedankt: 0
InduZz ist noch neu hier! | 0 Respekt Punkte
Standard

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&auml;chst absolut positioniert
und wird anschlie&szlig;end &uuml;ber eine Browserweiche nur f&uuml;r moderne Browser fixiert.
Hierdurch kommt es in &auml;lteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>F&uuml;r dieses Beispiel ist das &quot;mehrspaltige Layout mit Kopf-
und Fu&szlig;zeile&quot; der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgr&ouml;&szlig;e an und sogar
das SELFHTML-Logo 'w&auml;chst' durch die H&ouml;henangabe in <strong>em</strong>
mit einer Schriftvergr&ouml;&szlig;erung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzug&auml;nglich wird,
wenn die H&ouml;he des Browserfensters sehr stark verringert
und/oder die Schriftgr&ouml;&szlig;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&ouml;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>
InduZz ist offline   Mit Zitat antworten