verschachtelte Listen

[Evo]

Hallo an alle!!!
Ich würde mich sehr freuen wenn mir einer mal eine Kleinigkeit näher bringen könnte.

Ich stehe derzeit vor einem Problem und weiß nicht ganz weiter, ich versuche erstmal das Problem zu schildern und wenn es nicht ausreicht mach ich auch noch nen Bild.

Das Problem sind verschachtelte Listen und ihre Vererbung.

Beispiel:

<ul class="menu">
    <li id="current" class="active parent item101">
        <a href="index.php">Home</a>
        <ul>
             <li class="item102">
                 <a href="index.php/sub1">Sub1</a>
             </li>
    </li>
    <li>
        .......
    </li>

Wenn ich jetzt dem Link "a" der Klasse"active.parent.item1" ein Background-image zuweise dann ist das auch
in der verschachtelten "inneren" Liste mit drin was ja erstmal gut ist aber wenn ich jetzt dem Link "a" der Klasse"item102" ein anderes Bild geben möchte, ist das wieder nicht so toll, denn es bekommt das Images vom Eltern li. Gibt es da ne Möglichkeit dies zu umgehen????

Falls es schon aufgefallen ist, es ist ein Auszug aus Joomla 1.6. Was aber ja erstmal nicht weiter von interesse ist. Vielleicht hilft es ja doch weiter.

Ich bedanke mich schonmal im voraus!!!

MfG
Evo
Wie kann man es Umgehen das

[wildmieze]

Ohja, das kenne ich .. ich hab letztens an einer in vier Ebenen geschachtelten Liste gesessen und geflucht wie ein Rohrspatz
Vermutlich mache ich da auch etwas falsch, aber ich habe es dann so gelöst, daß ich die "unteren" Links genauer angesprochen habe .. also statt einfach ".item02 a" zum Beispiel "li#current.active li.item102 a" o.ä. Bei zwei Ebenen noch gut machbar, bei 3 Ebenen schon ziemlich lang - und die 4te Ebene habe ich dann tatsächlich nur erwischt, indem ich meine übliche Klasse "umenu3" in eine ID "umenu3" umgewandelt habe.
Übrigens ist Deine Klasse "active.parent.item1" keine Klasse. Es sind 3 verschiedene Klassen ..

Aber da gibt es bestimmt eine bessere/einfachere Lösung und ich war nur zu blöd die zu finden

[Evo]

@wildmieze
Hallo ich danke dir erstmal für die Antwort und werde es so mal versuchen melde mich wieder wenn es geklappt hat, für weiter Vorschläge bin ich aber dennoch offen!!!

[Evo]

??? Hast du es so unter Joomla hinbekommen??? Denn bei mir regt sich lieder gar nichts trotzdem danke für den Rat!!!

[wildmieze]

Bei mir wars Typo3, aber das sollte eigentlich egal sein ..
Was klappt denn nicht? Du kannst auch versuchen, mal testweise ein !important in die CSS-Anweisung zu packen - wenn es dann funktioniert, warst Du noch nicht "ausführlich" genug beim Ansprechen. Wenn es auch dann nicht geht, ist evtl. einfach nur ein Fehler drin ..

[Evo]

Also ich bin am verzweifeln!!! Naja habe jetzt die ganzen Codesegmente die ich mir überall hergeholt habe getestet und auch noch mal alles neu geschrieben weil ich dachte vielleicht ist irgendwo ein Fehler drin aber auch das hat nix genützt - ich scheine einfach zu blöd zu sein - !!!

Die Seite sieht so schön aus und jetzt hänge ich schon drei Tage an diesem Menü - kann es denn wirklich so schwer sein??? -
Naja vielleicht fällt euch ja noch etwas ein wo man mal schauen kann.

