<li>: Wie soll ich dieses Konzept bei einem horizontalen Menü anwenden?
Lerne HTML. Dann wird Dir bewusst, dass das Aussehen Deines Menüs nichts mit HTML zu tun hat. HTML dient nur zur logischen Auszeichnung Deines Inhalts. Wenn der Inhalt eine Liste ist, dann musst Du diesen als Liste auszeichnen. Ob horizontal oder vertikal ist Sache von Layout/Design, was wiederum Aufgabe von CSS ist und nicht von HTML.
Mit CSS kannst Du problemlos entweder über display:inline oder float:left; ein Menü horizontal darstellen.
Aber für das Entwickeln von Websites ist die Trennung von Inhalt und Layout ungeheuer wichtig. Die muss nicht nur im Code vollzogen werden, sondern auch in Deinem Kopf. Wenn Du begriffen hast, dass die Auszeichnung in HTML nicht abhängig von der Darstellung ist, hast Du gewonnen. Ansonsten scheint Dir einiges zum THema CSS-Design zu kompliziert oder unlogisch zu sein. Aber das liegt halt bei den meisten Leuten am mangelnden Verständnis von HTML.
Welche weitere Alternativen gibt es zu meiner "Div Suppe"? Sind Tabellen besser geeignet?
Aua. Auch hier lautet die Antwort: Lerne HTML. HTML dient zur logischen Auszeichnung Deines Inhalts. Jedes Tag steht für eine bestimmte Bedeutung. Tabellen dienen dazu, tabellarische Daten auszuzeichnen. <div> dient dazu, mehrere Elemente zu gruppieren. HTML ist nicht für Layout/Design da, also ist es bei jedem Tag falsch, damit Layout zu machen, egal ob Tabellen, <div> oder <p>. Layout macht man ausschließlich mit CSS.
HTML dient zur logischen Auszeichnung Deines Inhalts. Machst Du ein CSS-Layout, ist Dein erster Job, den Inhalt niederzuschreiben und diesen semantisch sinnvoll auszuzeichnen. D.h. Du zeichnest Überschriften aus, Textabsätze, wichtige Textpassagen, Listen usw. Für all diese Bedeutungen gibt es ein Tag, und umgekehrt gibt es für Deinen Inhalt immer ein sinnvolles Tag.
Während Du Deinen Inhalt so auszeichnest, muss Dir bewusst sein, dass es irrelevant ist, wie das ohne CSS im Browser dargestellt wird. Das hat für HTML keine Bedeutung. Erst, wenn die Semantik in HTML festgelegt ist, kommt Layout/Design mit CSS. Da kannst Du dann festlegen, wie die Elemente, denen Du eben eine Bedeutung gegeben hast, aussehen sollen.
Noch ein paar Beispiele:
<div id="Ueberschrift"> ist per Definition eine Gruppierung, keine Überschrift.
<h1> ist eine Überschrift (1. Ordnung). Das erste ist semantisch falsch.
<div id="Textabsatz"> ist auch kein Textabsatz, sondern ebenfalls eine Gruppierung.
<p>Text</p> ist ein Textabsatz.
Bei <div><ul><li>Punkt 1</li></ul></div> ist das <div> überflüssig, so als würdest Du Geschenke zweimal mit Papier einwickeln. <div> ist eine Gruppierung, wenn sie nur ein Element enthält, ist sie überflüssig.
Willst Du einen Text fett haben, sieht das richtig so aus: <p>Dieser Text ist <span style="font-weight:bold;">fett</span></p>. Wenn Du den Text aber fett machen willst, weil er wichtig ist, dann muss es so aussehen: <p>Dieser Text ist <em style="font-weight:bold;">fett, weil er wichtig ist</em>.</p> Wenn er sehr wichtig sein soll, wird <em> durch <strong> ersetzt. <em> zu wählen, weil es kursiv ist, ist falsch. Denn man wählt HTML-Tags immer nur wegen der Bedeutung, nicht wegen des Aussehens!
Das ist das Geheimnis von HTML, CSS-Layout und einer guten Website!
Schönes Wochenende,
-Efchen
