nicht angemeldet
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Hallo,
ich habe ein Formular in dem zusätzlich Radiobuttons eingefügt werden sollen.
Die Radiobuttons werden untereinander dargestellt.
Was kann ich tun, damit diese nebeneinander dargestellt werden.
Gruß
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Elemente nebeneinander</title>
<style type="text/css">
._25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
width: 100%;
border: 1px solid #B3B3B3;
}
select {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
input {
border: 1px solid #B3B3B3;
width: 100%;
-moz-border-radius: 3px;
}
</style>
</head>
<body>
<form class="commentForm" method="post" accept-charset="utf-8" action="">
<fieldset>
<legend>Elemente nebeneinander</legend>
<div class="_25">
<label for="schicht">Schicht</label>
<select name="schicht" class="select">
<option>Bitte auswählen!</option>
<optgroup label="Schicht">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</div> <!-- #class="_25" -->
<div class="clr"></div>
<div class="_25">
<label for="ort">Ort</label>
<select name="ort" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Ort">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</div> <!-- #class="_25" -->
<div class="clr"></div>
<div class="_25">
<label for="sendung">Sendung</label>
<select name="sendung" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Sendung">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</div> <!-- #class="_25" -->
<div class="clr"></div>
<div class="_25">
<label for="fehlerkategorie">Kategorie</label>
<select name="fehlerkategorie" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Kategorie">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</div> <!-- #class="_25" -->
<div class="clr"></div>
</fieldset>
<fieldset>
<legend>Elemente nebeneinander</legend>
<div class="_25">
<p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
</div> <!-- #class="_25" -->
<div class="clr"></div>
<div class="_25">
<p> </p>
</div> <!-- #class="_25" -->
<div class="clr"></div>
<div class="_25">
<p> </p>
</div> <!-- #class="_25" -->
<div class="clr"></div>
<div class="_25">
<label for="radio">ONAIR</label>
<div id="radio1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Ja</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Nein</label>
</div> <!-- #class="_25" -->
<div class="clr"></div>
</fieldset>
<fieldset>
<div class="_25">
<!-- UI Button -->
<p><input type="submit" id="submitButton" name="speichern" value="Speichern"/></p>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Om nah hoo pez nyeetz, inspiron!
die vielen Div-Elemente sind überflüssig.
Matthias
Om nah hoo pez nyeetz, inspiron!
die vielen Div-Elemente sind überflüssig.
Matthias
Hallo,
danke für die Info's , nur ist das ein fertiges Formular aus dem ich den wichtigen Teil raus kopiert habe. In diesem sollen, wie schon geschrieben Radiobuttons nebeneinander eingefügt werden.
Soll ich jetzt alle Div-Elemente entfernen? Was kommt dann anstelle dieser?
Das würde dann bedeuten das ich ein neues Formular erstellen muß, das wollte ich nicht.
Gruß
Om nah hoo pez nyeetz, inspiron!
Soll ich jetzt alle Div-Elemente entfernen?
Ja. Alle.
Was kommt dann anstelle dieser?
Nichts.
Das würde dann bedeuten das ich ein neues Formular erstellen muß, das wollte ich nicht.
Nur in einem gesunden Code wohnt auch ein hübsches Aussehen. *g* Aussehen gibts mit CSS, welches du am besten gleich mit entsorgst. Das können wir dann gemeinsam neu machen, wenn du magst.
Ich sehe in deinem Code keinen Grund für eine Untereinanderdarstellung der Radiobuttons.
Matthias
Om nah hoo pez nyeetz, inspiron!
Soll ich jetzt alle Div-Elemente entfernen?
Ja. Alle.
So, habe alle entfernt.
Nur in einem gesunden Code wohnt auch ein hübsches Aussehen. *g* Aussehen gibts mit CSS, welches du am besten gleich mit entsorgst. Das können wir dann gemeinsam neu machen, wenn du magst.
Das Angebot möchte ich gerne annehmen.
Ich sehe in deinem Code keinen Grund für eine Untereinanderdarstellung der Radiobuttons.
Matthias
Die Selectfelder incl. Label, sind jetzt nebeneinander angeordnet.
Die Radiobutton incl. Label sind auch nebeneinander angeordnet.
Die Elemente sollen in einer gedachten vierspaltigen Tabelle und das Label linksbündig "Über" dem Element angeordnet sein.
Anbei mal eine Bildliche Darstellung
Gruß
LEGEND
LABEL 1 LABEL 2 LABEL 3 LABEL 4
+--------------+ +--------------+ +--------------+ +--------------+
I Selectfeld 1 I I Selectfeld 2 I I Selectfeld 3 I I Selectfeld 4 I
+--------------+ +--------------+ +--------------+ +--------------+
LABEL 5 LABEL 6
+--------------+
I Inputfeld 1 I O Ja O Nein
+--------------+
+--------------+
I Submit I
+--------------+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Elemente nebeneinander</title>
<style type="text/css">
</style>
</head>
<body>
<form class="commentForm" method="post" accept-charset="utf-8" action="">
<fieldset>
<legend>Elemente nebeneinander</legend>
<label for="schicht">Schicht</label>
<select name="schicht" class="select">
<option>Bitte auswählen!</option>
<optgroup label="Schicht">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
<label for="ort">Ort</label>
<select name="ort" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Ort">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
<label for="sendung">Sendung</label>
<select name="sendung" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Sendung">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
<label for="fehlerkategorie">Kategorie</label>
<select name="fehlerkategorie" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Kategorie">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>Elemente nebeneinander</legend>
<p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p>
<label for="radio">ONAIR</label>
<id="radio1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Ja</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Nein</label>
</fieldset>
<fieldset>
<!-- UI Button -->
<p><input type="submit" id="submitButton" name="speichern" value="Speichern"/></p>
</fieldset>
</form>
</div>
</body>
</html>
Om nah hoo pez nyeetz, inspiron!
Da ist noch ein p-Element, was nicht gebraucht wird und ein fehlerhaftes <id="radio1">. Dann packst du die input-Elemente in die Labelelemente hinein. Das label ONAIR hat nichts, was es etikettieren könnte, braucht kein for. Das for-Attribut im Label muss gleich der ID des gelabelten Formularelementes sein.
<label>ONAIR
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
CSS
label {
display: inline-block;
}
select, input {
display: block;
}
sollte schon nah am Ziel sein.
Matthias
Om nah hoo pez nyeetz, inspiron!
Da ist noch ein p-Element, was nicht gebraucht wird und ein fehlerhaftes <id="radio1">. Dann packst du die input-Elemente in die Labelelemente hinein. Das label ONAIR hat nichts, was es etikettieren könnte, braucht kein for. Das for-Attribut im Label muss gleich der ID des gelabelten Formularelementes sein.
<label>ONAIR
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
>
> CSS
>
> ~~~css
label {
> display: inline-block;
> }
> select, input {
> display: block;
> }
sollte schon nah am Ziel sein.
Matthias
...schonmal großen Dank für die Hilfe!
Jetzt werden wieder alle Elemente untereinander angeordnet. :-(
LABEL 1
+--------------+
I Selectfeld 1 I
+--------------+
LABEL 2
+--------------+
I Selectfeld 2 I
+--------------+
LABEL 3
+--------------+
I Selectfeld 3 I
+--------------+
LABEL 4
+--------------+
I Selectfeld 4 I
+--------------+
LABEL 5
+--------------+
I Inputfeld 1 I
+--------------+
O O
LABEL 6 Ja Nein
+--------------+
I Submit I
+--------------+
...so, bin ein Stück weiter.
Select'se sind in einer Reihe & Label'se linksbündig darüber.
Nur das Radio ist noch nicht an der richtigen Stelle (zweite Spalte) und sieht noch nicht gut aus. Weiß jetzt nicht weiter.
Gruß
O O
ONAIR Ja Nein
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Elemente nebeneinander</title>
<style type="text/css">
ul {
list-style: none;
}
li {
float: left;
width: 200px;
border: 1px solid #B3B3B3; /* Hilfslinie zum ausrichten */
}
label {
display: inline-block;
}
select, input {
display: block;
}
</style>
</head>
<body>
<form class="commentForm" method="post" accept-charset="utf-8" action="">
<fieldset>
<legend>Elemente nebeneinander</legend>
<ul>
<li>
<label for="schicht">Schicht</label>
<select name="schicht" class="select">
<option>Bitte auswählen!</option>
<optgroup label="Schicht">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</li>
<li>
<label for="ort">Ort</label>
<select name="ort" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Ort">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</li>
<li>
<label for="sendung">Sendung</label>
<select name="sendung" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Sendung">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</li>
<li>
<label for="fehlerkategorie">Kategorie</label>
<select name="fehlerkategorie" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Kategorie">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</li>
<ul>
</fieldset>
<fieldset>
<legend>Elemente nebeneinander</legend>
<ul>
<li>
<label for="in_user">Username</label><input id="in_user" type="text" value=""/>
</li>
<li>
<label>ONAIR
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</li>
<ul>
</fieldset>
<fieldset>
<!-- UI Button -->
<p><input type="submit" id="submitButton" name="speichern" value="Speichern"/></p>
</fieldset>
</form>
</div>
</body>
</html>
Hi,
Nur das Radio ist noch nicht an der richtigen Stelle (zweite Spalte) und sieht noch nicht gut aus.
> select, input {
> display: block;
Das wird wohl daran liegen.
MfG ChrisB
Hi,
Nur das Radio ist noch nicht an der richtigen Stelle (zweite Spalte) und sieht noch nicht gut aus.
select, input { > display: block;
>
> Das wird wohl daran liegen.
>
> MfG ChrisB
>
>
Hallo,
hmm, ja was denn?
Ich komme jetzt absolut nicht weiter.
Die Radiobuttons stehen incl. Schrift untereinander. Wie bekomme ich diese denn nun wieder nebeneinander
LABEL
O
Ja
O
Nein
Entferne ich das "width: 190px;" im select, input {} und das <br> hinter dem LABEL, werden die Radiobuttons wieder so angeordnet.
O O
LABEL Ja Nein
Wie bekomme ich denn folgende Darstellung hin?
LABEL
OJa ONein
Gruß
~~~html
<style type="text/css">
ul {
list-style: none;
padding-left: 2px;
}
li {
float: left;
width: 21%;
border: 1px solid #B3B3B3; /* Hilfslinie zum ausrichten */
margin-right: 5px;
padding: 5px;
}
label {
display: inline-block;
border: 1px solid green; /* Hilfslinie zum ausrichten */
}
select, input {
display: block;
width: 190px;
}
</style>
<fieldset>
<legend>Elemente nebeneinander</legend>
<ul>
<li><label for="in_user">Username</label><input id="in_user" type="text" value=""/></li>
<li>
<label>ONAIR <br>
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</li>
</ul>
</fieldset>
Hi,
Nur das Radio ist noch nicht an der richtigen Stelle (zweite Spalte) und sieht noch nicht gut aus.
select, input {
display: block;
> >
> > Das wird wohl daran liegen.
> >
> > MfG ChrisB
> >
> >
....ich glaube es hat klick gemacht.
~~~css
input.radio {
display: inline-block;
}
Nun sieht's so aus.
ONAIR
O Ja O Nein
<li>
<label>ONAIR <br>
<label for="radio1"><input class="radio" type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input class="radio" type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</li>
Jetzt noch zwei Fragen.
Ist das Break "<label>ONAIR <br>" so i.O, oder kann man das anders lösen?
Ohne <br> sieht es dann so aus: ONAIR O Ja O Nein
Wie bekomme ich jetzt die Radiobuttons in der vierten Spalte positioniert?
Gruß
Om nah hoo pez nyeetz, inspiron!
Du bist ungeduldig. Warum zusätzliche Elemente? Entferne die Liste.
Dann hatte ich geschrieben, du sollst die Formular-Elemente in die label-Elemente stecken.
Das hast du offenbar überlesen.
<label>
<input>... bzw. <select>
</label>
und dann sollte folgendes CSS schon mal auf den richtigen Weg führen und _nur_ dann, wenn das HTML so ist, wie oben.
label, input, select {border: 1px solid;} /* Dass man auch was sieht */
input {display: inline-block;}
select, option {display: block;}
Dann brauchst du auch kein <br>.
Erst dies, dann das andere.
Matthias
Erst dies, dann das andere.
Matthias
...o.k.
Hallo,
hatte es wirklich nicht richtig erkannt. Habe die Label's angepasst.
Die Selectfelder werden jetzt wieder untereinander, die input nebeneinander dargestellt.
Gruß
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Elemente nebeneinander</title>
<style type="text/css">
label, input, select {border: 1px solid;} /* Dass man auch was sieht */
input {display: inline-block;}
select, option {display: block;}
</style>
</head>
<body>
<form class="commentForm" method="post" accept-charset="utf-8" action="">
<fieldset>
<legend>Elemente nebeneinander</legend>
<label for="schicht">Schicht
<select name="schicht" class="select">
<option>Bitte auswählen!</option>
<optgroup label="Schicht">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</label>
<label for="ort">Ort
<select name="ort" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Ort">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</label>
<label for="sendung">Sendung
<select name="sendung" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Sendung">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</label>
<label for="fehlerkategorie">Kategorie
<select name="fehlerkategorie" class="select_2">
<option>Bitte auswählen!</option>
<optgroup label="Kategorie">
<option value="Wert_1">Wert_1</option>
<option value="Wert_2">Wert_2</option>
</optgroup>
</select>
</label>
</fieldset>
<fieldset>
<legend>Elemente nebeneinander</legend>
<label>Username
<input id="in_user" type="text" value=""/>
</label>
<label>ONAIR
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</fieldset>
<fieldset>
<!-- UI Button -->
<input type="submit" id="submitButton" name="speichern" value="Speichern"/>
</fieldset>
</form>
</body>
</html>
Om nah hoo pez nyeetz, inspiron!
input {display: inline-block;}
Tpfelher: label {display: inline-block;}
Matthias
Om nah hoo pez nyeetz, inspiron!
input {display: inline-block;}
Tpfelher: label {display: inline-block;}
Matthias
Tpfelher: :-) :-) sehr schön!
...so jetzt habe ich den Code jetzt minimiert. Angezeigt werden die Radiobutton jetzt so:
O O
ONAIR Ja Nein
Was muß ich denn jetzt machen damit diese so dargestellt werden?
ONAIR
O Ja O Nein
Gruß
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Elemente nebeneinander</title>
<style type="text/css">
label, input {border: 1px solid;} /* Dass man auch was sieht */
label {display: inline-block; width: 21%;}
input {display: block;}
</style>
</head>
<body>
<form class="commentForm" method="post" accept-charset="utf-8" action="">
<fieldset>
<legend>Elemente nebeneinander</legend>
<label>Username
<input id="in_user" type="text" value=""/></label>
<label>ONAIR
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</fieldset>
<fieldset>
<!-- UI Button -->
<input type="submit" id="submitButton" name="speichern" value="Speichern"/>
</fieldset>
</form>
</body>
</html>
Om nah hoo pez nyeetz, inspiron!
Zugrunde liegt jetzt folgendes HTML
2 Vorschläge
<label><span>ONAIR</span>
<label for="radio1"><input ... />Ja</label>
<label for="radio2"><input ... />Nein</label>
</label>
Dazu im CSS label span {display: block;} Du sprichst damit Span-Elemente innerhalb von label an.
<label>ONAIR<br />
<label for="radio1"><input ... />Ja</label>
<label for="radio2"><input ... />Nein</label>
</label>
Sowie in beiden Fällen input[type=radio] display: inline;
Matthias
Om nah hoo pez nyeetz, inspiron!
Zugrunde liegt jetzt folgendes HTML
2 Vorschläge
<label><span>ONAIR</span>
<label for="radio1"><input ... />Ja</label>
<label for="radio2"><input ... />Nein</label>
</label>
>
> Dazu im CSS `label span {display: block;}`{:.language-css} Du sprichst damit Span-Elemente innerhalb von label an.
>
> ~~~html
<label>ONAIR<br />
> <label for="radio1"><input ... />Ja</label>
> <label for="radio2"><input ... />Nein</label>
> </label>
Sowie in beiden Fällen
input[type=radio] display: inline;Matthias
Hallo,
bin gleich auf dem Weg zur Arbeit, schaue dann da wieder rein.
So sieht es jetzt aus:
ONAIR
O O
Ja Nein
Jetzt wäre schön, wenn das Label Ja Nein recht angeordnet wird.
Gruß
<style type="text/css">
label, input {border: 1px solid;} /* Dass man auch was sieht */
label {display: inline-block; width: 21%;}
input {display: block;}
label span {display: block;}
input [type="radio"] {display: inline;}
</style>
</head>
<body>
<form class="commentForm" method="post" accept-charset="utf-8" action="">
<fieldset>
<legend>Elemente nebeneinander</legend>
<label>Username
<input id="in_user" type="text" value=""/></label>
<label><span>ONAIR</span>
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</fieldset>
Om nah hoo pez nyeetz, inspiron!
Mach dir im Wiki den Unterschied zwischen input [type="radio"] und input[type="radio"] klar.
* Attributselektor
* Kombinatoren
Matthias
Om nah hoo pez nyeetz, inspiron!
Mach dir im Wiki den Unterschied zwischen
input [type="radio"]undinput[type="radio"]klar.* Attributselektor
* KombinatorenMatthias
:-) :-) :-) Dankeschön!
Eine Frage hätte ich noch,
In der ersten Spalte einer Reihe befindet sich das Input und in der vierten soll das Radio platziert werden, wie bekomme ich jetzt die Radio's dort hin?
Vorher hatte ich zwei leere DIV a 21% dazwischen, nur mochte der IE das nicht.
Gruß
Om nah hoo pez nyeetz, inspiron!
Mach dir im Wiki den Unterschied zwischen
input [type="radio"]undinput[type="radio"]klar.* Attributselektor
* KombinatorenMatthias
:-) :-) :-) Dankeschön!
Eine Frage hätte ich noch,
In der ersten Spalte einer Reihe befindet sich das Input und in der vierten soll das Radio platziert werden, wie bekomme ich jetzt die Radio's dort hin?Vorher hatte ich zwei leere DIV a 21% dazwischen, nur mochte der IE das nicht.
Gruß
...und diese als Platzhalter "<label></label>", spricht denn da was dagegen?
<fieldset>
<legend>Elemente nebeneinander</legend>
<label>Username
<input id="in_user" type="text" value=""/></label>
<label></label>
<label></label>
<label><span>ONAIR</span>
<label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label>
<label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label>
</label>
</fieldset>
Om nah hoo pez nyeetz, inspiron!
Bitte zitiere sinnvoll, nur das, worauf du dich konkret beziehst.
...und diese als Platzhalter "<label></label>", spricht denn da was dagegen?
Ja. Man verwendet keine zusätzlichen Elemente rein zur Gestaltung.
Verwende stattdessen Außenabstände.
Matthias
...nun möchte ich die Label's Ja / Nein vom Radio verbreitern. Wenn ich das mit ".radio {width:} mache, wird das Radio im IE so angezeigt
LABEL
O Ja
O Nein
Im FF wird es richtig angezeigt, oder so wie ich es gern möchte.
<style type="text/css">
label, input, select {border: 1px solid;} /* Dass man auch was sieht */
select, option, input {display: block;}
label {
display: inline-block;
float: left;
width: 21%;
margin-left: 5px;
margin-right: 5px;
}
label span {display: block;}
input[type="radio"] {display: inline; /*margin-bottom: 4px; */}
input[type="checkbox"] {display: inline; /*margin-bottom: 4px; */}
.radio {width: 200%;}
</style>
<fieldset>
<legend>Elemente nebeneinander</legend>
<label>Username
<input id="in_user" type="text" value=""/></label>
<label for"störung" id="störung"><span>Störung</span>
<label for="checkbox"><input type="checkbox" id="störung" name="störung" />Ja</label>
</label>
<label for"onair" id="onair"><span>ONAIR</span>
<span class="radio"><label for="radio1"><input type="radio" id="radio1" name="radio" />Ja</label></span>
<span class="radio"><label for="radio2"><input type="radio" id="radio2" name="radio" checked="checked" />Nein</label></span>
</label>
</fieldset>
Om nah hoo pez nyeetz, inspiron!
...nun möchte ich die Label's Ja / Nein vom Radio verbreitern. Wenn ich das mit ".radio {width:} mache, wird das Radio im IE so angezeigt
Jetzt ist auch mal ein wenig eigene Arbeit angesagt. Verwende die browsereigenen Entwicklertools (F12) und schau dir live an, was welche Änderung bewirkt.
Matthias
Om nah hoo pez nyeetz, inspiron!
-moz-border-radius ist überflüssig. border-radius spricht mehr Browser an.
Matthias
Hi,
Die Radiobuttons werden untereinander dargestellt.
Gefolgt von 100% breiten Labels ist das ja auch kein Wunder.
MfG ChrisB
Om nah hoo pez nyeetz, ChrisB!
Gefolgt von 100% breiten Labels ist das ja auch kein Wunder.
Ist Label nicht von Hause aus ein inline-Element? Da das im CSS nicht geändert wird, sollte width keinen Einfluss haben.
Matthias