✔ Radiobuttons und Textareas

[chriss_2oo4]

Hi,

ich bin fast am verzweifeln, ich versuche jetzt schon seit Studen die formatierung von ein paar Radiobuttons und einer Textarea hinzubekommen, aber es klappt nicht .

Ich verstehe nicht, warum folgender Code nicht funtioniert:

.FeedbackFieldset {
 	padding: 1em;
 	margin: 1em;
        width: 26em;
}

.FeedbackLabel {
    float: left;
    width: 8em;
    margin-right: 1.5em;
    margin-bottom: 0.8em;
    text-align: right;
}

.FeedbackTextArea {
	display: block;
    font-size: 1em;
    margin-bottom: 0.8em;
    width: 22em;
}

.FeedbackRadio {
	display: block;
	margin-bottom: 0.8em;
}

	<fieldset class="FeedbackFieldset">
		<legend>Woher kennen Sie die Seite?</legend>
		
		<label for="None" class="FeedbackLabel">Keine Angabe
		<input name="umfrage" id="None" type="radio" checked="checked" class="FeedbackRadio"/>
		</label>
		
		<label for="Empfehlung" class="FeedbackLabel">Empfehlung
		<input name="umfrage" id="Empfehlung" type="radio" class="FeedbackRadio"/>
		</label>
		
		<label for="Werbung" class="FeedbackLabel">Werbung
		<input name="umfrage" id="Werbung" type="radio" class="FeedbackRadio"/>
		</label>
		
		<label for="Suchmaschine" class="FeedbackLabel">Suchmaschine
		<input name="umfrage" id="Suchmaschine" type="radio" class="FeedbackRadio"/>
		</label>
	</fieldset>
	
	<fieldset class="FeedbackFieldset">
		<legend>Feedback</legend>
		<textarea id="text" name="text" cols="30" rows="20" class="FeedbackTextArea"></textarea>
	</fieldset>

Die Labels und zugehörigen Radiobuttons werden völlig verschoben angezeigt und nicht wie gewünscht:

Label: Button
Label: Button
...

Die Textarea wird vom Browser automatisch verkleinert (auch der darin enthaltene Text)


Kann mir mal jemand bei diesen Problemen weiterhelfen?



Beste Grüße
Chriss

 

[Maik]

Hi,

nimm mal die <input>-Elemente aus den <label>-Elementen heraus - dann klappt's auch mit dem gewünschten Umfluß.

mfg Maik

 

[chriss_2oo4]

Hi Maik,

vielen Dank für deine schnelle Hilfe! Die input-Tags hatte ich ursprünglich aus den label-Tags heraus... funktioniert leider auch nicht.

Hast du vllt. noch ne Idee?

Lg Chriss

 

[Maik]

Bei mir funktioniert es browserübergreifend:



mfg Maik

 

[chriss_2oo4]

Hi,

eigenltich müsste doch nach jedem radiobutton eine neue zeile beginnen (display: block)... oder hab ich das falsch verstanden?


lg chriss

 

[Maik]

Nö, dafür wird in deinem Modell clear:left benötigt.

Lösungsvorschlag, damit alle vier Buttons untereinander erscheinen, und nicht wie in meinem Screenshot zu sehen:

<fieldset class="FeedbackFieldset">
          <legend>Woher kennen Sie die Seite?</legend>
          <ul>
              <li>
                  <label for="None" class="FeedbackLabel">Keine Angabe</label>
                  <input name="umfrage" id="None" type="radio" checked="checked" class="FeedbackRadio"/>
              </li>
              <li>
                  <label for="Empfehlung" class="FeedbackLabel">Empfehlung</label>
                  <input name="umfrage" id="Empfehlung" type="radio" class="FeedbackRadio"/>
              </li>
              <li>
                  <label for="Werbung" class="FeedbackLabel">Werbung</label>
                  <input name="umfrage" id="Werbung" type="radio" class="FeedbackRadio"/>
              </li>
              <li>
                  <label for="Suchmaschine" class="FeedbackLabel">Suchmaschine</label>
                  <input name="umfrage" id="Suchmaschine" type="radio" class="FeedbackRadio"/>
              </li>
          </ul>
</fieldset>

.FeedbackFieldset ul {
    margin:0;
    padding:0;
    list-style:none;
}
.FeedbackFieldset ul li {
    clear:left;
}

mfg Maik

 

[chriss_2oo4]

Hi Maik,

nochmals vielen Dank für deine tolle und schnelle Hilfe!!
Funktioniert wunderbar, allerdings hätte ich noch eine Frage, weil ich das gerne verstehen würde.

Wenn ich beim Label float: left angebe, ist die Startposition des Labels links. Darauf folgt dann ein input-Element dass die Eigenschaft display: block besitzt, was bedeuted dass das folende Element in einer neuen Zeile dargestellt wird.

Aber wieso werden bei dir zwei Spalten angezeigt und nicht wie in dem Beispiel von dir nur eine Spalte. (In meinem Beispiel werden bei mir die Formularkomponenten völlig durcheinander angezeigt).

Nochmals vielen Dank!
Lg Chriss

 

[Maik]

Ganz einfach: display:block beendet nicht den Umfluß (float), sondern die clear-Eigenschaft.

mfg Maik