Das Problem ist ja das ich im Topmenü drei Zustände habe einmal "ohne" Grafik halt einfach nur der Link, dann mit einer Grafik für hover und eine für active und die haben auch alle noch unterschiedliche Längen (halt je nach Wortlänge). Die Submenüs hingegen bekommen hingegen alle nur einen wechsel von der Vordergrund zur Hintergrundfarbe und sollen halt so lang sein das kein Zeilenumbruch stattfindet, habe sowas auch noch irgends in Life gefunden.
Die einen wechseln nur die Farben und die anderen haben Grafiken aber alle gleich lang und was weiß ich nicht noch alles. Aber noch keinen gefunden der es so gemacht hat wie ich das machen will.
Und das noch Joomla 1.5 fähig.
Naja vielleicht kennt ja einer eine gute Anlaufstelle wo auf so etwas eingegangen wird.

MfG
Evo

[wildmieze]

... solange es nur 2 Ebenen sind, sollte das eigentlich hinzukriegen sein (zumindest bis auf das Unterdrücken des Zeilenumbruchs im Submenü .. *kratzamkopp*) .. poste doch mal Deine CSS ..

[hero-master]

Hi Evo,
es wäre super, wenn du uns mal die Seite irgendwie zeigen kannst oder das visuell mal aufbereiten kannst. Mir wird irgendwie schwindlig, wenn ich deinen Text lese (auch wenn es für dich logisch erscheinen mag)

[th2409]

Klingt alles ein wenig verworren :-(
Normalerweise ist es kein Problem (und funktioniert auch!), wenn man den einzelnen Klassen unterschiedliche CSS-Eigenschaften gibt, also mit üblichen Nachfahren-Selektor:

.item101 a {...}
.item102 a {...}

Es ist nur daran zu denken, dass die Eigenschaften aus dem übergeordneten Menü (hier .item101) durchgreifen auf die untergeordneten, denn .item102 a ist automatisch erstmal auch von .item101 a "betroffen - es sei denn, man notiert das CSS in folgender Art (Kind-Selektor), so dass tatsächlich NUR genau dieses a betroffen ist:

.item101 > a {...} -betrifft NUR das a der obersten Ebene
.item102 > a {...} -betrifft NUR das a der nächsten Ebene.

Aber Obacht: das geht nicht mit dem IE6...

Ansonsten bleibt nur, in jedem der untergeordneten Listenpunkte das a per CSS vollständig vom "übergeordneten Ballast" zu befreien; also Breite angeben, ein anderes Bild angeben (background-image: none; funktioniert i.d.R. nicht; also am besten ein transparentes GIF oder anderes Bild setzen!) , Textformatierung setzen usw.
Etwas problematisch ist normalerweise die "Garantie", dass eine Zeile ohne Zeilenumbruch auskommt; sofern man mit realtiven Textgrößen arbeitet (was eigentlich zu empfehlen ist), kann der User den Text größer/ kleiner machen und kippt damit evtl. die Zeilendarstellung. Außerdem benehmen sich die unterschiedlichen Browser auch unterschiedlich, was zu nicht beabsichtigten Darstellungen führen kann,, auch wenn es auf Deiner Heim-Maschine OK erscheint. Ansonsten kann man nur so viel Reserve-Raum lassen in der Breite, dass alles auch bei 2 Stufen größerer Schrift noch hinpassen sollte. Halte ich aber für nur mittelmäßig elegant...

Das alles hat auch nix mit Joomla oder einem anderen System zu tun, ist reines CSS.

[Rinaldo]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Verschachtelte Liste</title>
<style type="text/css">
ul.menu li.active_parent_item101 a {background-color:#009}
ul.menu ul li.item102 a {background-color:#0C0}
</style>
</head>

<body>
<ul class="menu">
    <li id="current" class="active_parent_item101">
        <a href="index.php">Home</a>
        <ul>
             <li class="item102">
                 <a href="index.php/sub1">Sub1</a>
             </li>
        </ul>
    </li>
</ul>
</body>
</html>

So sollte es auch funtkionieren...

[Evo]

Habe jetzt mal ne kleine Grafik fertig gemacht für Demozecke - hier zu finden Link

Zur Farberklärung: Die Grüntöne stehen für BG Grafiken und die Rottöne sind nur BG Colors die halt wechseln sollen wenn man mit der Maus drauf geht.
Der hellblaue Hintergrund ist der Body und das dunkelblau halt eine Grafik die im div als Hintergrund festgelegt ist.
Das ist das Beispiel wie es aussehen "soll".

Habe jetzt auch mal eine Grafik vom Istzustand - hier zu finden Link

und ein auszug aus einem zeihmlich langen CSS aber ich war am verzweifeln und habe mal versucht nichts zusammen zu fassen!!!

.moduletable_menu{
       height: 42px;
       width: 850px;
}

.moduletable_menu a{
	color:#c6c6c6;
	font-weight:bold;
}

ul.menu{
       list-style: none;
       margin: 0;
       padding: 0;
}

ul.menu li{
	display:block;
	float:left;
}

/*----Startseite----*/

ul.menu li.item101 a{
	display:block;
	padding-left:17px;
	padding-right:18px;
	width:55px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
}

ul.menu li.item101 a:hover{
	display:block;
	padding-left:17px;
	padding-right:18px;
	width:55px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
	background-image:url(../images/menu/Starthover.png);
}

ul.menu li#current.item101 a{
	display:block;
	padding-left:17px;
	padding-right:18px;
	width:55px;
	padding-top:13px;
	padding-bottom:20px;
	height:9px;
	background-image:url(../images/menu/Startactive.png);
}

/*----Crew----*/

ul.menu li.parent.item104 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:31px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
}

ul.menu li.parent.item104 a:hover{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:31px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
	background-image:url(../images/menu/Crewhover.png);
}

ul.menu li#current.item104 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:31px;
	padding-top:13px;
	padding-bottom:20px;
	height:9px;
	background-image:url(../images/menu/Crewactive.png);
}

