XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Unterschiedliche Images bei Menüs und Sub-Menüs (http://xhtmlforum.de/showthread.php?t=61532)

usm 24.06.2010 09:41

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>


heiko_rs 24.06.2010 11:03

Niemand hat Deine Grafiken, baue das also mal zusammen und poste den Link.

usm 24.06.2010 11:42

Hallo Heiko,
die beschriebene Version ist bereits in meiner Homepage:
Uwe S. Meschede ? Fotojournalist & Dokumentarfotograf.
Gruß
Uwe

heiko_rs 24.06.2010 11:48

Die betreffenden Regeln sind ul#Navigation a etc., und die Subnavi-Links sprichst Du dementsprechend an mit ul#Navigation ul a.

usm 24.06.2010 12:02

Super! Viielen Dank!
Gruß ...Uwe

usm 24.06.2010 12:41

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

heiko_rs 24.06.2010 12:45

Ja, mit IDs bzw. Klassen (am besten für li).

usm 24.06.2010 13:05

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>

Noch mal Danke für deine Geduld!
Gruß ... Uwe

heiko_rs 24.06.2010 13:11

Per <li class="foo"> (oder auch id statt class) kannst Du individ. Werte für das enthaltene a vergeben (Spezifität beachten).

usm 24.06.2010 13:46

Wie könnte denn so ein Code-Schnipsel in meinem Fall aussehen?


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:40 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019