CSS-Listen-Menü, Unterpunkte übernehmen Hintergrundgrafik

[CuteMikoChan]

Hallo ihr Lieben ^^

Ich hab gerade ein sehr merkwürdiges Problem was mein CSS-Menü angeht. So habe ich für die Hauptpunkte eine Hintergrundgrafik, möchte aber für die Unterpunkte keine, sondern nur einen Hover Effekt.

Doch komischer Weise übernehmen die Unterpunkte die Hintergrundgrafik, und ich weiß einfach nicht woran das liegt.

So sieht das aus:
http://i227.photobucket.com/albums/dd197/AnimeFan6969/ist.jpg

Und so soll es aussehen:
http://i227.photobucket.com/albums/dd197/AnimeFan6969/soll.jpg

Das ist mein CSS:

#navi { width: 250px; height: 400px; background-color: eeeeee; }
ul { list-style-type:none; margin: 0px; padding: 0px; }
li { width: 230px; height: 50px; background-image: url(button.gif); margin:10px; margin-left:0px;}
ul.unterpunkte { list-style-type:square; margin: 20px; padding: 0px; }
li.unterpunkt { width: 230px; height: 50px; margin:10px; margin-left:0px;}

Und mein HTML:

<div id="navi">
<ul id="menu">
    <li>Bildungsgang</li>
        <ul class="unterpunkte">
        <li class="unterpunkt">Ziele</li>
        <li class="unterpunkt">Zugangsvorraussetzungen</li>
        </ul>
    <li>Fächer</li>
        <ul class="unterpunkte"> 
        <li>Stundentafel</li>
        <li>Unsere Lehrer</li>
        <li>Multimedia</li>
        </ul>
    <li>Schülerprojekte</li>
</ul>
</div>

Ich hoffe ich habe mich klar gemacht was mein Problem ist, und ich hoffe noch mehr dass ihr mir helfen könnt, ich habe wirklich versucht alleine eine Lösung zu finden, aber es geht einfach nicht q.q

Danke im Vorraus

 

[Myhar]

AW: CSS-Listen-Menü, Unterpunkte übernehmen Hintergrundgrafik

Hallo,

es wäre Hilfreich, wenn du deinen Code das nächste Mal mit den [ Code ] Blöcken einfügst, dann kann man ihn auch besser lesen.
Bei deinem Problem: Du definierst mit

li { width: 230px; height: 50px; background-image: url(button.gif); margin:10px; margin-left:0px;}

ein HG-Bild für jedes <li> auf der Seite. (also auch für <li> die innerhalb von <li> sind.) Möchtest du für deine Unterpunkte keine Grafik haben, dann musst du die für die untergeordneten <li> wegnehmen.
Also bei li.unterpunkt {background-image:none; [....] } definieren.
Du kannst die Klasse Unterpunkt bei deinen <li> übrigens weglassen und das ganze mit ul.unterpunkt li ansprechen.

L. G.

 

[CuteMikoChan]

AW: CSS-Listen-Menü, Unterpunkte übernehmen Hintergrundgrafik

Vielen vielen Dank für diesen lebensrettenden Tipp! Eigentlich ganz banal o.o
Man will keinen Hintergrund? -> background-image: none!
Und danke für den Hinweis mit der Klasse, spart mir viel Schreibarbeit ^^

Hab meinen Beitrag auch editiert, danke auch hierfür!!

 

[Myhar]

AW: CSS-Listen-Menü, Unterpunkte übernehmen Hintergrundgrafik

Ja, die einfachsten Sachen übersieht man vor lauter anderen Dingen ;-) Das kommt mir bekannt vor.
Freut mich, wenn ich dir helfen konnte.

 

[cebito]

AW: CSS-Listen-Menü, Unterpunkte übernehmen Hintergrundgrafik

Bei deinem Problem: Du definierst mit

li { width: 230px; height: 50px; background-image: url(button.gif); margin:10px; margin-left:0px;}

ein HG-Bild für jedes <li> auf der Seite. (also auch für <li> die innerhalb von <li> sind.) Möchtest du für deine Unterpunkte keine Grafik haben, dann musst du die für die untergeordneten <li> wegnehmen.
Also bei li.unterpunkt {background-image:none; [....] } definieren.
Du kannst die Klasse Unterpunkt bei deinen <li> übrigens weglassen und das ganze mit ul.unterpunkt li ansprechen.

L. G.

Geht auch, aber besser wäre einfach gleich den richtigen Selector zu nehmen:

Obiges gilt für alle li auf der Seite, folgendes für alle li in #menu

#menu li { width: 230px; height: 50px; background-image: url(button.gif); margin:10px; margin-left:0px;}

und das, nur für die li in #menu, die direkte Kinder von #menu sind:

#menu>li { width: 230px; height: 50px; background-image: url(button.gif); margin:10px; margin-left:0px;}

damit sparst du dir, irgendwelche definitionen wieder überschreiben zu müssen.

Mal noch ein bissl Lesestoff