Hallo!
So etwas habe ich gerade fertiggestellt. ;-)
Ich habe insgesamt 4 CSS-Dateien:
1. Standard CSS 1 f�r alle Browser ab 4
2. Schriftgr��en f�r Windows (96 dpi)
3. Schriftgr��en f�r Mac, Linux (72 dpi)
4. Effekte f�r moderne Browser
Jetzt das wichtigste zur Kompatibilit�t:
Es wird immer Standard-HTML gesetzt. Ein Link ist also immer '<a
href="...">' und auch in Formularen werden Buttons immer mit '<input
type="submit">' erstellt. So gibt es keine Kompatibilit�tsprobleme.
Jede HTML-Datei referenziert 2 CSS-Dateien, n�mlich die Standard-Formate
sowie die Schriftgr��en abh�ngig vom Betriebssystem. Die Effekte f�r die
modernen Browser werden in der Standard-CSS-Datei mit "@import url(...)"
inkludiert. Den Import-Befehl verstehen eh nur moderne Browser.
Jetzt zu den Buttons:
Normale Links werden mit '<a class="button" href="...">' und CSS zu
sch�nen Buttons:
a.button
{ border-top : 1px solid #EEEEEE; border-right : 1px solid #EEEEEE;
border-bottom : 1px solid #EEEEEE; border-left : 1px solid #EEEEEE;
margin : 2px 2px; padding : 3px 12px; text-align : center; display :
block; }
a.button:link, a.button:visited
{ color : #2A475E; background-color : #EEEEEE; }
a.button:hover, a.button:active
{ color : #FF3333; background-color: #E6E6E6; border-top : 1px solid
#F7F7F7; border-right : 1px solid #999999; border-bottom : 1px solid
#999999; border-left : 1px solid #F7F7F7; }
Also zun�chst die Grundformatierung in a.button und dann die
Ver�nderungen abh�ngig vom Status visited, hover oder active
Die Formularbuttons gestalte ich dagegen zus�tzlich mit "Inline-CSS", da
jeder Button ein eigenes Hintergrundbild bekommt.
<input class="fbutton" type="submit" name="insert" value=" Hinzuf�gen"
title="..." width="120"
style="background-image:url(...);background-repeat:no-repeat;background-
position:1px 1px;width:120px;">
title= wird nur vom IE interpretiert.
Width= wird nur vom NN interpretiert.
In der Standard-CSS k�nnen f�r die Klasse "fButton" noch Farben
definiert werden.
Probier es mal aus!
Freundliche Gr��e
Joachim van de Bruck
| [aspgerman] als [email protected] subscribed
| http://www.aspgerman.com/archiv/aspgerman/ = Listenarchiv
| Sie k�nnen sich unter folgender URL an- und abmelden:
| http://www.aspgerman.com/aspgerman/listen/anmelden/aspgerman.asp
