Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 24.06.2010, 09:41
usm usm ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.06.2010
Beiträge: 14
usm befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links