[joergi]

Hi,

ich bin gerade dabei, meine ehemaligen Grafik Buttons in CSS Buttons umzuwandeln (siehe Beispiel unten). Die Abfrage der Buttons funktioniert auch einwandfrei. Nur die Gestaltung bereitet mir Kopfzerbrechen.

Wenn ich auf den Button klicke, verschiebt sich der Text leicht nach rechts. Kann man das verhindern?

Der Text ist nicht vertikal zentriert. Habe es mit "vertical-align" und auch mit "padding" probiert. Gibt es eine andere Lösung?

Danke im voraus für Eure Hilfe

<style>
.taste
{
border:1px solid #000080;
display:inline-block;
color:#ff0000;
font-size:15px;
height:22px;
line-height:22px;
width:120px;
text-align:center;
cursor:pointer;
}
a.taste:link {color: #ff0000;}
a.taste:visited {color: #ff0000;}
a.taste:active {color: #ff0000;}
a.taste:hover {color: #ff0000;}
</style>
<input name="test" value="Beispiel" class="taste" type="submit">

[Toro]

Font-size 15px mit 22px line-height in einer box mit nur 22px Höhe wird den text nach unten drücken. Wenn du die Zeile mit line-height" raus nimmst, geht der Text vertical in die Mitte.

[joergi]

Hi Toro,

danke für die Antwort. Habe das ganze jetzt mal umgesetzt und es funktioniert einwandfrei. Was mir als CSS Laie aber auffällt ist, das sich die Größen unterscheiden. Siehe dazu die Beispiele 1-3, die mit derselben Klasse angesprochen werden und zudem auch teilweise keine vertikale Schriftzentrierung beinhalten. Einen gleichen Button erhält man nur, wenn man die Klasse ändert (siehe Beispiel 4 und 5). Ist das wirklich so, oder gibt es da einen Trick, mit dem die ersten drei Beispiele mit derselben Klasse ohne Größenunterschied angesprochen werden können?

Gibt es evtl. auch eine Lösung für meine zweite Frage? über "taste:active" kann man zwar eine weitere Klasse difinieren und z.B. die Textfarbe ändern. Aber das Problem mit dem leichten verrücken des Textes bei einem Klick bleibt.

<style>
.taste
{
font-family:Arial;
border:1px solid #000080;
display:inline-block;
color:#ff0000;
font-size:15px;
height:22px;
line-height:100%;
width:120px;
text-align:center;
cursor:pointer;
}

.taste2
{
font-family:Arial;
border:1px solid #000080;
display:inline-block;
color:#ff0000;
font-size:15px;
height:20px;
line-height:20px;
width:118px;
text-align:center;
cursor:pointer;
}

a.taste2:link {color: #ff0000;}
a.taste2:visited {color: #ff0000;}
a.taste2:active {color: #ff0000;}
a.taste2:hover {color: #ff0000;}
</style>
<input name="abfrage" value="Beispiel 1" class="taste" type="submit">
<br>
<a href="#"><div class="taste">Beispiel 2</div></a>
<br>
<div class="taste">Beispiel 3</div>
<br><br>
<a href="#"><div class="taste2">Beispiel 4</div></a>
<br>
<div class="taste2">Beispiel 5</div>

[Toro]

Deine klassen haben je verschiedene Breiten, Höhen und line-height. Da kommt natürlich was unterschiedliches bei raus.
Vielleicht versteh ich die Frage nicht so richtig, habe hier noch Beispiele

[joergi]

Hi Toro,

danke für die Beispiele. Ich habe das ganze mal nach meinen Bedürfnissen umgeschrieben und die Höhe auf 23px quasi geändert (15px+4px+4px). Jetzt bin ich leider auf einige andere offene Fragen gestoßen:

1. Der link zu "Beispiel 4" soll in grün erscheinen. Das funktioniert zwar. Aber ich würde gerne die Farbe der Klasse zuweisen. Leider funktioniert der folgende Code hier nicht:

a.taste {color: #ff0000;}
a.taste:link {color: #ff0000;}
a.taste:visited {color: #ff0000;}
a.taste:active {color: #0000ff;}
a.taste:hover {color: #ff0000;}
a.taste:focus {color: #ff0000;}

a.taste2 {color: #0db725;}
a.taste2:link {color: #0db725;}
a.taste2:visited {color: #0db725;}
a.taste2:active {color: #0db725;}
a.taste2:hover {color: #0db725;}
a.taste2:focus {color: #0db725;}

2. Wenn ich den Submit Button von "Beispiel 3" anklicke, verschiebt sich beim IE und FF der Text leicht nach rechts (unten). Dies ist wohl auch bei einem Submit Button so standardmäßig gewollt. Nur mich stört es. Kann man diese Verschiebung irgendwie neutralisieren?

<style>
    .taste {
    display: block;
	font-family:Arial;
	font-size:15px;
	background: #ffffff;
	color: #ff0000;
    padding-top: 4px;
	padding-bottom: 4px;
	width: 210px;
    border: 1px solid #000080;
    text-align: center;
	cursor:pointer;	
}
.taste:active {
 background: #ffff00;
}

    .taste2 {
    display: block;
	font-family:Arial;
	font-size:15px;
	background: #ffffff;
	color: #0db725;
    padding-top: 4px;
	padding-bottom: 4px;
	width: 210px;
    border: 1px solid #000080;
    text-align: center;
	cursor:pointer;	
}


a, a.link, a.focus { color: #ff0000; text-decoration: none;}
a2, a2.link, a2.focus { color: #0db725; text-decoration: none;}


</style>
   <a href="#"><div class="taste">Beispiel 1</a></div>
   <div class="taste">Beispiel 2</div>
   <input name="abfrage" value="Beispiel 3" class="taste" type="submit" />
   <br><br>
   <a2 href="#"><div class="taste2">Beispiel 4</a></div>