nicht angemeldet
3D Buttons mit CSS
Der DickiHi!
Ich habe versucht mit CSS ein 3D-Menü zu bauen, aber leider funktioniert nur im Firefox das active-Element nicht. Enthält mein Code einen Fehler?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css"><!--
body { background-color:#F6F6C6; }
a.button {
display:block;
width:150px;
font-weight:bold;
text-decoration:none;
}
a:link.button {
padding:4px;
color:#000000;
background-color:#E6E660;
border-top:1px solid white;
border-right:1px solid black;
border-bottom:1px solid black;
border-left:1px solid white;
}
a:visited.button {
padding:4px;
color:#6D6C10;
background-color:#E6E660;
border-top:1px solid white;
border-right:1px solid black;
border-bottom:1px solid black;
border-left:1px solid white;
}
a:hover.button {
padding: 6px 2px 2px 6px;
color: #000000;
background-color: #B9B81D;
border-top: 1px solid black;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid black;
}
a:active.button {
padding: 6px 2px 2px 6px;
color: white;
background-color: #828214;
border-top: 1px solid black;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid black;
}
a:focus.button {
padding: 6px 2px 2px 6px;
color: #000000;
background-color: #B9B81D;
border-top: 1px solid black;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-left: 1px solid black;
}
--></style><title>:TEST:</title></head><body>
<p><a href="home.htm" class="button">HOME</a></p>
<p><a href="lnks.htm" class="button">LINKS</a></p>
<p><a href="mail.htm" class="button">EMAIL</a></p>
</body></html>
-
Hallihallo!
Vielleicht geht es mit
a.button:link {}
.
.
.
a.button:focus {}?
Viele liebe Grüße,
Der Dicki -
Γειά σου, Bernd!
Ich habe versucht mit CSS ein 3D-Menü zu bauen, aber leider funktioniert nur im Firefox das active-Element nicht.
Das "active-Element" gibt es nicht, höchstens die Pseudoklasse :active.
Enthält mein Code einen Fehler?
Ja. ;-)
[...]
a:link.button {
[...]
a:visited.button {
[...]
a:hover.button {
[...]
a:active.button {
[...]
a:focus.button {
[...]In dieser Reihenfolge kann der von dir gewünschte Effekt nicht eintreten. Warum? Wenn du den Button anklickst, tritt der Fall :active ein. Gleichzeitig gibst du dem Button den Fokus, also tritt auch :focus ein und überschreibt die Vorgaben aus :active.
Eine Frage, die genau diese Thematik zum Inhalt hatte, tauchte auch vor kurzem im SELFHTML-Gewinnspiel auf, auf der Lösungsseite findest du die Angelegenheit auch nochmal erklärt.
Пока!
Sven aus Bonn--
Do it yourSELF! ;-)
Selfcode: ie:% fl:( br:> va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:) mo:} zu:) - Selfcode dekodieren - Selfcode-Info
Athen rückt in Sichtweite. ;-)-
Klingt wirklich logisch und genauso gut funktioniert es jetzt auch. ;)
Nur warum steht in SelfHTML eine Reihenfolge?
-
Klingt wirklich logisch und genauso gut funktioniert es jetzt auch. ;)
Nur warum steht in SelfHTML eine Reihenfolge?
Wäre schön, wenn dazu noch jemand etwas sagen könnte. Daaankee! ;)
-
Hallo.
Klingt wirklich logisch und genauso gut funktioniert es jetzt auch. ;)
Nur warum steht in SelfHTML eine Reihenfolge?
Weil es logisch klingt und gut funtioniert.
Wäre schön, wenn dazu noch jemand etwas sagen könnte.
Es war ja nun wirklich nicht davon ausugehen, dass du eine Frage ernst meinst, die du dir im Satz zuvor bereits beantwortet hattest.
MfG, at
-
-
-