Hintergrundbild in 2.Ebene der Liste ausblenden

alexf812 · 29.06.2006, 10:32

hallo,

ich möchte die unterpunkte ohne hintergrundbild haben und die hauptpunkte mit hintergrundbild. nachfolgender code funktioniert jedoch nicht richtig. das hintergrundbild erscheint auch noch bei unterpunkt1, ist jedoch bei unterpunkt2 weg. es sollte jedoch NUR beim hauptpunkt erscheinen

Code:

<div id="left">
<ul>
<li class="aktiv_cur">Hauptpunkt</li>
<li><ul><li><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt2</a></li></ul>
</li>
</ul>
</div>

und das CSS:

Code:

#left ul li{
	list-style: none;
	color: #666;
	background-image: url(../images/nav_icon.gif);
	background-repeat: no-repeat;
}

#left ul li ul li{
        background-image: none;
}

Jupp · 29.06.2006, 10:37

Ist ja auch logisch, weil alle Unterpunkte zusammen bei dir einen Hauptpunkt ergeben (da sie in <li></li> stehen). Versuchs doch mal so:

Code:

<div id="left">
<ul>
   <li class="aktiv_cur">Hauptpunkt</li>
      <ul>
         <li><a href="#">Unterpunkt 1</a></li>
         <li><a href="#">Unterpunkt2</a></li>
      </ul>
</ul>
</div>

Adromir · 29.06.2006, 10:38

Warum eißt du das Hauptbild nicht einfach nur der Klasse

li.active_cur
zu..
Im HTML benutzt du sie ja schon..

29.06.2006, 10:51

@alex & jupp:
nicht böse sein, aber eure schachtelungen sind kwatsch.

versuchs mal so:

Code:

<div id="left">
<ul>
<li class="aktiv_cur">Hauptpunkt
    <ul>
        <li><a href="#">Unterpunkt 1</a></li>
        <li><a href="#">Unterpunkt 2</a></li>
    </ul>
</li>
</ul>
</div>

Code:

#left ul li {
	list-style: none;
	color: #666;
	background: url(../images/nav_icon.gif) no-repeat;
}

#left ul li ul li {
        background: transparent;
}

ist ungetestet, sollte so aber funzen. wenn dem nicht so ist, probiers mal mit nem !important für´s zweite li

Zitat:

Zitat von Adromir

Warum eißt du das Hauptbild nicht einfach nur der Klasse

li.active_cur
zu..
Im HTML benutzt du sie ja schon..

weil sicher noch mehr menüpunkte folgen, die sicher das gleiche hintergrundbild verpasst bekommen sollen.
ausserdem kann man doch hier prima die kaskade nutzen.

alexf812 · 29.06.2006, 11:00

@ingo.... werde mir das mal ansehen. die verschachtelung der liste kommt ja aus typo3, da werd ich dort erstmal nachsehen :-) aber ich denke dann funktioniert es mit deiner lösung

EDIT

irgendwie bekomme ich die verschachtelung so wie bei dir im moment nicht richtig hin im typo3

alexf812 · 29.06.2006, 11:20

Zitat:

Zitat von Jupp

Ist ja auch logisch, weil alle Unterpunkte zusammen bei dir einen Hauptpunkt ergeben (da sie in <li></li> stehen). Versuchs doch mal so:

Code:

<div id="left">
<ul>
   <li class="aktiv_cur">Hauptpunkt</li>
      <ul>
         <li><a href="#">Unterpunkt 1</a></li>
         <li><a href="#">Unterpunkt2</a></li>
      </ul>
</ul>
</div>

ist das eine korrekte listendarstellung? das li schliessen und dananch eine neue liste beginnen? habs auch grad mal im IE probiert, da sieht alles nicht mehr so gut aus

29.06.2006, 11:33

Zitat:

Zitat von alexf812

ist das eine korrekte listendarstellung? das li schliessen und dananch eine neue liste beginnen? habs auch grad mal im IE probiert, da sieht alles nicht mehr so gut aus

nein, das ist nicht die korrekte verschachtelung. da musst du noch ein wenig im typo bohren.
durch die verschachtelung innerhalb des li´s entsteht der intentionierte bezug der elemente

Code:

[-]hauptpunkt
        [unterpunkt: gehört zu ^]unterpunkt
        [unterpunkt: gehört zu ^]unterpunkt

//edit:
hab ich wirklich "intentionierte" geschrieben...?!

argh

Daniel FR · 29.06.2006, 11:58

Zitat:

Zitat von ingo

//edit: hab ich wirklich "intentionierte" geschrieben...?!

argh

Komm, Ingo ich helf' dir: "gewünschte".

Abgesehen davon, an alle anderen: Ich möchte den Vorschlag von Ingo bezüglich der Schachtelung hiermit ausdrücklich unterstützen. So wird's gemacht. Und nicht anders.

Gruß, Daniel

steffenk · 29.06.2006, 19:17

und in Typo3 ist das auch kein Problem, hier hab ich die Lösung dafür vorgestellt:
http://www.traum-projekt.com/forum/6...beitrag24.html

alexf812 · 29.06.2006, 20:26

hey cool... das hatte ich wo dann bei deinem workshop nicht gelesen.
gibts eigentlich irgendwo ne doku zu typoscript. das mit dem activsub hatte ich zuvor nirgends gelesen... aber dann werd ich mich mal ranmachen :-)

steffenk · 29.06.2006, 23:05

ist zwar ot hier, aber Doku gibts:
http://typo3.org/documentation/docum.../current/view/

alexf812 · 30.06.2006, 10:03

ich habe noch ein kleines problem:

die liste ist jetzt erstmal korrekt. ich habe nun der ersten ebene eine andere hintergrundfarbe gegeben als der zweiten. Das problem nun, wenn das menu aufklappt, dann sehe ich hintergrundfarbe ebene 1 dann hintergrundfarbe ebene 2 und zum schluss nochmal hintergrundfarbe ebene 1, da ich mit padding arbeite.

bekommt man das noch weg?

30.06.2006, 10:11

mach doch mal eine beispiel-htmldatei, in der du eine exemplarische liste und die dazugehörigen css-formatierungen notierst.
ansonsten ist das alles ein wenig vage.

alexf812 · 30.06.2006, 10:21

Code:

<div id="left">
<ul>
<li class="aktiv_cur">Main
 <ul>
   <li><a href="#">Sub1</a></li>
   <li><a href="#">Sub2</a></li>
   <li><a href="#"</a></li>
 </ul>
</li>
</ul>
</div>

und das css:

Code:

#left ul li.aktiv_cur{
	color: #666;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #E1E1E1;
}

nach dem letzen unterpunkt erhalte ich dann wieder eine 5px breite graue linie. wenn die liste zugeklappt ist, dann sieht es ja ok aus, aber wenn es dann so wie hier ist, dann sollte dieser balken weg

Daniel FR · 30.06.2006, 11:19

Welcher Mechanismus klappt denn die Unterliste auf und zu? Ist die Liste stets aufgeklappt, wenn du auf dieser Seite und auf einer ihrer Unterseiten bist? Wann ist sie zugeklappt?
Du kannst die Listenpunkte abhängig von der aktuellen Seite formatieren, das funktioniert über eine ID im body-tag. Damit müsstest du das Problem in den Griff kriegen.