|
|||
Unterschiedliche Images bei Menüs und Sub-Menüs
Hallo,
ich bin - leider - noch blutiger Anfänger in Sachen CSS und html. Deshalb hier eine Aufgabe, die ich beim besten Willen nicht gelöst kriege: Ich erstelle gerade (auf Basis eines kopierten Scripts aus selfhtml) ein listenbasiertes horizontales Menü mit vertikalem Sub-Menü, das irgendwann noch ein weiteres Sub-Sub-Menü öffnen soll. Bei den Sub-Menüs hätte ich gern aber andere Background-Images als bei dem Hauptmenü. Entsprechende Attributänderungen in den Selektoren haben bislang aber nichts gebracht. Was mache ich verkehrt? Wäre super, wenn mir jemand kurz helfen und mich auf den richtigen Weg bringen würde. Danke vorab! ...Uwe HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Dynamisch Navigationsleisten einblenden</title> <style type="text/css"> body { color: black; background-color: black; } .submenue { background-image:url(images/sub_btn1.png); } div#Rahmen { float: left; height: 75px; width: 707px; margin-top: 50px; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 48.7em; w\idth: 47.1em; } div#Rahmen div { clear: left; } ul#Navigation { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; font-variant: normal; line-height: 23px; text-align: center; z-index: 5; } ul#Navigation li { list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; z-index: 5; } * html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */ margin-bottom: -0.4em; } *:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */ margin-bottom: -0.1em; } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 24px; display: none; /* Unternavigation ausblenden */ } * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */ background-color:silver; padding-bottom:0.4em; } ul#Navigation li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } ul#Navigation li ul li { float: none; display: block; z-index: 5; } ul#Navigation a, ul#Navigation span { display: block; background-image: url(images/buttonNEU_dunkel.png); /*buttons für Standard-Leistenelemente außer "Aktuell" */ width: 115px; /* Breite den in li enthaltenen Elementen zuweisen */ height: 24px; text-decoration: none; font-weight: lighter; color: white; background-color: inherit; z-index: 6; } * html ul#Navigation a, * html ul#Navigation span { width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */ w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */ } ul#Navigation a:hover, ul#Navigation span, li a#aktuell { background-image:url(images/buttonNEU_mittel.png); /* bild bei allen a:hover */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } /* Neu */ ul#Navigation a:active, ul#Navigation span, li a#aktuell { background-image: url(images/buttonNEU_down.png); /* alle down-Buttons */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } /* Neu bis hier */ li a#aktuell { /* aktuelle Rubrik kennzeichnen */ background-image: url(images/buttonNEU_hell.png); /*aktuell-Button */ color: white; background-color: inherit; } ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */ background-image:url(images/buttonNEU_sub1.png); filter: alpha(opacity=80); opacity:0.8; } #abschluss { background-image: url(images/abschlussrund.png); float: left; height: 75px; width: 17px; background-repeat: no-repeat; } </style> </head> <body> <div id="Rahmen"><ul id="Navigation"> <div id="abschluss"></div> <li><a href="#Beispiel">Home</a></li> <li><a href="#Beispiel">Galerien</a> <ul> <li><a href="#Beispiel">Fotos</a></li> <li><a href="#Beispiel">Multimedia</a></li> <li><a href="#Beispiel">Stories</a></li> </ul> </li> <li><a href="#Beispiel">Referenzen</a></li> <li><a id="aktuell" href="#Beispiel">Info/Kontakt</a> <ul> <li><a href="#Beispiel">Seite 4a</a></li> <li><span>aktuelle Seite</span></li> <li><a href="#Beispiel">Seite 4c</a></li> </ul> </li> <li><a href="#Beispiel">Prints & Posters</a></li> <li><a href="#Beispiel">Blog</a></li> </ul><div></div></div> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
Hallo Heiko,
die beschriebene Version ist bereits in meiner Homepage: Uwe S. Meschede ? Fotojournalist & Dokumentarfotograf. Gruß Uwe |
|
||||
Die betreffenden Regeln sind ul#Navigation a etc., und die Subnavi-Links sprichst Du dementsprechend an mit ul#Navigation ul a.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Hallo Heiko,
noch eine bescheidene Frage: Gibt es auch die Möglichkeit, die Attribute einzelner Listen- bzw. Menü- bzw. Sub-Menüpunkte zu beeinflussen? Z.B. für jeden Listenpunkt einen anderen Hintergrund? Danke noch mal vorab für deine Mühe! Gruß ... Uwe |
|
||||
Ja, mit IDs bzw. Klassen (am besten für li).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Hm, könntest du das noch mal etwas verdeutlichen - wie gesagt: Ich arbeite mich gerade erst mal - mehr schlecht als recht - ein und aller Anfang ist eben schwer. Sorry!
Zur Verdeutlichung hier noch mal das Beispiel-Navi: Navitest Und hier noch mal mein derzeitiger Code: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Navitest</title> <style type="text/css"> body { color: black; background-color: black; } .submenue { background-image:url(images/sub_btn1.png); } div#Rahmen { float: left; height: 75px; width: 707px; margin-top: 50px; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 48.7em; w\idth: 47.1em; } div#Rahmen div { clear: left; } ul#Navigation { margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; font-variant: normal; line-height: 23px; text-align: center; z-index: 5; } ul#Navigation li { list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; z-index: 5; } * html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */ margin-bottom: -0.4em; } *:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */ margin-bottom: -0.1em; } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 24px; display: none; /* Unternavigation ausblenden */ } * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */ background-color:silver; padding-bottom:0.4em; } ul#Navigation li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } ul#Navigation li ul li { float: none; display: block; z-index: 5; } ul#Navigation a, ul#Navigation span { display: block; background-image: url(images/buttonNEU_dunkel.png); /*buttons für Standard-Leistenelemente außer "Aktuell" */ width: 115px; /* Breite den in li enthaltenen Elementen zuweisen */ height: 24px; text-decoration: none; font-weight: lighter; color: white; background-color: inherit; z-index: 6; } ul#Navigation ul a { background-image: url(images/buttonNEU_sub1.png); filter: alpha(opacity=80); opacity:0.8; text-align:left; padding-left: 10px; height: 27px; width: 105px; line-height: 28px; } ul#Navigation ul a:hover { background-image: url(images/buttonNEU_sub2.png); } ul#Navigation ul a:active { background-image: url(images/buttonNEU_sub3.png); } * html ul#Navigation a, * html ul#Navigation span { width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */ w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */ } ul#Navigation a:hover, ul#Navigation span, li a#aktuell { background-image:url(images/buttonNEU_mittel.png); /* bild bei allen a:hover */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } /* Neu */ ul#Navigation a:active, ul#Navigation span, li a#aktuell { background-image: url(images/buttonNEU_down.png); /* alle down-Buttons */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } /* Neu bis hier */ li a#aktuell { /* aktuelle Rubrik kennzeichnen */ background-image: url(images/buttonNEU_hell.png); /*aktuell-Button */ color: white; background-color: inherit; } ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */ background-image:url(images/buttonNEU_sub1.png); filter: alpha(opacity=80); opacity:0.8; } #abschluss { background-image: url(images/abschlussrund.png); float: left; height: 75px; width: 17px; background-repeat: no-repeat; } </style> </head> <body> <div id="Rahmen"><ul id="Navigation"> <div id="abschluss"></div> <li><a href="#Beispiel">Home</a></li> <li><a href="#Beispiel">Galerien</a> <ul> <li><a href="#Beispiel">Fotos</a></li> <li><a href="#Beispiel">Multimedia</a></li> <li><a href="#Beispiel">Stories</a></li> </ul> </li> <li><a href="#Beispiel">Referenzen</a></li> <li><a id="aktuell" href="#Beispiel">Info/Kontakt</a> <ul> <li><a href="#Beispiel">Seite 4a</a></li> <li><span>aktuelle Seite</span></li> <li><a href="#Beispiel">Seite 4c</a></li> </ul> </li> <li><a href="#Beispiel">Prints & Posters</a></li> <li><a href="#Beispiel">Blog</a></li> </ul><div></div></div> </body> </html> Gruß ... Uwe |
|
||||
Per <li class="foo"> (oder auch id statt class) kannst Du individ. Werte für das enthaltene a vergeben (Spezifität beachten).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Stichwörter |
navigationsmenü, submenu |
Themen-Optionen | |
Ansicht | |
|
|