h1 und ul li in einer Zeile

[Monash]

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!

[Felix Riesterer]

Liebe(r) Monash,

Du brauchst sehr wahrscheinlich float und clear.

Liebe Grüße,

Felix Riesterer.

[Monash]

Hallo Felix,

danke, an float hatte ich bereits gedacht. Allerdings, wenn ich h1 und ul floate, passieren schlimme Dinge. Insbesondere sind sie dann nicht mehr innerhalb des umgebenden div.

Und so angeordnet, wie ich sie gerne hätte, sind sie dann trotzdem nicht :-(

Viele Grüße

Olaf.

[Felix Riesterer]

Lieber Monash,

wenn ich h1 und ul floate, passieren schlimme Dinge.

geht es noch ungenauer??

Insbesondere sind sie dann nicht mehr innerhalb des umgebenden div.

Dann muss dieses eben auch floaten. Oder Du fügst dem zuletzt gefloateten Element mittels :after ein visuelles Extra an, welches das Floaten beendet:

[code lang=css]#myid ul:last-of-type:after {
    clear: both;
    content: " ";
    display: block;
}/code]

Und so angeordnet, wie ich sie gerne hätte, sind sie dann trotzdem nicht :-(

Wie gut dass Du verheimlichst, wie Du sie gerne angeordnet hättest, man hätte Dir fast helfen können...

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber Felix Riesterer,

Wie gut dass Du verheimlichst, wie Du sie gerne angeordnet hättest, man hätte Dir fast helfen können...

das stimm so nicht - im OP steht mehr dazu.

Also, folgendes Experiment ohne float:

#navi h1 {  
    display: inline;  
}  
  
#navi ul,  
#navi li {  
    display: inline;  
}  
  
#navi ul:last-of-type:after {  
    content: " ";  
    display: block;  
}

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Monash:

nuqneH

Natürlich will in den HTML-Text nicht verändern, weil ich den genau so auch als Navigationsspalte einsetzen möchte.

Bist du sicher?

Qapla'

[Monash]

Bist du sicher?

Leider verstehe ich die Frage nicht so ganz. Ist meine Auszeichnung nicht in Ordnung? Ich habe Links unterschiedlicher Kategorien. Die Kategorien zeichne ich als h1, die Linksammlung als ul aus.

Warum soll ich das ändern? Und wie?

[Gunnar Bittersmann]

@@Monash:

nuqneH

Bist du sicher?

Leider verstehe ich die Frage nicht so ganz.

Dass sich hinter der Frage ein Link verbirgt, hast du aber verstanden?

Warum soll ich das ändern? Und wie?

Welche Frage lässt das verlinkte Posting diesbezüglich offen?

Qapla'