PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Grafik-Hoverbuttons mit CSS: Problem mit DocType

tomtom
2005-05-26, 16:40:37
Hallo Leute!

--------------------------------------------------------
Edit: Hab den Code geändert und vervollständigt - falls es wer benötigt. Sieht dann wie folgt aus und funktioniert jetzt auch mit DocType:
Edit2: Vielen Dank an Aqualon! - funktioniert nun auch mit Mozilla (Files geändert!)
http://www.w3fx.de/hover/hover3.html

Hier das Code-Package zum Download:
http://www.w3fx.de/hover/graphic_hover_css.zip
--------------------------------------------------------

Hab mir heute mal zum Ziel gesetzt, Grafik-Hoverbuttons mit CSS anstatt JavaScript zu realisieren.

Dies hat folgende Vorteile:


Es funktioniert ohne JS, sollte also von jedem so halbwegs modernen Browser angezeigt werden können.
Da ich den normalen Buttonstate, sowie den Hoverstate in einer Grafik habe (die wird beim hovern einfach verschoben, siehe Code unten), gibt es keine Ladeverzögerungen zwischen dem normalen Buttonstate und dem Hoverstate.


Die Grafik für den Button sieht wie folgt aus:
http://www.w3fx.de/hovertest/show_news_asc.gif
Diese wird dann beim hovern einfach verschoben!

Alles schön und gut. Es funktioniert auch ganz toll - getestet mit Opera und IE. Es funktioniert aber nur solange kein DocType in der HTML Datei angeführt ist (egal ob Transitional oder Strict).

Beispielseite ohne DocType:
http://www.w3fx.de/hovertest/hover1.html

Beispielseite mit DocType:
http://www.w3fx.de/hovertest/hover2.html

Hier mal der Code:
- HTML File:

<!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">
<link rel="stylesheet" type="text/css" href="w3csheet.css">
<title>hover test</title>
</head>
<body>
<a class="nasc" href="#">&nbsp;</a>
</body>
</html>


- Stylesheet:

a.nasc:link {background: url(show_news_asc.gif) 0% 100% no-repeat; width: 22px; line-height: 19px; font-size: 0pt; text-decoration: none}
a.nasc:visited {background: url(show_news_asc.gif) 0% 100% no-repeat; width: 22px; line-height: 19px; font-size: 0pt; text-decoration: none}
a.nasc:activated {background: url(show_news_asc.gif) 0% 100% no-repeat; width: 22px; line-height: 19px; font-size: 0pt; text-decoration: none}
a.nasc:hover {background: url(show_news_asc.gif) 100% 0% no-repeat; width: 22px; line-height: 19px; font-size: 0pt; text-decoration: none}

Habt ihr sowas schon mal gemacht? Ich probier da jetzt schon ne Zeit lang rum, komme aber zu keinem positiven Ergebnis...und ein DocType in der Seite wär schon was Tolles, zumal sonst alles in HTML Strict geschrieben ist :rolleyes:

Wäre dankbar für eure Hilfe! Vielen Dank,
MfG, terminator2k3
Gast
2005-05-26, 16:49:17
display block kann wunder wirken ;D
Gast
2005-05-26, 16:52:36
a.navi:link, a.navi:visited {text-align:center;text-decoration:none;display:block;color:#999;font-weight:bold;background-color:#300;border:1px solid #999;}
a.navi:hover, a.navi:active {text-align:center;text-decoration:none;display:block;color:#FFF;font-weight:bold;background-color:#600;border:1px solid #FFF;}

das sind meine buttons falls es hilft
Gast
2005-05-26, 16:54:29
hzups ich hätte alles lesen sollen xD sorry
tomtom
2005-05-26, 16:54:38
display block kann wunder wirken ;D
Stimmt!!! Danke sehr. Außerdem hab ich den Hauptfehler auch schon gefunden^^ Schon blöd wenn man zum Schluss im Stylesheet die Strichpunkte weglässt :uhammer2:

Danke &@Mods: bitte schließen/löschen or whatever....thx

MfG, terminator2k3
Hardwaretoaster
2005-05-26, 17:46:36
:confused: Ich hatte das auch schon mal vor, jetzt hab' ich das hier gesehen, aber die Seiten, die der threadstarter erstellt hat, sind bei mri nur weiß, sind die schon wieder verändert?
Edit: Hat sich erledigt, war geblockt.
tomtom
2005-05-26, 18:22:06
Hab meinen ersten Post oben geändert und Links zum funktionierenden Hoverbutton (auch mit DocType) angegeben (auch als zip-File verfügbar) - falls es wer haben will... wurde aber nur mit Opera und IE getestet. Hoffe es funzt auch mit Mozilla.

MfG terminator2k3
Aqualon
2005-05-26, 18:36:46
In Mozilla geht das nicht, wenn du font-size=0pt; drin hast. Nimm das raus, dann sollte es auch da gehen.

Aqua
tomtom
2005-05-26, 19:00:34
Super, danke...werds gleich mal abändern!
MfG