nicht angemeldet opi
opi
opi
opi
opi
opi
Gernot Back
opi
Hallo,
wie kann ich einen Buttontext zentrieren?
Dieses Beispiel funktioniert leider nicht:
.button {
width:30em;
height:1em;
text-align:center;
}
<button class="button" name="Action" type="submit" value="Submit">
Zentrierter Text
</button>
Was mache ich da falsch?
Greez,
opi
Hallo opi.
wie kann ich einen Buttontext zentrieren?
Das ist standardmäßig der Fall.
Dieses Beispiel funktioniert leider nicht:
.button {
width:30em;
height:1em;
text-align:center;
}
Logisch, der Text ist standardmäßig zentriert und lässt sich auch auf diese Weise nicht ausrichten.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
[30 Days to becoming an Opera8 Lover](http://tntluoma.com/opera/lover/8/) -- [Day 16: Sessions](http://operalover.tntluoma.com/8/day_16_sessions)
Meine Browser: Opera 8.0 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
Hallo,
Logisch, der Text ist standardmäßig zentriert und lässt sich auch auf diese Weise nicht ausrichten.
ja ich weiß, aber ich möchte dem Button eine bestimmte Länge zuweisen, deshalb ja die width Angabe. Beispiel:
---------------------------------
| zentrierter Text |
---------------------------------
---------------------------------
| noch einer |
---------------------------------
Wenn ich widht nicht angebe, dann liegt der Text direkt am Rand des Buttons!
------------------
|zentrierter Text|
------------------
------------
|noch einer|
------------
Das schaut scheusslich aus, vor allem, wenn ich mehrere Buttons untereinander habe, die alle die gleiche Länge haben sollen!
Wie kann ich den Text trotz allem zentrieren? Padding kann ich leider nicht verwenden, da sich die Ränder rechts und links an der Textlänge widerrum orientieren.
Greez,
opi
Hallo opi.
Das schaut scheusslich aus, vor allem, wenn ich mehrere Buttons untereinander habe, die alle die gleiche Länge haben sollen!
Dann gibst du eben für alle Buttons eine min-width an.
Für den IE bedarf es dann wiederum ein normales width. Es könnte dann also etwa so aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
button{min-width:15em;}
* html button{width:15em;}
</style>
</head>
<body>
<form action="" method="post">
<p><button>TEST 1</button></p>
<p><button>ETWAS MEHR BEI TEST2</button></p>
</form>
</body>
</html>
Gruß, Ashura
Hallo,
<style type="text/css">
button{min-width:15em;}
* html button{width:15em;}
</style>
aber gilt dies nicht für alle Buttons? Was aber, wenn ich beispielsweise 5 Buttons mit einer Länge von 10em und weitere 5 mit einer Länge von 10em habe? Deshalb versuche ich dies ja auch über eine Klasse.
Greez,
opi
Hallo opi.
aber gilt dies nicht für alle Buttons?
In meinem Beispiel ja.
Was aber, wenn ich beispielsweise 5 Buttons mit einer Länge von 10em und weitere 5 mit einer Länge von 10em habe?
Dann hast du 10 Buttons, die alle eine Breite von 10em haben.
Deshalb versuche ich dies ja auch über eine Klasse.
Wo ist das Problem?
Gruß, Ashura
Hallo,
Deshalb versuche ich dies ja auch über eine Klasse.
Wo ist das Problem?
das der Text dann nicht mehr zentriert ist, sondern linksbündig.
Greez,
opi
Hallo opi.
das der Text dann nicht mehr zentriert ist, sondern linksbündig.
Das bezweifle ich.
Wie sieht dein momentaner Code aus? (Bitte möglichst verlinken.)
Gruß, Ashura
Hallo,
Das bezweifle ich.
es ist tatsächlich so! Allerdings muss ich dazu schreiben - sorry das ich es nicht schon zu Anfang erwähnt habe -, wird der Text nur mit Opera nicht zentriert angezeigt. Mit Firefox schon!
Wie sieht dein momentaner Code aus?
.button {
width:5em;
height:1.8em;
font-size:0.8em;
background-color:#AAAAAA;
color:#000000;
text-align:center;
}
.bigbutton {
width:20em;
height:1.8em;
font-size:0.8em;
background-color:#AAAAAA;
color:#000000;
text-align:center;
}
<button class="bigbutton" type="submit" name="Action" value="ShowForAdd">Add a new user</button>
(Bitte möglichst verlinken.)
Das geht leider nicht. Es ist ein internes (Intranet) Projekt.
Greez,
opi
Hallo opi.
es ist tatsächlich so! Allerdings muss ich dazu schreiben - sorry das ich es nicht schon zu Anfang erwähnt habe -, wird der Text nur mit Opera nicht zentriert angezeigt. Mit Firefox schon!
Ich bin überzeugter Opera-Nutzer und bei mir wird jeglicher Klickbuttontext, ob mittels input- oder button-Element erzeugt, zentriert angezeigt.
In meinem FF sowieso. (Der Vollständigkeit halber: im IE auch.)
.button {
width:5em;
height:1.8em;
font-size:0.8em;
background-color:#AAAAAA;
color:#000000;
text-align:center;
}
Ich sehe in deinem gleich folgenden HTML-Code nirgends ein Element mit der Klasse button, woraus sich schließen lässt, dass dieser CSS-Code hier irrelevant ist.
> ~~~css
.bigbutton {
> width:20em;
> height:1.8em;
> font-size:0.8em;
> background-color:#AAAAAA;
> color:#000000;
> text-align:center;
> }
»»
<button class="bigbutton" type="submit" name="Action" value="ShowForAdd">Add a new user</button>
Ich habe nun spaßenshalber exakt diesen Code angewandt und der Text ist und bleibt zentriert.
Ich kann dein Problem beim besten Willen nicht nachvollziehen.
Gruß, Ashura
Hallo,
Ich bin überzeugter Opera-Nutzer und bei mir wird jeglicher Klickbuttontext, ob mittels input- oder button-Element erzeugt, zentriert angezeigt.
Bei mir leider nicht! Mit IE, Firefox und mit Mozilla funktioniert es, nur nicht mit Opera. Obwohl bei mir das input-Element auch immer zentriert angezeigt wird, nur halt nicht das button-Element.
Mein Opera:
Version 7.54
Build 3870
Plattform Win32
Betriebssystem Windows NT 4.0
Hier meine originalen Testskripte.
button.css
.bigbutton {
width:40em;
height:1.8em;
font-size:0.8em;
background-color:#AAAAAA;
color:#000000;
text-align:center;
}
button.cgi
#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "<html>\n";
print "<head>\n";
print " <title>Button Test</title>\n";
print " <link rel=\"stylesheet\" type=\"text/css\" href=\"/css/button.css\">\n";
print "</head>\n";
print "<body>\n";
print "<form action=\"#\">\n";
print " <button class=\"bigbutton\" type=\"submit\" name=\"Action\" value=\"ShowForAdd\">Add a new user</button>\n";
print "</form>\n";
print "</body>\n";
print "</html>\n";
Ich kann dein Problem beim besten Willen nicht nachvollziehen.
Nun ja, weil es in deinem Browser funktioniert!
Greez,
opi
Hallo opi,
wahrscheinlich bist du mein Alter (42) oder könntest schlimmstenfalls mein Papi sein.
Vielleicht solltest du auch mit einer Kombination aus padding-right und padding-left (jeweils 50%) und einer max-width arbeiten:
http://forum.de.selfhtml.org/archiv/2005/6/t108753/#m678730
Gruß Gernot
Hallo Gernot,
wahrscheinlich bist du mein Alter (42) oder könntest schlimmstenfalls mein Papi sein.
der liebe Gott bewahre mich. Ich zähle 29 Jahre und mein Spitzname opi rührt daher, dass ich seit jeher der Älteste meines Jahrgangs war.
Vielleicht solltest du auch mit einer Kombination aus ...
Glücklicher Weise tritt das Problem nicht mehr mit einer neueren Opera Version auf, somit habe ich beschlossen, auf den 20 Clients, die davon betroffen sind, Opera 8 zu installieren. Vielleicht werde ich mich auch mal an Firefox versuchen...
Bis dann und danke für deinen Rat.
Greez,
opi
Hallo.
Vielleicht solltest du auch mit einer Kombination aus padding-right und padding-left (jeweils 50%) und einer max-width arbeiten:
Ich hatte gerade ein sehr ähnliches Problem, nämlich dass ein <input> entweder in Firefox oder in Opera über seinen Container hinausragte, wenn ich nicht die etwas seltsam anmutende Kombination width: 100%; max-width: 100%; verwendete.
Jetzt muss ich nur noch einen Weg finden, Opera dazu zu bringen, font-variant: small-caps; und text-transform: lowercase; sowie padding oder text-indent auf ein <input type="text"> anzuwenden. Irgendwelche sachdienlichen Hinweise?
MfG, at
Hallo at,
Irgendwelche sachdienlichen Hinweise?
Ob ich da heute noch zu komme ... ?
Morgen weiß ich aufgrund einer gesellschaftlichen Verpflichtung erst recht nicht!
Ich werde mich aber bei nächster Gelegenheit persönlich um dich kümmern!
Gruß Gernot
Hallo.
Morgen weiß ich aufgrund einer gesellschaftlichen Verpflichtung erst recht nicht!
Frack oder Smoking? -- Nur damit ich, ob wir die gleiche meinen.
Ich werde mich aber bei nächster Gelegenheit persönlich um dich kümmern!
Die Gelegenheit rückt näher ...
MfG, at
Hallo at,
Frack oder Smoking?
Ich tu mir bei sowas ja keinerlei Zwang an!
Gruß Gernot
Hallo at,
habe mal ein bisshen rumexperimentiert und kam zu dem Schluss:
font-variant, padding und/oder text-indent kannst du zumindest bei Opera 7.54 in Bezug auf <input type="text"> vergessen, text-transform: lowercase; ist da hingegen kein Problem.
Das Padding kannst du für Opera simulieren, wenn du stattdessen einen entsprechenden Margin auf das Input-Feld anwendest, es seines Rahmens beraubst und diesen stattdessen einem Elternelement zuweist. (Lass es das Form-Element sein oder ein zwischengeschaltetes DIV, das du floaten lässt.)
Bei Input-Elementen scheint Opera total zu spinnen: Zum Ausblenden des Rahmens bei Input-Elementen braucht er nicht etwa border:none sondern border-width:0 in Verbindung mit irgendeinem border-style außer none! Diesen Mist machen dann sogar der IE6 und Mozilla1.7.2 gnädigerweise mit. Verrückt, nicht wahr?
<html>
<head>
<title>Atfeld</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
[code lang=css]
.mantel {
border:solid 1px black;
float:left;
}
.atfeld {
text-transform:lowercase;
margin-left:5em;
border:solid 0;
}
</style>
</head>
<body >
<form class="mantel" action="" method="" target="">
<input class="atfeld" type="text" name="eingabe" value="Hallo" size="20" maxlength="20" />
</form>
</body>
</html>
[/code]
Gruß Gernot
Hallo.
font-variant, padding und/oder text-indent kannst du zumindest bei Opera 7.54 in Bezug auf
<input type="text">vergessen,text-transform: lowercase;ist da hingegen kein Problem.
Ja, nur leider bewirkt text-transform: lowercase; ohne font-variant: small-caps; eben nur Kleinbuchstaben und keine verkleinerten Großbuchstaben. Dann werde ich wohl doch text-transform: uppercase; in Verbindung mit einer kleineren Schriftgröße nehmen müssen. Echte Kapitälchen hat ja ohnehin kaum jemand, so dass sie meist nur auf die gleiche Weise emuliert werden.
Das Padding kannst du für Opera simulieren, wenn du stattdessen einen entsprechenden Margin auf das Input-Feld anwendest, es seines Rahmens beraubst und diesen stattdessen einem Elternelement zuweist. (Lass es das Form-Element sein oder ein zwischengeschaltetes DIV, das du floaten lässt.)
Dann hätte ich zwei weitere Baustellen: Erstens müsste ich den :hover-Effekt der beiden Elemente zusammenlegen, damit auch der linksbündig abschließt, aber das ließe sich ja mittels eines weiteren umgebenden Elementes bewerkstelligen. Aber zweitens müsste ich mittels Javascripft dafür sorgen, dass ein Klick auf die neue <input>-Erweiterung den Cursor in das Feld setzt. -- Vielleicht sind da ein, zwei vorangestellte Leerzeichen ein schlechter Ersatz, aber einer, der mich davor schützt, mich auch noch mit Javascript zu befassen.
Bei Input-Elementen scheint Opera total zu spinnen: Zum Ausblenden des Rahmens bei Input-Elementen braucht er nicht etwa border:none sondern border-width:0 in Verbindung mit irgendeinem border-style außer none!
Ersatzweise funktioniert auch border: hidden;, aber auch darauf muss man erst einmal kommen.
Diesen Mist machen dann sogar der IE6 und Mozilla1.7.2 gnädigerweise mit. Verrückt, nicht wahr?
Mit Mozilla habe ich in diesem Zusammenhang ohnehin noch ein anderes Problem:
input[type=text]:hover
{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: -1px 0;
}
So verschieben sich die folgenden Elemente in Firefox, während sich border und der negative margin in Opera wunschgemäß ausgleichen.
Aber vielen lieben Dank für deine Mühe.
MfG, at
Hallo Ashura,
ich habe gerade auf einem Test-PC die Opera Version 8 installiert und der Buttontext wird nun zentriert angezeigt. Mit meiner 7er Version bleibt es dabei... der Text wird nicht korrekt ausgerichtet.
Danke für deine Mühe.
Greez,
opi