Autor |
Nachricht |
Lether Face
Threadersteller
Dabei seit: 18.08.2005
Ort: Dresden
Alter: 38
Geschlecht:
|
Verfasst Do 01.09.2005 18:51
Titel Rolloverbuttons via CSS-Pseudoformat |
|
|
Hi,
Befasse mich momentan mit CSS, und hab mir so beim lesen überlegt ob nicht Rolloverbuttons via CSS zu realisieren sind. Was haltet ihr davon? Hat das schonmal einer von euch gemacht? Weis einer vielleicht ob das irgendwelche Vorteile bringt?
THX im Vorraus.
|
|
|
|
|
Anti78
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
Verfasst Do 01.09.2005 19:20
Titel
|
|
|
Code: | <style>
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button_on.gif); }
</style> |
Die Methode für grafische Buttons funzt nur in den ganz neuen Browsern (Version 6). Probleme bei CSS bereitet allgemein immer Netscape 4. Dieser Browser interpretiert a:hover nicht. Aufgrund seiner sehr schlechten Stylesheet-Implementation kann es sogar passieren, dass Netscape 4 die Links so stark verunstaltet, dass sie nicht mehr benutzbar sind
|
|
|
|
|
Anzeige
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 01.09.2005 20:15
Titel
|
|
|
nein wie schlimm.
wer in einer für deutsche verhältnisse relevanten zielgruppe benutzt sowas denn heutzutage noch bitte?
google mal nach 'css rollover image' lether face.
|
|
|
|
|
elm4ward
Dabei seit: 07.12.2002
Ort: munich
Alter: 42
Geschlecht:
|
Verfasst Do 01.09.2005 20:17
Titel
|
|
|
es geht sogar noch schöner als mit 2 getrennten grafiken
a{background: url(button.gif) no-repeat;}
a:hover{background-: url(button.gif) no-repeat 0 20px;}
setze beide zustände in eine grafik ... ist wesentlich eleganter...
zu ns4
...tut mir leid aber ich denke dass zu viele menschen zu sehr an der vergangenheit
klammern,,,,,
würden endlich alle webentwickler aufhören nach dem ns4 zu fragen hätte ihn keiner mehr..
und wenn du mit @import url arbeitest hat der ns 4 eh kein stylesheet ...
ad acta....
|
|
|
|
|
Anti78
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
Verfasst Do 01.09.2005 20:17
Titel
|
|
|
Will mir nicht nachsagen lassen, dass ich ihn nicht darauf hingewiesen habe.
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Fr 02.09.2005 09:16
Titel
|
|
|
elm4ward hat geschrieben: |
würden endlich alle webentwickler aufhören nach dem ns4 zu fragen hätte ihn keiner mehr..
|
Ich vermute mal, dass die meisten NS4 User, die in Statistiken auftauchen, einfach nur Webdesigner sind, die mal schauen wollten wie eine fremde Seite unter NS4 aussieht...
|
|
|
|
|
way2hot
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Fr 02.09.2005 09:29
Titel
|
|
|
elm4ward hat geschrieben: | es geht sogar noch schöner als mit 2 getrennten grafiken
a{background: url(button.gif) no-repeat;}
a:hover{background-: url(button.gif) no-repeat 0 20px;}
setze beide zustände in eine grafik ... ist wesentlich eleganter...
zu ns4
...tut mir leid aber ich denke dass zu viele menschen zu sehr an der vergangenheit
klammern,,,,,
würden endlich alle webentwickler aufhören nach dem ns4 zu fragen hätte ihn keiner mehr..
und wenn du mit @import url arbeitest hat der ns 4 eh kein stylesheet ...
ad acta.... |
Standardprogramm bei mir, sehr empfehlenswert. Dadurch hast du dann auch keine Verzögerung (bei langsameren Verbindungen) beim Laden des hover-Zustandes, denn es wird ja nur das bereits vollständig geladene Bild hinter der "Maske" (so könnteman es umschreiben) hin und her geschoben. Und NS4-Nutzer sehen dann halt gar kein CSS
Zuletzt bearbeitet von way2hot am Fr 02.09.2005 09:30, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anti78
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
Verfasst Fr 02.09.2005 09:47
Titel
|
|
|
elm4ward hat geschrieben: | es geht sogar noch schöner als mit 2 getrennten grafiken
a{background: url(button.gif) no-repeat;}
a:hover{background-: url(button.gif) no-repeat 0 20px;}
. |
Hm, bei mir bleibt der Link blau und unterstrichen und die Grafik sieht man immer.
Wie muss ich das denn ins HTML einsetzen?
|
|
|
|
|
|
|
|