Zur Navigation

Css-Konfiguration

1 Stefan (Gast)

Hallo miteinander,
ich möchte mit
<div class="button">
<a href="a-index.htm">A</a>
für ein alphabetisches Index die "Buttons" schön gestalten.
In MSIE sieht es ja auch schön aus, aber bei Firefox sind die Abstände zwischen dem Button o und i unterschiedlich, und wenn dann die Buchstaben (A bis Z) untereinander stehn, sieht das erbärmlich aus. Was muss ich noch hinzufügen, damit das bei Firefox auch gut aussieht?

Folgende css-Konfiguration habe ich gemacht:

.button a {
width:20;
padding:3;
font-family: Arial, sans-serif;
font-size:14px;
text-transform:;
font-weight:bold;
text-align:center;
letter-spacing:0px;
text-decoration:none;
color:#000000;
background-color:#FFB2FD;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}

Vielen Dank im Voraus
Stefan

15.11.2006 10:40

2 Jörg Kruse

Hallo Stefan,

zwei Änderungen sind wohl erforderlich, damit Firefox und auch Opera die Buttons gleich breit anzeigen:

1. für die Angaben width und padding fehlen die Maßeinheit px.

2. Die Angabe width ist bei Inline-Elementen, wie z.B. einem <a>, wirkungslos; wenn du eine Monospace-Schriftart verwendest, wie z.B. Courier, werden die Buchstaben aber alle gleich breit angezeigt, so dass auch die Buttons gleich breit sind

.button a {
padding:3px;
   width:30px;
   font-family:Courier, monospace;
   font-size:14px;
   text-transform:;
   font-weight:bold;
   text-align:center;
   letter-spacing:0px;
text-decoration:none;
color:#000000;
   background-color:#FFB2FD;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}

15.11.2006 11:07 | geändert: 15.11.2006 11:14

3 Stefan (Gast)

Tausend Dank,
sieht wunderbar aus :-)
sonnige Grüße aus dem Breisgau
Stefan

15.11.2006 11:26

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]