+ Antworten
Ergebnis 1 bis 13 von 13

Thema: verschachtelte Listen

  1. #1
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7

    verschachtelte Listen

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

  2. #2
    TP-Veteran wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.720
    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

  3. #3
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7
    @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!!!

  4. #4
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7
    ??? Hast du es so unter Joomla hinbekommen??? Denn bei mir regt sich lieder gar nichts trotzdem danke für den Rat!!!

  5. #5
    TP-Veteran wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.720
    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 ..

  6. #6
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7
    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

  7. #7
    TP-Veteran wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE wildmieze ist ein richtiges Arbeitstier - DANKE Avatar von wildmieze
    Registriert seit
    Dec 2003
    Beiträge
    1.720
    ... 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 ..

  8. #8
    TP-Moderator hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User hero-master lebt für das TP und seine User Avatar von hero-master
    Registriert seit
    Mar 2003
    Ort
    Hamburg
    Beiträge
    5.927
    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)

  9. #9
    TP-Senior th2409 macht sich hier sehr viel Mühe Avatar von th2409
    Registriert seit
    Feb 2007
    Beiträge
    284
    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.
    Thomas

  10. #10
    TP-Greis Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Rinaldo lebt für das TP und seine User Avatar von Rinaldo
    Registriert seit
    Oct 2003
    Ort
    Niederbayern
    Beiträge
    6.052
    HTML-Code:
    <!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...
    </andy>
    Jetzt bauen wir´09 + ´10

  11. #11
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7
    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!!!

    Code:
    .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
    Geändert von Evo (14.10.2010 um 15:01 Uhr)

  12. #12
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7
    @th2409 vielen Dank für die Info das bringt mich schon ein Stück näher in meine Richtung!!!

  13. #13
    Evo
    Evo ist offline
    TP-Junior Evo macht alles soweit korrekt
    Registriert seit
    Oct 2010
    Beiträge
    7
    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

+ Antworten

Ähnliche Themen

  1. Verschachtelte Listen formatieren (X-Post)
    Von Angel_de im Forum HTML & CSS
    Antworten: 4
    Letzter Beitrag: 19.03.2007, 20:59
  2. Verschachtelte Listen mit Grafik
    Von e2e4 im Forum Webdesign allgemein
    Antworten: 2
    Letzter Beitrag: 04.03.2006, 13:13
  3. verschachtelte listen
    Von alexf812 im Forum HTML & CSS
    Antworten: 13
    Letzter Beitrag: 28.03.2005, 14:24
  4. Verschachtelte Datenbankabfrage?
    Von Silverhawk im Forum Traum-Dynamik
    Antworten: 4
    Letzter Beitrag: 15.10.2004, 07:05

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51