✔ Poblem mit horizontaler image Navigation mit Rollover

[angus123]

Hi leutz,

ich möchte eine horizontale Navigationslinie machen.
Hab dazu je Menüpunkt 2 Bilder erstellt.
Einmal der normale Zustand und das zweite Bilder für den Mouseover und Activer Zustand.

Jetzt habe ich nur das Problem, dass das einfach nicht funktionieren will.
Kann mir da jemand helfen? Hab mich schon durch Google.de gewühlt aber bin nicht schlauer geworden.

Hier mein HTML-Teil für das Menü:

<tr>
				<td colspan=3 bgcolor="white" height=15><center>
				<a href="url" id="home"></a>
				<a href="url" id="abpout"></a>
				<a href="url" id="technik"></a>
				<a href="url" id="leistung"></a>
				<a href="url" id="referenzen"></a>
				<a href="url" id="contact"></a>
				<a href="url" id="impressum"></a>
				</center></td>
			</tr>

Hier der CSS-Teil:

   a#home    { display:inline; background-image:url(images/home.gif);
   }
   a#home:hover { background-image:url(images/home2.gif);
   }
   a#home:active {background-image:url(images/home2.gif);
   }


   a#about    { display:inline;
             background-image:url(images/about.gif);
   }
   a#about:hover { background-image:url(images/about2.gif);
   }
   a#about:active { background-image:url(images/about2.gif);
   }


   a#technik    { display:inline; background-image:url(images/technik.gif);
   }
   a#technik:hover { background-image:url(images/technik2.gif);
   }
   a#technik:active {background-image:url(images/technik2.gif);
   }


   a#leistung    { display:inline;
             background-image:url(images/leistung.gif);
   }
   a#leistung:hover { background-image:url(images/leistung2.gif);
   }
   a#leistung:active { background-image:url(images/leistung2.gif);
   }


   a#referenzen    { display:inline; background-image:url(images/referenzen.gif);
   }
   a#referenzen:hover { background-image:url(images/referenzen2.gif);
   }
   a#referenzen:active {background-image:url(images/referenzen2.gif);
   }


   a#contact    { display:inline;
             background-image:url(images/contact.gif);
   }
   a#contact:hover { background-image:url(images/contact2.gif);
   }
   a#contact:active { background-image:url(images/contact2.gif);
   }

   a#impressum    { display:inline; background-image:url(images/impressum.gif);
   }
   a#impressum:hover { background-image:url(images/impressum2.gif);
   }
   a#impressum:active {background-image:url(images/impressum2.gif);
   }

Wär cool, wenn mir jemand helfen könnte den oder die Fehler zu finden ;-)

Grüße
Angus

 

[Quaese]

Hi,

um Hintergrundbilder in einem Element anzuzeigen, muss dieses Breite und Höhe besitzen. Da es sich bei Links um inline-Elemente handelt, können keine Grössen zugewiesen werden - es sei denn das Element würde mit display: block als Blockelement ausgezeichnet werden. Diese müssten nun noch mit float aus dem Textfluss genommen werden, um nebeneinander angezeigt zu werden.

Hier findest du ein zentriertes Menü, das eventuell deinen Anforderungen entspricht.

Ciao
Quaese

 

[angus123]

mh, ich glaub du hast nicht richtig verstanden was ich möchte.

Ich habe vor, ein Menü NUR mit Bildern zu machen.
Also ich habe die Buttons mit Aufschrift (weil spezielle Schrift) als .gif und habe für den Mouseover und Activated Zustand auch ein .gif.

Jetzt möchte ich im Normalzustand zum beispiel Bild "menu1.gif" angezeigt haben. Sobald man drüber fährt soll das wechseln und es wird Bild "menu1_over" angezeigt.
Das ganze dann noch als link.

 

[angus123]

Hi Leute,

ich habs jetzt endlich geschafft.
Nach langer grübelei und rumprobieren.

Das Produkt sieht nun so aus:
HTML

<td colspan=3 bgcolor="white" height=15><center>
				<div id="menu">
					<ul>
					<li id="home"><a href="index.html"><span><em>Home</em></span></a></li>
					<li id="about"><a href="about.html"><span><em>About</em></span></a></li>
					<li id="leistung"><a href="leistung.html"><span><em>Leistungen</em></span></a></li>
					<li id="referenzen"><a href="referenzen.html"><span><em>Referenzen</em></span></a></li>	
					<li id="contact"><a href="contact.html"><span><em>Contact</em></span></a></li>
					<li id="impressum"><a href="impressum.html"><span><em>Impressum</em></span></a></li>
					</ul>
				</div>
				</center></td>

CSS

#menu ul { list-style:none; margin:0; padding:0 10px;  }
#menu li { float:left; }
#menu li a span, #menu li a em { display:none; }
#menu li a { display:block; height:30px; width:110px; background-position:center; }
#menu li a:hover span { display: block; position: relative; width:163px; height:90px;
left:-25px; top:-25px; z-index: 1; background-position:center bottom; }

#menu li#home a { background-image:url(images/home.gif); background-repeat:no-repeat; width:70; height:30;}
#menu li#home a:hover { background-image:url(images/home2.gif); background-repeat:no-repeat; width:70; height:30;}
#menu li#about a { background-image:url(images/about.gif);  background-repeat:no-repeat; width:70; height:30;}
#menu li#about a:hover { background-image:url(images/about2.gif);  background-repeat:no-repeat; width:70; height:30;}
#menu li#leistung a { background-image:url(images/leistung.gif);  background-repeat:no-repeat; width:110; height:30;}
#menu li#leistung a:hover { background-image:url(images/leistung2.gif);  background-repeat:no-repeat; width:110; height:30;}
#menu li#referenzen a { background-image:url(images/referenzen.gif);  background-repeat:no-repeat; width:110; height:30;}
#menu li#referenzen a:hover { background-image:url(images/referenzen2.gif);  background-repeat:no-repeat; width:110; height:30;}
#menu li#contact a { background-image:url(images/contact.gif);  background-repeat:no-repeat; width:87; height:30;}
#menu li#contact a:hover { background-image:url(images/contact2.gif);  background-repeat:no-repeat; width:87; height:30;}
#menu li#impressum a { background-image:url(images/impressum.gif);  background-repeat:no-repeat; width:115; height:30;}
#menu li#impressum a:hover { background-image:url(images/impressum2.gif);  background-repeat:no-repeat; width:115; height:30;}

 

[Quaese]

Hi,

nachdem ich deine Lösung gesehen habe, bin ich mir noch sicherer als zuvor, dich richtig verstanden zu haben. Immerhin hast du darin beinah alle meine Tipps verwendet.

Ciao
Quaese

 

[angus123]

^^ ja sorry, das hab ich dann auch gemerkt.
war nur mein Eindruck am anfang, dass wir an einander vorbeidenken.
Sorry!