ul.menu li.active.item104 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:31px;
	padding-top:13px;
	padding-bottom:20px;
	height:9px;
	background-image:url(../images/menu/Crewactive.png);
}

/*----Forum----*/

ul.menu li.item103 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:36px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
}

ul.menu li.item103 a:hover{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:36px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
	background-image:url(../images/menu/Forumhover.png);
}

ul.menu li#current.item103 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:36px;
	padding-top:13px;
	padding-bottom:20px;
	height:9px;
	background-image:url(../images/menu/Forumactive.png);
}

/*----Blog----*/

ul.menu li.item105 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:25px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
}

ul.menu li.item105 a:hover{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:25px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
	background-image:url(../images/menu/Bloghover.png);
}

ul.menu li#current.item105 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:25px;
	padding-top:13px;
	padding-bottom:20px;
	height:9px;
	background-image:url(../images/menu/Blogactive.png);
}

/*----Gästebuch----*/

ul.menu li.item106 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:61px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
}

ul.menu li.item106 a:hover{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:61px;
	padding-top:16px;
	padding-bottom:17px;
	height:9px;
	background-image:url(../images/menu/Gaestebuchhover.png);
}

ul.menu li#current.item106 a{
	display:block;
	padding-left:18px;
	padding-right:17px;
	width:61px;
	padding-top:13px;
	padding-bottom:20px;
	height:9px;
	background-image:url(../images/menu/Gaestebuchactive.png);
}

/*------------------------Submenu---------------------------------*/

ul.menu li ul{
       position: absolute;
       width: 200px;
	   height:84px;
       left: -999em;
       top: 42px;
}

ul.menu li:hover ul{
       left: auto;
}

ul.menu li ul li{
	display:block;
	width:200px;
	height:42px;
	background-image:none;
}

ul.menu li ul li.item111 a{
	display:block;
	width:200px;
	height:42px;
	background:url(../images/testpngschwarz.png) repeat;
}

das ist viel ich weiß aber habe schon echt viel getestet...

Hoffentlich steigt da noch einer durch!!!

Habe es auch nur mal mit einen Sub getestet darum bitte nicht wundern!!! und die Grafik die da drin ist war auch nur zum Test da soll ja dann eine BG Color rein!!!

MfG
Evo

[Evo]

@th2409 vielen Dank für die Info das bringt mich schon ein Stück näher in meine Richtung!!!

[Evo]

Hallo also ich möchte mich nochmal bei allen bedanken die mich unterstützt haben. Nach ein paar Änderungen mit den Tipps eurer Seite habe ich mein Menü fertig bekommen also nochmal vielen lieben Dank an euch!!!

MfG
Evo