Link mit abgerundeter Umrahmung erstellen

[Joerg1977]

Hallo,

Ich würde gerne einen Link erstellen, bei dem der Text umrahmt ist und zwar mit abgerundeten Ecken. Als Beispiel nachstehend eine kopierte Grafik.



Das ccs dafür würde ich (in diesem Fall) aber direkt im html-file rein schreiben wollen und nicht separat auf einem stylesheet. Wäre toll wenn mir da jemand helfen könnte :-)

Liebe Grüße,

Jörg

 

[Sempervivum]

Informiere dich über CSS border-radius, damit kannst Du die Aufgabe lösen. Und wo Du das CSS notierst, ist einerlei, ob inline oder in einer getrennten Datei:
http://de.selfhtml.org/css/formate/direkt.htm

 

[Joerg1977]

Ok den abgerundeteten Rahmen habe ich jetzt hingekriegt, über einen DIV und zwar so:

div#verweisbutton {
width: 150px;
height: 30px;
border: solid 2px #FF8D00;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

was ich aber nicht schaffe ("programmiere" nur selten) ist den Text in diesem DIV vertikal UND horizontal zu zentrieren. So wie es jetzt da steht ist, der Text nur horizontal zentirert.

Wie muss ich es richtig schreiben? Was fehlt?

 

[Joerg1977]

habs soeben herausgefunden. habe noch nachfoglendes eingefügt:

display: table-cell; vertical-align: middle;

jetzt ist es so wie ich es haben möchte :)

 

[Flemli200]

du brauchst do gar keinen div...
Kannst doch auch direkt den link formatieren...
Ungetestet:
a {
border: 2px solid #FF8D00;
border-radius: 10px;
text-align: center;
padding: 10px;
}

 

[Joerg1977]

Funktioniert bei mir nicht, da kommt kein Rahmen :-(

 

[Joerg1977]

Funktioniert doch! Habe den Browsercache nicht gelöscht gehabt ;-) Prima! Eine noch elegantere Lösung!