Hallo,
für eine horizontale Navigation will ich in eine Zeile die Kategorie als Überschrift und daneben die Links in einer Auflistung darstellen. Die nächste Kategorie mit dazugehörigen Links sollen in die nächste Zeile. Folgende Quelltext habe ich bereits:
<div id="navi">
<h1>Figuren</h1>
<ul>
<li><a href="barnius.php">Käptn Barnius</a></li>
<li><a href="kwazi.php">Kwazi</a></li>
<li><a href="peso.php">Peso</a></li>
</ul>
<h1>Fahrzeuge</h1>
<ul>
<li><a href="oktopod.php">Oktopod</a></li>
<li><a href="gupa.php">Guppy A</a></li>
<li><a href="gupb.php">Guppy B</a></li>
<li><a href="gupc.php">Guppy C</a></li>
<li><a href="gupd.php">Guppy D</a></li>
</ul>
</div>
#navi h1 {
color: #ffffff;
background-color: #024357;
font-size: 100%;
font-weight: bold;
display: inline;
padding: 2px;
}
#navi ul {
padding: 0;
display: inline;
}
#navi ul li {
display: inline;
list-style: none;
background-color: #f35a16;
padding: 2px;
}
Jetzt ist es leider so, dass durch display:inline von ul die nächste Überschrift gleich neben die Aufzählung gerät, und nicht in die nächste Zeile. Ändere ich zu display:block, dann sind Überschriften und Aufzählungen jeweils in separaten Zeilen.
Natürlich will in den HTML-Text nicht verändern, weil ich den genau so auch als Navigationsspalte einsetzen möchte.
Vielen Dank für Vorschläge!