Antworten auf deine Fragen:
Neues Thema erstellen

CSS-Listen-Menü, Unterpunkte übernehmen Hintergrundgrafik

CuteMikoChan

Nicht mehr ganz neu hier

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:
Code:
#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:
Code:
<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
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

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
Code:
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

Nicht mehr ganz neu hier

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

Hat es drauf

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

undefined

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

Bei deinem Problem: Du definierst mit
Code:
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

Code:
#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:

Code:
#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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.618
Beiträge
1.538.362
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben