nicht angemeldet
Menü-Buttons in CSS mit mehreren verschiedenen Buttons
Hallo
Ich habe grade den Artikel über Mouseover-Buttons und -Effekte mit CSS gelesen. (http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a4) Dabei habe ich ein Problem: Ich habe eine exotische Schriftart in einem Menü verwendet. Um mouseover-Effekte zu realisieren hatte ich bisher in solchen Fällen immer Java-Script verwendet. Offenbar geht das aber auch über CSS.... Nur steht nicht drin wie genau.
Da steht:
"...Wenn verschiedene Rollovereffekte für verschiedene Buttons gewünscht sind, etwa in einer Menüleiste, dann kann man anstatt a:hover auch #button1:hover oder ähnliches schreiben, um zwischen den Buttons mit Hilfe des id-Attributs zu unterscheiden...."
Wie genau greife ich dann über die id auf den Button zu? Ich habe schon alles Mögliche probiert, aber bis jetzt klappts ned. Auch ausführliches Googeln hat nichts gebracht, weil überall nur die Methode für die Änderung von a (bzw. a:hover) drinsteht, was mir allerdings nichts bringt, weil ich ja 6 verschiedene buttons/hovers brauche.
Hier mein Menü:
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style>
#willkommen { background-image:url("s_pix/B_Willkommen.png");}
#willkommen:hover { background-image:url("s_pix/B_WillkommenLight.png");}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="95%">
<tr>
<td align="left" valign="top">
<a class="willkommen" target="content" href="../content/news.htm"></a> // <-Das funktioniert so nicht....
<a class="menu" target="content" href="../content/news.htm">Willkommen</a>
<a class="menu" target="content" href="../content/schwert.htm">Der Weg des Schwertes</a>
<a class="menu" target="content" href="../content/magie.htm">Der Weg der Magie</a>
<a class="menu" target="content" href="../content/heiler.htm">Der Weg des Heilens</a>
<a class="menu" target="content" href="../content/bilder.htm">Bilder</a>
<a class="menu" target="content" href="../content/links.htm">Links</a>
<img src="s_pix/B_Willkommen.png">
</td>
</tr>
</table>
<table align="center" valign="bottom">
<tr><td><a href="info.htm" target="content">info</a></td></tr>
</table>
</body>
</html>
-
Hi Sergorov!
Wie genau greife ich dann über die id auf den Button zu? Ich habe schon alles Mögliche probiert, aber bis jetzt klappts ned. Auch ausführliches Googeln hat nichts gebracht, weil überall nur die Methode für die Änderung von a (bzw. a:hover) drinsteht, was mir allerdings nichts bringt, weil ich ja 6 verschiedene buttons/hovers brauche.
Du gibst jedem Link eine eigene ID. Dann kannst du für jede ID auf die Pseudoklasse :hover zugreifen.
#willkommen { background-image:url("s_pix/B_Willkommen.png");}
Auf Klassen greifst du mit
.klassenname { }zu, auf IDs mit#idname { }.Siehe auch http://de.selfhtml.org/css/formate/zentrale.htm#klassen.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"Das Problem kennen ist wichtiger, als die Lösung zu finden, denn die genaue Darstellung des Problems führt automatisch zur richtigen Lösung."
(Albert Einstein)
-
Hi
Danke erstmal für die schnelle Antwort. Ich blicke allerdings immer noch nicht durch..... wenn ich Dich richtig verstanden habe ist mein Style-head soweit in Ordnung. Wenn ich aber jetzt im body
<a id="willkommen" target="content" href="../content/news.htm"></a>
einfüge erscheint der button garnicht. Wenn ich text eingebe, also z.B.
<a id="willkommen" target="content" href="../content/news.htm"> </a>
Erscheint der button zwar, hat auch seinen Rollover-Effekt, aber nur in dem Bereich wo der text steht. Der Rest ist abgeschnitten (bzw. der Button wird bei zu langem Text wiederholt)Ich möchte aber, dass jeder button (der ja keine weitere Beschriftung braucht) einfach so in voller Größe dargestellt wird, seinen Rollover hat, und verlinkt werden kann.
Wie kriege ich das hin?
-
Ich möchte aber, dass jeder button (der ja keine weitere Beschriftung braucht) einfach so in voller Größe dargestellt wird, seinen Rollover hat, und verlinkt werden kann.
beschäftige dich mit der der css eigenschaft display (ggf auch float) sowie mit den eigenschaften width und height - diese sollten es dir ermöglichen, deinen link die entsprechende größe zu verpassen
-
Hi Sergorov!
Ich möchte aber, dass jeder button (der ja keine weitere Beschriftung braucht) einfach so in voller Größe dargestellt wird, seinen Rollover hat, und verlinkt werden kann.
Ein Link ganz ohne Linktext ist generell eine sehr schlechte Idee, davon würde ich abraten! Ansonsten siehe suits Antwort.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"Das Problem kennen ist wichtiger, als die Lösung zu finden, denn die genaue Darstellung des Problems führt automatisch zur richtigen Lösung."
(Albert Einstein)-
Ein Link ganz ohne Linktext ist generell eine sehr schlechte Idee
den text kann man ggf mit overflow:hidden und text indent: -99999px (phark methode) los werden
-
-
Hi,
Ich möchte aber, dass jeder button (der ja keine weitere Beschriftung braucht) einfach so in voller Größe dargestellt wird, seinen Rollover hat, und verlinkt werden kann.
Der Link hat keine "volle Groesse"; wenn du ihm keinen Inhalt gibst, dann ueberhaupt keine.
Ein Hintergrundbild ist kein Inhalt.MfG ChrisB
-
-