Abstände innerhalb einer Liste erzwingen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
all
code
container
definieren
einzelnen elemente
element
ersten abstand
kategorie
klasse
liste
nachschlagen
paar
probe
struktur
tag
tiefer gehen
unterseite
url
zeile
-
Htag/all">allo!
Es ist mal wieder soweit: Ich brauch externe Denkhilfe.
Es geht um Folgendes: Auf einer Webseite habe ich ein vertikales Fly-Out Menü, das mit <ul> und <li> in HTML und auch entprechenden Klassen in der CSS definiert ist. Normalerweise haben im Menü ja alle Listenpunkte denselben Abstand. Jetzt möchte ich aber bei zwei Listenpunkten einen Abstand von oben erzwingen.
Meine Liste sieht - vereinfacht dargestellt - ungefähr so aus:
<div id="menu"> <ul class="ebene1"> <li>Kategorie 1 <ul> <li>Unterseite 1</li> <li>Unterseite 2</li> </ul> </li> <li>Seite 2</li> <li>Seite 3</li> <li>Kategorie 2 <ul> <li>Unterseite 3</li> <li>Unterseite 4</li> </ul> </li> </ul> </div>
So und da möchte ich den ersten Abstand zwischen Kategorie 1 und Seite 2 haben und den zweiten Abstand zwischen Seite 3 und Kategorie 2.
Bisher habe ich das im Quelltext so gelöst:
<div class="abstand"> <li>Kategorie 2 <ul> <li>Unterseite 3</li> <li>Unterseite 4</li> </ul> </li> </div>
In der CSS habe ich das hinzugefügt:
.abstand { margin-top: 20px; }
Es funktioniert zwar, ist laut dem Validator aber nicht valide (ich verwende XHTML 1.0 Strict), weil <li> nicht innerhalb von <div> sein darf oder <div> vor den <ul> Tag muss - was ja nicht geht, weil dann die Unterseiten 3+4 im Menü von der Klasse betroffen sind und nicht die Kategorie 2 (die ja als einzige angezeigt wird, da die Unterseiten beim Hover erst eingeblendet werden).
<li class="abstand"> habe ich versucht, kann ich aber nicht machen, weil im Stylesheet für das Menü bereits etwas für das <li> definiert ist und die von mir definierte Klasse deshalb ignoriert wird.
Bite um Vorschläge was ich tun kann. Vielen Dank!
Gruß,
webdesignerin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
webdesignerin schrieb:
<li class="abstand"> habe ich versucht, kann ich aber nicht machen, weil im Stylesheet für das Menü bereits etwas für das <li> definiert ist und die von mir definierte Klasse deshalb ignoriert wird.
Genau so funktioniert es aber.
Poste mal eine Beispielseite, aus der diese Menüstruktur und alle nötigen CSS-Zeilen ersichtlich werden.
Du kannst doch auch zwei Klassen für ein Element definieren: <li class="menu-item abstand"> -
Hallo!
Ich habe mein Menü nocheinmal zur Probe nachgebaut, bin es Zeile für Zeile durchgegangen und habe festgestellt, dass ich anstatt ...
.abstand { margin-top: 20px; }
#menu li.abstand { margin-top: 20px; }
... in der CSS und noch ein paar <div class="abstand"> im Quelltext hatte, die ich zu <li class="abstand"> umgeformt habe. Ich muss das beim Werkeln vergessen haben auszutauschen bzw. mit all den Schnipseln total durcheinander gekommen sein. Sorry!
Es funktioniert jetzt also doch mit dem ursprünglichen Code von mir, aber dass man zwei Klassen für ein Element definieren kann, war mir bisher neu. Hast Du da ein paar Links zum Nachschlagen?
Gruß,
webdesignerin
-
Links direkt hab ich keine, außer diesen Artikel, der sich aber direkt auf Wordpress bezieht:
http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/
Der Punkt, wo er weiter unten auflistet, wie man die einzelnen Elemente eines solchen Menüs mit Untermenüs anspricht, ist allerdings allgemeingültig.
Die Struktur
<div class="main-menu"> <ul id="menu"> <li class="menu-item"><!-- link --></li> <li class="menu-item"><!-- link --></li> <ul id="sub-menu"> <li class="sub-menu-item"><!-- link --></li> <li class="sub-menu-item"><!-- link --></li> </ul> <li class="menu-item"><!-- link --></li> </ul> </div>
Wie man jedes Element anspricht:
.main-menu /* die Container-Klasse */ .main-menu ul /* die erste Liste des Containers */ .main-menu li /* Hauptmenü Listenpunkt */ .main-menu li a /* Hauptmenü Link */ .main-menu li ul /* Liste für ein Untermenü */ .main-menu li li /* Untermenü Listenpunkt */ .main-menu li li a /* Untermenü-Link */
Beitrag zuletzt geändert: 15.6.2012 19:23:51 von cyclobox -
Hallo
So ganz unbekannt kommt mir die Struktur und der dazugehöroge CSS Code ehrlich gesagt nicht vor, denn so ähnlich sieht's auch in meinem Stylesheet für's Menü aus.
Allerdings wurde da nie mehr als 1 Ebene tief definiert - ganz im Gegenteil zu Deinem Beispiel. Gut zu wissen, dass man doch noch tiefer gehen und noch genauer defnieren kann. Hab Dank für Deine Mühen!
Gruß,
webdesignerin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
