nicht angemeldet
Hallöle,
irgendwie krieg ich das nicht auf die Reihe.
So wie im unten folgenden Code (kann leider immer noch nicht uploaden) stelle ich es mir vor, nur daß eben die Items der zweiten Liste (Kapitelnavigation) nicht von rechts nach links, sondern von links nach rechts floaten sollen.
Wichtig ist mir, daß das ganze (so gut wie) unabhängig von der Fenster- oder Schrift-Größe funktioniert und schön "floatet". (Fenster schmäler als 10em sind mir wurscht)
cu,
Robert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Testseite</title>
<style type="text/css">
body { width: 98%; max-width: 80em; height: 98%;
margin: 0 auto; padding: 0.6%; border: none;
color: black; background-color: #feb; }
ul.Navigation { list-style-type: none;
margin: 0; padding: 0; }
ul.Navigation li { display: block;
list-style-type: none;
margin: 0.2em; padding: 0.1em; border:1px solid black;
float: right; /* hier wäre left ideal, aber dann klappt nix mehr */
width: 8.4em;
text-align:center; }
ul#Kapitelnavigation { margin-left: 90px; /* Pixel-Maß, da Hauptnavigation feste Pixel-Breite hat */ }
ul#Hauptnavigation { width:80px; /* hier kommen im Endeffekt Bilder rein, daher Pixel-Maße */
float:left; }
ul#Hauptnavigation li { float:left;
width:66px; /* Pixelmaß, da Inhalt ein Bild sein wird */
height:75px; }
div#Inhalt { margin-left: 90px; /* Pixel-Maß, da Hauptnavigation feste Pixel-Breite hat */
clear:right; /* siehe oben, im Zusammenhang mit float:right; */ }
</style>
</head><body>
<ul id="Hauptnavigation" class="Navigation"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul>
<ul id="Kapitelnavigation" class="Navigation"> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> <li>Item E</li> <li>Item F</li> <li>Item G</li> <li>Item H</li> <li>Item I</li> <li>Item J</li> <li>Item K</li> <li>Item L</li> <li>Item M</li> <li>Item N</li> <li>Item O</li> </ul>
<div id="Inhalt">
<h1>Eine Überschrift</h1>
<p> Es war einmal ein Mann, der hatte sieben Söhne. Eines Tages baten ihn seine sieben Söhne: "Ach lieber, Vater, erzähle doch Deinen sieben Söhnen eine Geschichte!". Da fing der Vater an: </p>
<p> Es war einmal ein Mann, der hatte sieben Söhne. Eines Tages baten ihn seine sieben Söhne: "Ach lieber, Vater, erzähle doch Deinen sieben Söhnen eine Geschichte!". Da fing der Vater an: </p>
</div>
</body></html>