Discussion:
Text und Checkbox auf Höhe ausrichten
(zu alt für eine Antwort)
André Hänsel
2004-07-14 17:25:35 UTC
Permalink
Folgender Aufbau:

<table>
<tr>
<td>Alice:</td>
<td><input type="checkbox"> Lala</td>
</tr>
<tr>
<td>Bob:</td>
<td><input type="checkbox"> Foo<br><input type="checkbox"> Bar</td>
</tr>
</table>

Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und "Foo"
auf gleiche Höhe?
Ralf Resack
2004-07-14 19:09:55 UTC
Permalink
[Tabelle mit verschieden großen Zellen]
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und "Foo"
auf gleiche Höhe?
mit td {vertical-align:top;}

http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap17.html#heading-17.5.3


Ralf
André Hänsel
2004-07-14 20:56:08 UTC
Permalink
Post by Ralf Resack
[Tabelle mit verschieden großen Zellen]
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und
"Foo" auf gleiche Höhe?
mit td {vertical-align:top;}
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap17.html#heading-17.5.3
Ralf
Würde Sinn machen, aber schau mal
http://webkr.de/sitestest/css/checkbox.htm
Benjamin Schwenk
2004-07-14 21:07:52 UTC
Permalink
Post by André Hänsel
Post by Ralf Resack
[Tabelle mit verschieden großen Zellen]
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und
"Foo" auf gleiche Höhe?
mit td {vertical-align:top;}
Würde Sinn machen, aber schau mal
http://webkr.de/sitestest/css/checkbox.htm
Ich empfehle da ein zusätzliches

input { margin-top: 0; margin-bottom: 0; }

im CSS.

Gruß
Benjamin
André Hänsel
2004-07-14 21:17:23 UTC
Permalink
Post by Benjamin Schwenk
Ich empfehle da ein zusätzliches
input { margin-top: 0; margin-bottom: 0; }
im CSS.
Ist eingebaut:
http://webkr.de/sitestest/css/checkbox.htm
Benjamin Schwenk
2004-07-14 22:04:39 UTC
Permalink
Post by André Hänsel
Post by Benjamin Schwenk
Ich empfehle da ein zusätzliches
input { margin-top: 0; margin-bottom: 0; }
im CSS.
http://webkr.de/sitestest/css/checkbox.htm
*seufz*

Das nächste mal bitte direkt bescheid geben, dass es um den Drecksbrowser IE
geht, das ist hier keineswegs selbstverständlich.

Wie wäre es mit

td { vertical-align: baseline; }

anstelle von

td { vertical-align: top; }

Hilft dir das?

Gruß
Benjamin
Ralf Resack
2004-07-14 21:18:52 UTC
Permalink
Post by André Hänsel
Post by Ralf Resack
Post by André Hänsel
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und
"Foo" auf gleiche Höhe?
mit td {vertical-align:top;}
Würde Sinn machen, aber schau mal
http://webkr.de/sitestest/css/checkbox.htm
Ja, sieht bei mir (FF 0.8/IE 6) so aus, wie du es beschrieben hast. Was
stört dich?


Ralf
Ralf Resack
2004-07-14 21:37:18 UTC
Permalink
Post by Ralf Resack
Ja, sieht bei mir (FF 0.8/IE 6) so aus, wie du es beschrieben hast. Was
stört dich?
Habe den Link zum Screenshot vergessen:
Loading Image...


Ralf
André Hänsel
2004-07-14 22:24:58 UTC
Permalink
Post by Ralf Resack
Post by André Hänsel
Post by Ralf Resack
Post by André Hänsel
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und
"Foo" auf gleiche Höhe?
mit td {vertical-align:top;}
Würde Sinn machen, aber schau mal
http://webkr.de/sitestest/css/checkbox.htm
Ja, sieht bei mir (FF 0.8/IE 6) so aus, wie du es beschrieben hast. Was
stört dich?
Hm, das erschwert die Fehlerbeschreibung natürlich.

Also...
Im Konqueror ist Unterkante Box an Unterkante rechter Text ausgerichtet (was
schlecht aussieht, weil die Box doppelt so groß ist wie der Text) und
beides zusammen hängt ca. 5px unter dem linken Text.

Im Firebird sind linker Text und rechter Text untenbündig, die Box hängt ca.
2px drunter.

Im IE 5.5 sind Box und rechter Text vertikal zentriert (schön), aber das
ganze hängt ca. 3px unter dem linken Text.

Karsten Buechner
2004-07-14 21:16:17 UTC
Permalink
....
Post by André Hänsel
<tr>
<td>Bob:</td>
<td><input type="checkbox"> Foo<br><input type="checkbox"> Bar</td>
</tr>
Das <br> stört mich etwas, mach doch pro Eingabefeld eine Zeile ...
<tr>
<td rowspan="2">Bob:</td>
<td><input type="checkbox"> Foo</td>
</tr>
<tr>
<td><input type="checkbox"> Bar</td>
</tr>
Post by André Hänsel
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und "Foo"
auf gleiche Höhe?
mit CSS definierst du dann für td per vertical-align wo der Content
steht: top, bottom, middle, baseline..
Ganz nach belieben.

grüsse, Karsten
Thorsten Reinicke
2004-07-14 21:57:12 UTC
Permalink
<table> ...
Wie bekomme ich "Alice:", die Box und "Lala" sowie "Bob:", die Box und "Foo"
auf gleiche Höhe?
Das machen die Browser i.d.R. von allein (wenn man ihnen die Chance dazu
gibt ...):

<table>
<tr>
<th>Alice:</th>
<td><input TYPE="checkbox"></td>
<td>Lala</td>
</tr><tr>
<th>Bob:</th>
<td><input TYPE="checkbox"></td>
<td>Foo</td>
</tr><tr>
<th></th>
<td><input TYPE="checkbox"></td>
<td>Bar</td></tr></table>

Grüße
TR
Loading...