Beschriftung bei <input> zentrieren?
0 0 Geht nur bei Block Elemente
0 0 0 0 0 0 0 0 
at
0
Beschriftung bei <input> zentrieren?
Hallo zusammen,
ich versuche nun schon eine Weile alles möglich aber komme doch auf keine gute Lösung.
Ein Input Element mit Label:
<input name="image_test" id="image_test" type="image" src="image/jobtk/jobinfo.gif" alt="test" title="test" />
<label for="image_test">Testbutton</label>
Mit CSS und display:block ist die Beschriftung unterhalb.
input{
display:block;
}
Gibt es irgend eine Lösung wie man das Input Bild immer mittig zur Beschriftung unten bekommt?
Ich habe es schon mit einem zusätzlichen <div> und text-align:center versucht. Aber das wirkt sich hier ja nicht aus.
Dann zusätzlich ein margin-left:1em;
input{
display:block;
margin-left:1em;
}
Das schiebt zwar das Input etwas nach rechts, aber sobald man die Schriftgrösse ändert, sieht das auch nicht gut aus.
Die beste Lösung wäre vermutlich das alte "style:align=center" aber das soll man ja nicht mehr verwenden.
Hat jemand eine Idee?
vielen Dank und viele Grüße
hawk
-
Gibt es irgend eine Lösung wie man das Input Bild immer mittig zur Beschriftung unten bekommt?
Versuche das (ungetestet):
<label>
<input type="image"><br>
Labeltext
</label>Das Label-Element darf auch das betreffende Formular-Element beinhalten.
Jetzt solltest du im CSS in der Lage sein:
label {
display:block;
text-align:center;
margin: 0 auto;
width:10em;
}Damit wird zentrierte Ausrichtung auf input und labeltext angewendet.
mfg Beat
-
Hallo Beat,
erst mal danke für deinen Vorschlag.
So was habe ich auch schon versucht mit einem umschliessenden DIV.Das Problem ist aber:
Das "text-align:center" wirkt sich weder auf das Label Element noch auf das Input Element aus. Es funktioniert nur bei Block Elementen und diese beide sind Inline Elemente.
So habe ich es zumindest in den Spezifikationen gelesen und verstanden.Gruss
hawk-
input{
display:block;
}
Das "text-align:center" wirkt sich weder auf das Label Element noch auf das Input Element aus. Es funktioniert nur bei Block Elementen und diese beide sind Inline Elemente.display: block; hört sich für mich schon fast wie block-element-verhalten an
-
Hallo suit,
display: block; hört sich für mich schon fast wie block-element-verhalten an
ich verstehe nicht ganz was du mir sagen willst?
Ist es nicht so das ein <input> ein Inline Element ist?
Und das "display:block" sorgt doch nur das die Label Beschriftung unterhalb ist oder?
Ich lasse mich gerne korrigieren wenn ich falsch liege?vielen Dank und viele Grüße
hawk-
Ist es nicht so das ein <input> ein Inline Element ist?
Es ist besser, das Input Element als Formular-Element zu betrachten, statt es stur nach Block oder Inline zu behandeln.
Und das "display:block" sorgt doch nur das die Label Beschriftung unterhalb ist oder?
Ich lasse mich gerne korrigieren wenn ich falsch liege?display:block auf <input> angewendet aktiviert Block-Eigenschaften des Elements input. Das Einfügen eines Umbruches am Anfang und am Ende ist eine Eigenschaft der Blockelemente.
Die CSS Eigenschaft float:left erzeugt implizite Blockeigenschaft.Ansonsten ist ein Inputfeld per Browser-Default ein nicht ganz astreines Inline Element.
Einige Formular-Element sprechen auf width und height an, ohne dass sie als Blockelemente im CSS deklariert sind. Die Verfügbarkeit ist bei <input type=checkbox> zum Beispiel eher zufällig nach Browser.(Streng genommen ein Feature, oder ein lausiger CSS Standard)
mfg Beat
-
Hallo Beat,
danke dir für die Erklärung.display:block auf <input> angewendet aktiviert Block-Eigenschaften des Elements input.
Die CSS Eigenschaft float:left erzeugt implizite Blockeigenschaft.Das war mir so nicht bewusst. Bedeutet also, das aus einem Inline Element durch die CSS Eigenschaft ein Block Element werden kann?
Nochmals zu deinem Beispiel.
Also das funktioniert jetzt tatsächlich gut so, wenn ich die Label auch um die Inputs packe.
-------------------------------------
label {
display:block;
text-align:center;
/*
margin: 0 auto;
width:10em;
*/
}
<label for="image_test">
<input name="image_test" id="image_test" type="image" src="image/jobtk/jobinfo.gif" alt="test" title="test" />
<br />
Testbutton
</label>Was mir nicht ganz einleuchtet:
Warum wird der komplette Label (also Label und Input) auf einer leeren HTML Seite in der Mitte zentriert?
Ich dachte es ist linksbündig und das "text-align:center;" wirkt sich nur auf den Label Inhalt aus?vielen Dank und viele Grüße
hawk-
Yerf!
Das war mir so nicht bewusst. Bedeutet also, das aus einem Inline Element durch die CSS Eigenschaft ein Block Element werden kann?
Ja, allerdings nur aus CSS-Sicht. Man kann damit nicht die HTML-Regeln zur Verschachtelung von Block- und Inline-Elementen umgehen (z.B. ein <div style="display:inline"> darf trotzdem nicht in einem <p> stehen).
Was mir nicht ganz einleuchtet:
Warum wird der komplette Label (also Label und Input) auf einer leeren HTML Seite in der Mitte zentriert?
Ich dachte es ist linksbündig und das "text-align:center;" wirkt sich nur auf den Label Inhalt aus?Du hast in dem Beispiel die Angabe einer Breite für den Label auskommentiert. Allerdings ist eine der Eigenschaften eines Blockelementes das sie die maximal zur Verfügung stehende Breite einnehmen (sieht man am besten indem man mal einen Rahmen vergibt).
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Ich dachte es ist linksbündig und das "text-align:center;" wirkt sich nur auf den Label Inhalt aus?
Du hast in meinem Beispielcode das <input> Element als Inhalt des <label> Elements. Also wird es korrekt zentriert dargestellt, entsprechend deiner wohl ursprünglich erwünschten Eigenschaft.
-
-
Hi,
Ansonsten ist ein Inputfeld per Browser-Default ein nicht ganz astreines Inline Element.
Es ist per Definition ein replaced inline element, aehnlich wie bspw. ein Image.
Einige Formular-Element sprechen auf width und height an, ohne dass sie als Blockelemente im CSS deklariert sind.
Muessen sie ja auch nicht sein, s.o.
Die Verfügbarkeit ist bei <input type=checkbox> zum Beispiel eher zufällig nach Browser.
(Streng genommen ein Feature, oder ein lausiger CSS Standard)
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
-
-
[latex]Mae govannen![/latex]
Gibt es irgend eine Lösung wie man das Input Bild immer mittig zur Beschriftung unten bekommt?
Versuche das (ungetestet):
<label>
<input type="image"><br>
Labeltext
</label>Das Label-Element darf auch das betreffende Formular-Element beinhalten.
Wenn man auf die Funktionalität des label-Elements unter IE6 keinen Wert legt, dann kann man das machen.
Cü,
Kai
--
When the limos return for their final review, it's all thru'
- all they can see is the morning goo.
"There's no-one left alive - must be draw."
So the Blackcap Barons toss a coin to settle the score.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Das Label-Element darf auch das betreffende Formular-Element beinhalten.
Wenn man auf die Funktionalität des label-Elements unter IE6 keinen Wert legt, dann kann man das machen.
Seit wann bekümmern sich SpamBots um die Funktionalität von <label> Elementen?
<myoption date=today>
mfg Beat
-
[latex]Mae govannen![/latex]
Das Label-Element darf auch das betreffende Formular-Element beinhalten.
Wenn man auf die Funktionalität des label-Elements unter IE6 keinen Wert legt, dann kann man das machen.
Seit wann bekümmern sich SpamBots um die Funktionalität von <label> Elementen?
Dunkel ist deiner Rede Sinn ...
Cü,
Kai
--
When the limos return for their final review, it's all thru'
- all they can see is the morning goo.
"There's no-one left alive - must be draw."
So the Blackcap Barons toss a coin to settle the score.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Dunkel ist deiner Rede Sinn ...
Es gibt halt in Webtechnologien keine ewigen Wahrheiten.
mfg Beat
-
Hi,
Es gibt halt in Webtechnologien keine ewigen Wahrheiten.
Kannst trotzdem mal erklaeren was Spam Bots mit meinem IE 6 zu tun haben. Komm da auch nicht ganz hinter.
--
Sei froh dass du nen Virenscanner hast, der schlauer ist als du...-
Es gibt halt in Webtechnologien keine ewigen Wahrheiten.
Kannst trotzdem mal erklaeren was Spam Bots mit meinem IE 6 zu tun haben. Komm da auch nicht ganz hinter.
Dein MSIE6 ist doch ein Testbrowser, nicht der Browser, mit dem du in der Regel herum surfst.
Vielleicht nicht ein Spambot, aber sagen wir einfach: eine illusorisch veraltete Anforderung an den Code der Seite, die du besuchst/testest.Also solcher gehörst du/dein Agent nach Profil zu jener Regenschauer, die von meiner .htaccess je nachdem aussortiert werden muss.
mfg Beat
-
Hi,
Dein MSIE6 ist doch ein Testbrowser, nicht der Browser, mit dem du in der Regel herum surfst.
Nein. Es gibt hier nichts anderes.
Also solcher gehörst du/dein Agent nach Profil zu jener Regenschauer, die von meiner .htaccess je nachdem aussortiert werden muss.
Du meinst Du sortierst automatisch alle Angestellten eines der groessten internationalen Unternehmen aus? *kopfkratz* Ob das immer so schlau ist...
--
"Sei froh dass du nen Virenscanner hast, der schlauer ist als du..."
-
Hallo.
Du meinst Du sortierst automatisch alle Angestellten eines der groessten internationalen Unternehmen aus?
Nur während deren Arbeitszeit. Privat sind die wahrscheinlich gar nicht so doof.
MfG, at
-
-
Hi,
Es gibt halt in Webtechnologien keine ewigen Wahrheiten.
Aber teilweise die Moeglichkeit, mit ganz einfachen Zusaetzen abswaertskompatibel auch zu aelteren Browsern zu bleiben.
Also solcher gehörst du/dein Agent nach Profil zu jener Regenschauer, die von meiner .htaccess je nachdem aussortiert werden muss.
Du ersetzt also die Moeglichkeit, sinnvolles und abwaertskompatibles HTML zu schreiben, lieber durch eine nur bedingt ueberhaupt "funktionierende" Aussortierung auf HTTP-Ebene.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."-
Du ersetzt also die Moeglichkeit, sinnvolles und abwaertskompatibles HTML zu schreiben, lieber durch eine nur bedingt ueberhaupt "funktionierende" Aussortierung auf HTTP-Ebene.
Für mich selbst in diesem Falle ja,
weil der betroffene Sektor noch weit andere Anforderungen stellt.
Es geht nicht nur darum, dass die Sperrung von MSIE6 dort einen Teil der Spambot Requests verweigert, es geht auch darum, dass die Arbeitsleitung fr ein MSIE6 gerechtes CSS / HTML (im Falle des Labels) schlicht nicht mehr angebracht ist.
Nach MSIE 6 kam MSIE7 und für diesen könnte ich ein paar Dinge bereinigen, das ist eine andere Frage.Dass, um den Einwand von Steel anzunehmen, manche Leute hinter einem eisernem Vorhang keine Wahl haben, einen anderen Browser zu nehmen, nehme ich in Kauf, weil ich meine Seite eher für eine Freizeit-Angelegenheit ,denn als eine essentielle Dienstleistung betrachte.
Du wirst zulassen, dass hier verschiedene Prioritäten statthaft sind und ich nur meinen eigenen Fall vertrete.
Ich halte Webdesign, dass heute noch den proprietäre Wildwuchs in seinem Code berücksichtigen muss, nur dort für angebracht, wo eine Dienstleitung entweder unverzichtbar ist, oder kommerziell sich davon etwas verspricht.Damit genug für heute Abend.
mfg und Gute Nacht
-
Hi,
Es geht nicht nur darum, dass die Sperrung von MSIE6 dort einen Teil der Spambot Requests verweigert, es geht auch darum, dass die Arbeitsleitung fr ein MSIE6 gerechtes CSS / HTML (im Falle des Labels) schlicht nicht mehr angebracht ist.
Ein zusaetzliches for-Attribut einzufuegen, erfordert dermaszen viel der deinerseits zur Verfuegung stehenden "Arbeitsleistung"?
Da scheint mir doch fraglich, ob Leistung in diesem Falle eine angebrachte Bezeichnung ist.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."-
Ein zusaetzliches for-Attribut einzufuegen, erfordert dermaszen viel der deinerseits zur Verfuegung stehenden "Arbeitsleistung"?
Nein: Ein
<label for=input1><input name=input1></label>
ist immer dabei. Das war nicht die Frage. Ist das nicht HTML Standard auf den ich mich verlassen soll?
Habe ich die Aussage falsch verstanden?
hängt MSIE 6 wegen einem fehlenden for=
hangt MSIE6 wegen einem verschachtelten <label><input</label>
Beruht die ganze Diskussion hier auf etwas mangelhaft angedeutetem Beispiel?Aber ich werde meinen eigenen tok.pl Code bei nächster Gelegenheit nochmals überprüfen.
Sorry dass ich dich widerhole
Ein zusaetzliches for-Attribut einzufuegen, erfordert dermaszen viel der deinerseits zur Verfuegung stehenden "Arbeitsleistung"?
Ja und dann kommt das ganze andere Schlammassel, als ob mein Code nicht aus mehr als einem <label><input></label> bestünde.
Ich hatte einst einen MSIE6, heute abe ich MSIE7
ich bin nicht Webdesigner. Ich erlaube mir, nur zwei und einen halben Browser an Bord zu haben.
Was immer MSIE6 kann oder nicht kann, erachte ich fortan als ausserhalb meiner Erfahrungsreichweite stehend.Wieviele Browser brauche ich an Bord, bis ich den HTML-Führerschein erwerbe?
mfg Beat
-
Hi,
hängt MSIE 6 wegen einem fehlenden for=
Jepp.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
-
-
-
-
-
-
-
-