Checkbox Text daneben

andrew22 · 21.02.2007, 14:58

hi,

Gibt es per css die Möglichkeit den Text der neben einer Checkbox steht richtig auszurichten. Momentan wird der Text von unten ausgerichtet sprich der text neben der checkbox steht leicht nach unten gedrückt

..

Oder muss ich die Tabellenvariante benutzen Sprich eine Spalte die Checkbox andere Spalte der Text ?

Igäl · 21.02.2007, 15:19

Hab bis jetzt immer die Tabellenvariante genutzt. Allerdings ist da die Checkbox auch nicht immer vertikal mittig ausgerichtet.

Zergling-new · 21.02.2007, 19:35

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    
    <style type="text/css">
        * {
            font-family : Verdana;
            font-size   : 11px;
        }
        
        div.checkbox {
            display : inline;
        }
        
        div.checkbox input {
            margin-bottom : -1px;
        }
    </style>
</head>
<body>
    
    <form action="">
        <div class="checkbox"><input id="checkbox-0" type="checkbox" /></div>
        <label for="checkbox-0">mein Text</label>
    </form>
    
</body>
</html>

nikosch · 21.02.2007, 19:50

erweiter zerglings code um fogendes, dann passts:

Code:

<style>
  input { vertical-align:middle ; }
</style>

Frank Burian · 21.02.2007, 20:28

Zitat:

äh äh. das würde sich nur auf den eingebenden text beziehen!!!
und wenn du es im div gemeint hast, auch äh äh, denn in divs gibts kein vertical-align!

mein tip wäre, jetzt mal ohne zu testen!

Code:

...
<div style="display:inline; padding-top:3px;">Mein Label</div>
<div style="display:inline;"><input id="checkbox-0" type="checkbox" /></div>
...

mit dem padding kannste das dann in die mitte rücken!

Zergling-new · 21.02.2007, 20:31

Zitat:

Zitat von nikosch77

erweiter zerglings code um fogendes, dann passts

Wozu erweitern, er funktioniert doch. Die Checkbox ist doch das Übel, das nicht richtig im Textfluß positioniert ist. Die Korrektur mit margin-bottom : -1px behebt das und zerhaut nicht auch noch den Text.

andrew22 · 22.02.2007, 16:27

merci

nikosch · 22.02.2007, 16:44

@Zergling
na ich weiss nicht, wenn ich dein script im firefox mal auf 500, 600% hochschraube, dann eiert das CB Feld irgendwo unterhalb der Textlinie...

Syntaktisch richtig hin oder her, rein praktisch gesehen funktionierts mit

Code:

<style>
  * {font:1em verdana;}
  input { vertical-align:middle ; }
</style>

<input id="abc" type="checkbox"> <label for="abc">abc</label>
<div><input type="checkbox"> abc</div>

recht gut, mit oder ohne label.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JavaScript/PHP: qooxdoo 0.7.1 - Teil 1 : Eine Einführung	Zergling-new	Tutorials	6	25.01.2008 10:41
JavaScript: Text Area: Scrollen zu einer Zeile im Text	SvenLittkowski	HTML, Usability und Barrierefreiheit	13	28.11.2007 16:31
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
MySQL-Volltextsuche	SvenLittkowski	Datenbanken	6	14.06.2007 19:58
zusammengehörige Felder (Checkbox und Text) auswerten ?	bp158	PHP Tipps 2007	5	05.03.2007 12:36
spalte rechts ausrichten, text aber trotzdem linksbündig	Crypi	HTML, Usability und Barrierefreiheit	5	14.09.2006 11:35
CSS - Design (clear - Problem)		HTML, Usability und Barrierefreiheit	7	21.12.2005 14:55
Text aus der DB verteilen		PHP Tipps 2007	17	16.11.2005 12:04
[Erledigt] Link		PHP Tipps 2005-2	10	20.07.2005 21:28
[Erledigt] DIV´s wollen nicht wie ich das will :-)		HTML, Usability und Barrierefreiheit	22	28.03.2005 18:36
frames probleme		HTML, Usability und Barrierefreiheit	6	18.01.2005 02:33
Per Button Text formatieren	Igäl	HTML, Usability und Barrierefreiheit	1	11.11.2004 06:25
Javascript: Text einfügen geht nich über "javascript:BL		HTML, Usability und Barrierefreiheit	14	19.10.2004 21:44
Zeilenumbrüche aus einem formatierten Text entfernen	woods	PHP Tipps 2004	9	23.09.2004 12:50
txt-Datei erstellen	d-81	PHP Tipps 2004	12	11.08.2004 20:31

21.02.2007, 14:58
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	Checkbox Text daneben hi, Gibt es per css die Möglichkeit den Text der neben einer Checkbox steht richtig auszurichten. Momentan wird der Text von unten ausgerichtet sprich der text neben der checkbox steht leicht nach unten gedrückt .. Oder muss ich die Tabellenvariante benutzen Sprich eine Spalte die Checkbox andere Spalte der Text ?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.02.2007, 15:19
Igäl Erfahrener Benutzer Registriert seit: 16.08.2007 Beiträge: 702 PHP-Kenntnisse: Anfänger	Hab bis jetzt immer die Tabellenvariante genutzt. Allerdings ist da die Checkbox auch nicht immer vertikal mittig ausgerichtet. __________________ Das Recht auf Dummheit gehört zur Garantie der freien Entfaltung der Persönlichkeit. Mark Twain

21.02.2007, 19:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	erweiter zerglings code um fogendes, dann passts: Code: <style> input { vertical-align:middle ; } </style>

22.02.2007, 16:27
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	merci

22.02.2007, 16:44
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	@Zergling na ich weiss nicht, wenn ich dein script im firefox mal auf 500, 600% hochschraube, dann eiert das CB Feld irgendwo unterhalb der Textlinie... Syntaktisch richtig hin oder her, rein praktisch gesehen funktionierts mit Code: <style> * {font:1em verdana;} input { vertical-align:middle ; } </style> <input id="abc" type="checkbox"> <label for="abc">abc</label> <div><input type="checkbox"> abc</div> recht gut, mit oder ohne label.