Listenproblem mit der CSS Formatierung

[snooze7]

Hallo zusammen,

ich hätte eine Frage zu Listenformatierung per CSS:

Folgendes Html Schema habe ich vorliegen:

<div id="unternavigation">

<ul>
<li></li>
<ul>
<li></li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
</ul>


Das heißt ich hab 3 Ebenen.

Wenn ich nun per CSS die gesamte Listen einzeln formatieren kann, wie muss ich da vorgehen?

div#unternavigation {
    width: 233px;
    margin-top: 61px;
    padding-left: 8px;
    padding-right: 17px;
    padding-bottom: 17px;
}

div#unternavigation ul {
}

div#unternavigation ul li {
    list-style-type: none;
}

div#unternavigation ul li a {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

div#unternavigation ul li ul {
    width: 233px;
}

div#unternavigation ul li ul li {
    float: left;
    list-style-type: none;
}

div#unternavigation ul li ul li a {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

Das ganze ist ein grafisches Menü (also nur mit Bildern). Das Problem ist, dass die durch formatieren der ersten Ebene, alle anderen Elemente mitformatiere und bspw. div#unternavigation ul li ul li a keine Auswirkung auf meine Homepage hat.

Geht das nicht so wie ich es gemacht habe?
Muss ich die Unterlisten und Unterlemente anders schreiben oder die Reihenfolge ändern?

Mfg Snooze7

 

[neuroleptika]

Entweder du gibst den jeweiligen <ul>s eigene ids oder du überschreibst die Angaben in den Verschachtelten Listen.

 

[snooze7]

das mit dem überschreiben klappt einfach nicht. Ich würde gerne die 1. Ebene so lassen. Die Abstände der Listen in der 2. und 3. Ebene sollen sowas um die 10px sein. (geht doch normalerweise mit padding-top / padding-bottom oder?). Wenn ich aber die 2te oder 3te li formatiere tut sich gar nichts auf der Hp. NUr wenn ich das in der 1ten Ebene ändere verschieben sich ALLE Elemente entsprechend. Warum?

Ist es eigentlich egal ob man ID oder Klassen vergibt? Ich nehm immer für Ebenen ID und für Unterelemente Klassen....

 

[Bernhard]

Hallo zusammen,

ich hätte eine Frage zu Listenformatierung per CSS:

Folgendes Html Schema habe ich vorliegen:

<div id="unternavigation">

<ul>
<li></li>
<ul>
<li></li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
</ul>


Das heißt ich hab 3 Ebenen.

Wenn ich nun per CSS die gesamte Listen einzeln formatieren kann, wie muss ich da vorgehen?

div#unternavigation {
    width: 233px;
    margin-top: 61px;
    padding-left: 8px;
    padding-right: 17px;
    padding-bottom: 17px;
}

div#unternavigation ul {
}

div#unternavigation ul li {
    list-style-type: none;
}

div#unternavigation ul li a {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

div#unternavigation ul li ul {
    width: 233px;
}

div#unternavigation ul li ul li {
    float: left;
    list-style-type: none;
}

div#unternavigation ul li ul li a {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
}

Das ganze ist ein grafisches Menü (also nur mit Bildern). Das Problem ist, dass die durch formatieren der ersten Ebene, alle anderen Elemente mitformatiere und bspw. div#unternavigation ul li ul li a keine Auswirkung auf meine Homepage hat.

Geht das nicht so wie ich es gemacht habe?
Muss ich die Unterlisten und Unterlemente anders schreiben oder die Reihenfolge ändern?

Mfg Snooze7

Hallo Snooze7,

über grafische Menüs solltest Du Dir nochmal Gedanken machen...
Du hast in Deiner HTML-Liste einen Fehler:
Die verschachtelten Listen sind (wie Du es in Deinen CSS-Angaben bereits richtig berücksichtigt hast) untergeordnete Elemente des vorhergehenden Listenelements, daher muss es korrekt heißen:

<ul>
<li>
  <ul>
  <li>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Dann sollte es auch mit den Style-Angaben klappen...

Grüße
Bernhard

 

[snooze7]

*klatsch mir an den Kopf

Oh mann, ich dachte mir schon sowas. Vielen Dank.

 

[Bernhard]

*klatsch mir an den Kopf

Oh mann, ich dachte mir schon sowas. Vielen Dank.

Hallo Snooze,

täusch ich mich, oder war da vorhin noch ein Link zu Deiner Site?

Für das, was ich da gesehen habe, würde ich aus mehreren Gründen
keine grafische Navigation verwenden, sondern ganz einfach per CSS
Hintergrundfarben (oder evtl. Hintergrundbilder) austauschen...

Grüße
Bernhard

 

[neuroleptika]

Ich habe den aktuellen Link.
Besser währe du würdes ihn allen zur Verfügung stellen.

Hier gibst du dem a eine Höhe von 19px:

 div#unternavigation ul li ul li a {navigation.css (line 95)
display:block;
height:19px;
overflow:hidden;
position:relative;
}

Etliche Zeilen darunter hebst du das mit height: auto wieder auf.
height: auto; bewirkt, daß sich die Höhe am Inhalt orientiert (der default-Wert für height).
Der Inhalt besteht nur aus einem einzeiligem span.
Entferne das height: auto;

div#unternavigation ul li ul li ul li a {
	position: relative;
	overflow: hidden;
	display: block;
[COLOR="DarkRed"][B]/*	height: auto;/*[/B][/COLOR]
}

Hier gibst du die richtige Höhe für das jeweilige a an:

 a.vers111-on, a.vers111:hover, a.vers111:active, a.vers111:focus {
	background-image: url(../images/versicherungen/versicherung1_1_1_on.gif);
	background-repeat: no-repeat;
	width: 233px;
	height: 31px; 
}

Durch das vorangestelte div#unternavigation in den übergeordneten style-Anweisungen werden diese Angeben nicht berücksichtigt. Die Wertigkeit von a.vers111-on reicht nicht aus um die id zu überschreiben.
Notiere den id-Selektor auch für diese Angaben:

[COLOR="#8b0000"][B]div#unternavigation[/B][/COLOR] a.vers111-on, a.vers111:hover, a.vers111:active, a.vers111:focus {
	background-image: url(../images/versicherungen/versicherung1_1_1_on.gif);
	background-repeat: no-repeat;
	width: 233px;
	height: 31px; 
}

Jetzt wird height: 31px berücksichtigt.

Trotzdem würde ich dir empfehlen, die Image-Replacement Methode nach Gilder-/Levin zu verwenden
oder ganz auf die Grafiken zu verzichten.

Deine Methode hat keinerlei Vorteile gegenüber einer echten Replacement-Technik.