zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unterschiedliche Images bei Menüs und Sub-Menüs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.06.2010, 10: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
  #2 (permalink)  
Alt 24.06.2010, 12:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Niemand hat Deine Grafiken, baue das also mal zusammen und poste den Link.
__________________
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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.06.2010, 12:42
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

Hallo Heiko,
die beschriebene Version ist bereits in meiner Homepage:
Uwe S. Meschede ? Fotojournalist & Dokumentarfotograf.
Gruß
Uwe
Mit Zitat antworten
  #4 (permalink)  
Alt 24.06.2010, 12:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.06.2010, 13:02
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

Super! Viielen Dank!
Gruß ...Uwe
Mit Zitat antworten
  #6 (permalink)  
Alt 24.06.2010, 13: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

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.06.2010, 13:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #8 (permalink)  
Alt 24.06.2010, 14:05
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

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
Mit Zitat antworten
  #9 (permalink)  
Alt 24.06.2010, 14:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.06.2010, 14:46
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

Wie könnte denn so ein Code-Schnipsel in meinem Fall aussehen?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
navigationsmenü, submenu

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 15:49 Uhr.