Einfachste Variante:
ordne die Überschriften ebenfalls als Listenpunkt ein:

statt

<div class="navihead">Überschrift 1</div>

also

<li class="navihead">Überschrift 1</li>

usw...

Gruß derpfleger

Hallo besucherpete,

leider ist es überhaupt nicht zulässig, DIVs oder andere Elemente außer li in Listen zu setzen. Dein Quelcode ist daher nicht valide und es ist jedem Browser überlassen, was er daraus macht.

Ich würde dir für deine Liste folgende Struktur empfehlen:

<ul>
 <li><h1>Überschrift 1</h1><ul>
 <li>Punkt 1</li>
 <li>Punkt 2</li>
 <li>Punkt 3</li></ul></li>
 <li><h1>Überschrift 2</h1><ul>
 <li>Punkt 4</li>
 <li>Punkt 5</li>
 <li>Punkt 6</li></ul></li>
 <li><h1>Überschrift 3</h1><ul>
 <li>Punkt 7</li>
 <li>Punkt 8</li>
 <li>Punkt 9</li></ul></li>
</ul>

Ich glaube zumindest, dies kommt der inhaltlichen Gliederung am nächsten. Sollte h1 schon im Dokument vorkommen müsstest du natürlich untergeordnete Überschriften nutzen (h2, h3,...).
Eine Klasse für Überschriften zu nutzen würde ich vermeiden, denn dafür bietet HTML spezielle Elemente.

Einen schönen Tag wünscht

katy

Die in Antwort 1 genannte Variante funktioniert schon mal. Der Hinweis aus Antwort 2, Auszeichnungen für Überschriften zu nutzen, gefällt mir aber auch gut. Allerdings habe ich dann genau das Problem, was ich vermeiden wollte: Die Überschriften werden dann mit dem gleichen Randabstand angezeigt, wie die übrigen Listenpunkte auch. Genau das sollte aber nicht sein. Und nun? Vielleicht kann man da ja mit eingefügten Leerzeichen was "regeln", aber sauber ist das auch nicht ...

Hallo,

Versuche es mal so:



Gruss

Road-Runner

Hallo besucherpete,

wenn du meine Variante wählst ist das einfach zu lösen, da du dann für

ul li

und

ul li ul li

(also äußere und innere Listenpunkte)
unterschiedliche margins und paddings, falls du es brauchst sogar dass kein Listensymbol angezeigt wird, im Stylesheet festlegen kannst.

Gruß
katy

@Road-Runner : Das geht leider nicht, denn dadurch werden die Listen jeweils umrandet, also in voneinander getrennten Containern, angezeigt. Und das soll hier nicht so sein.

@kathy: Wenn ich später nochmal am Rechner bin probier ich das mal aus ... :o)

Hi besucherpete,

wenn du dein Dokument nicht komplett als Liste aufbaust, werden deine "Überschriften" in der Liste wohl kaum mit thematischen Überschriften innerhalb eines HTML-Dokumentes gleichzusetzen sein, oder?
Prinzipiell hat natürlich katy recht, dass man für echte Überschriften auch das <h1> Tag verwenden sollte (respektive <h2> h3> usw...).
Wenn es sich allerdings bei deiner Liste eher um eine Art Navigationsmenu mit entsprechender Unterteilung handeln sollte (und darauf weist ja auch schon die Wahl des Klassennamens), dann ist die Lösung die ich in Antwort 1 genannt habe durchaus brauchbar und am einfachsten ohne große Verschachtelung zu realisieren.
Wenn es sich um eine Navigation handelt, sollte das <h1> selbstverständlich bei der tatsächlichen Überschrift im Dokument stehen und nicht im Menu.

Also so:

<ul>
 <li class="navihead">Überschrift 1</li>
 <li>Punkt 1</li>
 <li>Punkt 2</li>
 <li>Punkt 3</li>
 <li class="navihead">Überschrift 2</li>
 <li>Punkt 4</li>
 <li>Punkt 5</li>
 <li>Punkt 6</li>
 <li class="navihead">Überschrift 3</li>
 <li>Punkt 7</li>
 <li>Punkt 8</li>
 <li>Punkt 9</li>
</ul>

Evtl. musst du noch mit margin und padding des

.navihead

spielen

Gruß derpfleger

Hallo derpfleger,

was ist der Unterschied zwischen einer Überschrift in der Navi und einer anderen? Was sind thematische Überschriften?

Leider bieten Listen noch keine Listenüberschriften, das wäre die optimale Variante. Aber bis das W3C sich zu dieser Erweiterung entschließt, das könnte noch dauern.

Aber ich mag mich nicht darüber streiten. Et in HTML pax!

