Rollover per CSS: Kapiere die Lösung nicht

WINNIE · **Registriert:** 21.11.2001 **Beiträge:** 2936

Hallo,

war auf der Suche nach einem Mouseover-Effekt für grafische Navigationsbuttons der CSS. Hab ich auch gefunden, nämlich bei Dr. Web hier <a href='http://www.drweb.de/csspraxis/css-rollover-menu.shtml' target='_blank'>http://www.drweb.de/csspraxis/css-rollover-menu.shtml</a>, ganz tolle Sache.

Nur: Das beispiel ist ein wenig Käse, denn in den drei Menüpunkten ist ja immer das gleiche Bild. Wie bring ich denn nun ein waagrechtes Menü hin mit verschiedenen Bildern? Habe es zuerst in der untenstehenden "simplen" Art versucht, aber das packt mir die Dinger natürlich untereinander. Das Dr-Web-Beispiel "Verbesserte Version von Mart Simon (Codes zum Studium)" hier <a href='http://www.drweb.de/csspraxis/images/rollver-beispiel-uf-2.html' target='_blank'>http://www.drweb.de/csspraxis/images/rollv...spiel-uf-2.html</a> ist sogar noch rätselhafter, der schreibt z.B. unten auch noch Linktexte hin die doch gar nicht auftauchen, und wo man da mit unterschiedlichen bilder arbeitet ist mir wie gesagt auch rätselhaft.

Kann mir da bitte mal jemand auf die Sprünge helfen?

Danke!

</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><html>
<head>
<title>CSS 2: schnelle Rollover-Menüs ohne Preload</title>
<style type="text/css">

body {background: white;}

#rollover1 a {
height: 25px;
width: 100px;
display: table-cell;
background: url("rollovermenu.gif") 0px 0px no-repeat;
}
#rollover1 a:hover {
background-position: 0px -25px;
}

#rollover2 a {
height: 25px;
width: 100px;
display: table-cell;
background: url("rollovermenu1.gif") 0px 0px no-repeat;
}
#rollover2 a:hover {
background-position: 0px -25px;
}

#rollover3 a {
height: 25px;
width: 100px;
display: table-cell;
background: url("rollovermenu2.gif") 0px 0px no-repeat;
}
#rollover3 a:hover {
background-position: 0px -25px;
}

</style>

</head>
<body>
<div id="rollover1">
<a href="http://www.microsoft.com"></a>
</div>

<div id="rollover2">
<a href="http://www.dell.com"></a>
</div>

<div id="rollover3">
<a href="http://www.google.com"></a>
</div>

</body>
</html>

</td></tr></table><div class='postcolor'>

Tan Ling · **Verfasst:** 01.04.2009, 17:26

Hallo Winnie,

dies ist vielleicht eine für dich gangbare Lösung:
<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<div id="navcontainer" style="position:relative; top:0px; left:0px; width:100%;">
<ul id="navlist">
<li><a href="Ueber_uns.html">Über uns</a></li>
<li><a href="Gruppen.html">Gruppen</a></li>
<li><a href="Termine.html">Termine</a></li>
<li><a href="Galerie.html">Galerie</a></li>
<li><a href="GBuch.html">Gästebuch</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li>Leer</li>/* Nur als Beispiel */
<li><a href="Narren.html">Gästekarte</a></li>
<li><a href="Downloads.html">Downloads</a></li>
<li><a href="Links.html">Links</a></li>
</ul>
</div>
</bod>
</html>

Das Script ist in dieser Version im Einsatz und stabil.

MfG

Tan Ling

Tan Ling · **Verfasst:** 01.04.2009, 17:30

Sorry,

habe zu spät auf das Beitragsdatum geschaut.

Ja, wer lesen kann ist klar im Vortail.

Gruß

Tan Ling

schlaubi · **Verfasst:** 01.04.2009, 17:46

Zeit ist relativ

DukePyrolator · **Verfasst:** 02.04.2009, 10:30

Wow! Nach über 2 Jahrend endlich ne Anwort! DAS nenn ich mal nen LAG !

Aber wie heisst es doch so schön: Lieber zu spät als gar nicht

WINNIE · **Registriert:** 21.11.2001 **Beiträge:** 2936

Hallo Tan Ling,

danke dir, endlich kann ich bei der Navigation von der Seite weitermachen. Zwar muss ich erst den mittlerweile verschrotteten Rechner aus dem Keller holen, auf dem die html-files liegen, aber ich schätze das ich die Kiste bis Ostern nochmal zum laufen kriege und dann sag ich Bescheid, ob's geklappt hat ;-)

Nee, Spaß beiseite. Ehrlich gesagt weiß ich tatsächlich gar nicht mehr genau um was es damals ging, aber ich werd's mir jetzt in der Tat nochmal anschauen und brauchen kann man gute Lösungen ja immer. Danke.

PS: Welcome on board.

Tan Ling · **Verfasst:** 04.05.2009, 19:27

Ja Leute ihr habt ja recht,

aber ab und zu muss auch mal der Esel seinen Senf dazugeben.

Auch wenn das Problem recht alt ist und in Zeiten von
PHP UND WYSIWYG-Editoren nur noch selten verwendet wird.

Ich fühle mich so unsäglich alt. :leverkusen:

Gruß

Tan Ling :wink:

HackingBoard

Rollover per CSS: Kapiere die Lösung nicht

Wer ist online?