Button mit CSS

[meinereiner]

Ich möchte mit CSS einen Link als Button auszeichnen:

a.button:link {
  font-family: "Verdana", sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  color: #CCCCFF;
  background-color: #666699;
  border-width: 2px;
  border-color: #666699;
  border-style: outset;
       }

Wie kriege ich das hin, dass alle "Buttons" dieselbe Breite haben, unabhängig vom Text? Ich habe es schon mit widht probiert und auch mit margin, aber die Auszeichnung ist immer so breit wie der Text (+2px Rand) - hmmpf.

Wie geht das?

[André Laugks]

Hallo!

a.button:link {
  font-family: "Verdana", sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  color: #CCCCFF;
  background-color: #666699;
  border-width: 2px;
  border-color: #666699;
  border-style: outset;
       }

Der A-Tag ist ein Inline-Element, welches die Eigenschaft with nicht annehmen kann. Setze zusätzlich die CSS-Eigenschaft "display:block", somit wird ein Inline-Element zu einem Block-Element und kannst dafür die Eigenschaft "width" definieren.

André Laugks

[meinereiner]

Super,

vielen Dank, schon wieder was gelernt. Leider habe ich das so in SELFHTML nicht gefunden - schade!

[Engin]

Hi meinereiner,

Leider habe ich das so in SELFHTML nicht gefunden - schade!

http://de.selfhtml.org/css/layouts/navigationsleisten.htm

http://de.selfhtml.org/css/layouts/anzeige/nav_rollover.htm

Grüße,
Engin
 GYRO