Was du bei deiner Listenstruktur jetzt allerdings unberücksichtigt lässt, ist die offensichtliche Untergliederung in drei Abschnitte. Die kommt bei dir nur im CSS vor. Bei deaktiviertem CSS (es gibt Menschen die das bewusst abschalten oder durch eigenes ersetzen) geht so etwas verloren. Und das empfände ich als großen Nachteil.

Gruß
katy

Die offensichtliche Struktur wird dann deutlich, wenn es sich bei der Liste tatsächlich um ein Navigationsmenu handelt, denn dann werden die Listenüberschriften auch bei ausgeschaltetem CSS als reiner Text dargestellt, wohingegen die einzelnen Listenpunkte mit einer idR immer abweichenden Link-Darstellung gezeigt werden (vorausgesetzt, dass man die Überschriften nicht als link definiert).
Ein willkürlich gewähltes Beispiel wäre zB dieses hier. Du kannst dir ja mal den Quellcode anschauen: Die Listenüberschrift wird mit einer Klasse definiert, schalte das CSS aus, dann wirst du sehen, dass diese Listenüberschrift weiterhin noch zu erkennen ist (und das liegt nicht nur an dem <b> , das hierbei keine Rolle spielt). Im selben Beispiel kannst du ja auch sehen, was ich mit thematischer Überschrift meine. War vielleicht unglücklich ausgedrückt. Gemeint ist eben eine Überschrift im Contentbereich, die das behandelte Thema ausdrückt (im Beispiel wäre es <h2>Das Internet ist für ALLE da!<h2> usw...). Ich würde <h1>, <h2> usw nicht für eine "Überschrift" im Navigationsmenu verbrauchen.

Sollte die Liste keine Navigation sein, träfe dein Einwand evtl. zu, liesse sich dann aber durch so ein Zusatzkonstrukt wie im obigen Beispiel ( ein zusätzliches <b> ) zB verhindern.

Aber da diskutieren wir über Nonsens, solange wir nicht wissen, was der Frager tatsächlich mit seiner Liste anfangen will.

Schönen Abend noch
derpfleger

Hallo derpfleger,

das klingt für mich nicht besonders überzeugend. Natürlich habe ich ich auch in meiner Naviliste einzelne Listenpunkte, die keinen Link enthalten: der Eintrag zur aktuellen Seite darf natürlich kein Link sein.
<b> ist kein semantisches HTML, ich würde in meiner Ausbildung einige Minus-Punkte kassieren, wenn ich so etwas einsetzen würde.
Für mich gilt, dass die Navi natürlich Bestand der Seite ist, ich trenne nicht zwischen Content und Rest. Das sind beides Kapitel auf derselben Seite und unterliegen den gleichen Regeln. Dass die Navi weniger relevant ist kennzeichne ich durch Position (steht im Quellcode immer am Ende) und Grad der Überschriften (h3 und schlechter).

Gute Nacht
katy

(würde gern weiter diskutieren, muss aber morgen früh fit sein für den Unterricht)

Hallo zusammen!

Na, nun werdet wieder Freunde ... :o)

In der Tat soll es ein Navigationmenü werden. ich hab es auch soweit nun hinbekommen. Danke also für die vielen Tipps und Hinweise! :o)

Keine Angst, das war kein Streit. Ich stimme im übrigen katys Ausführungen in Antwort 10 voll zu was die Nutzung von <b> im von mir genannten Fall angeht: das ist natürlich dann kein sauberes HTML mehr und solte vermieden werden.
Die unterschiedlichen Ansichten beruhen eher auf der Frage, muss man immer absolut sauberen Code produzieren, oder darf man auch ein bißchen schludern? Ich persönlich bin der Ansicht, in privaten Webseiten darf ruhig ein bißchen bedarfsmässig geschludert werden, wer kommerziell arbeitet, muss natürlich sauberen Code produzieren. katy lernt das ja offensichtlich gerade beruflich (Webdesign), da muss man natürlich korrekt bleiben :-)

@ katy: deine Kommentare in der letzten Zeit hier im Supportnet sind eine Bereicherung und glänzen nicht nur durch Sachkenntnis, sondern auch durch eine erfreulich höfliche Sprache. Schön, dass du hier im Forum bist.
Einen Streit wollte ich keinesfalls mit dir beginnen.

Gruß derpfleger

Solange die Seite in allen Browsern annähernd gleich aussieht, kann ruhig mal etwas geschludert werden. Die meisten Besucher interessieren sich eh nicht für den Quelltext, sondern für den Inhalt der Seite.

Das Schludern darf aber nicht dazu führen, dass Seiten nur mit einem bestimmten Browser angezeigt werden können. Das wäre ein Rückfall in frühere Zeiten, als auf jeder 3. Seite zu lesen war Optimiert für (hier bitte Browser nach Wahl einsetzen) und eine Auflösung von x * y.

Gruss

Road-Runner

Yep, da hast du natürlich vollkommen recht.

Gruß derpfleger