Mehrzeiligen Text bündig neben Radiobuttons

[Justus]

Liebe Forumsuser,

ich suche nach einer Möglichkeit den Text neben Radiobuttons bzw. Checkboxen bündig darstellen zu lassen. Derzeit steht bei einem Zeilenumbruch der Text unterhalb des Radiobuttons, was nicht besonderes elegant aussieht. Ich habe bereits versucht den Text in ein Label zu packen und mit einer Margin-left zu versehen, das hat aber nciht geklappt und ich weiß auch nicht, ob ein Label das richtige Element dafür ist.

Bisher habe ich folgendes programmiert.

  
<div id="Auswahl1">  
			<p>4.6 Wie informieren Sie sich in der Regel über aktuelle Events?? (Mehrfachnennungen möglich)</p>  
			<div id="Auswahlboxen">  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Zeitungen" <?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Zeitungen") {echo "checked";}}?>/> Zeitungen (FAZ, FASZ, TAZ, Zeit, etc.)<br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Internet"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Internet") {echo "checked";}}?>/> Internet <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Flyer"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Flyer") {echo "checked";}}?>/> Flyer <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Twitter"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Twitter") {echo "checked";}}?>/> Twitter <br>  
			</div>  
			<div id="Auswahlboxen">  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Magazine"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Magazine") {echo "checked";}}?>/> Stadtmagazine (Journal X-Art, Lolita, etc.) <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="TV"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="TV") {echo "checked";}}?>/> TV <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Newsletter"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Newsletter") {echo "checked";}}?>/> Newsletter <br>				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Facebook"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Facebook") {echo "checked";}}?>/> Facebook <br>  
			</div>  
			<div id="Auswahlboxen">  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Empfehlung"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Empfehlung") {echo "checked";}}?>/> <label>Magazine </label> <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Radio"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Radio") {echo "checked";}}?>/> Radio <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Freunde"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Freunde") {echo "checked";}}?>/> Freunde/Bekannte <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Sonstiges"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Sonstiges") {echo "checked";}}?>/> Sonstiges <br>  
			</div>  
		</div>		  

mit Diesem CSS-Attributen:

  
#Auswahl1 {  
	  background: #95B8EB;  
	  ccolor:black;  
	  display:  block;  
	  border-style: solid;  
	  border-color: black;  
	  border-width: 1px;  
	  height: auto;  
	  width: 1260px;  
	  margin-bottom: 0.5cm;  
	  font-weight: bold;  
	  margin-left: auto;  
	  margin-right:auto;  
	  font-size: 20;  
	  padding-bottom:0.2cm;  
	}  

Zu beachten ist vll, dass sich das ganze nicht durch breitere Boxen lösen lässt, da das ganze auf die Bildschirmgröße eines Tablets angepasst ist.

Vielen Dank schon mal vorab für etwaige Hilfe!

Gruß

Justus

[ChrisB]

Hi,

Bisher habe ich folgendes programmiert.

Serverseitiger Code ist bei einem clientseitigen Problem höchst uninteressant (oft sogar eher hinderlich).

ich weiß auch nicht, ob ein Label das richtige Element dafür ist.

Um den beschreibenden Text, der zu einem Radiobutton gehört, auszuzeichnen, ist es sogar das *einzig* sinnvolle Element.

MfG ChrisB

[Steel]

Hi!

Zuerstmal: Text, der Formularelemente beschreibt ist in labeln genau richtig aufgehoben. dafuer sind die da, da gehoert er rein. Hat den Vorteil, dass auch das Textanklicken das Element aktiviert, wenn beide korrekt verbunden sind.

Is das ein Kopierfehler? Ich sehe in deinem Code

  	<div id="Auswahlboxen">  

[...]

  	<div id="Auswahlboxen">  

[...]

  	<div id="Auswahlboxen">  

Eine ID darf es nur einmal geben.

Ausserdem ist serverseitiger Code nicht hilfreich bei einem Clientseitigem Problem.

Soviel zum Allgemeinen. Dein eigentliches Problem ist sicher zu loesen. Indem du z.B. den Text in einem eigenen Element unterbringst und das, falls noetig entsprechend formatierst. Inline Elemente brechen fuer gewoehnlich um und gehen auf der naechsten Zeile weiter. Block Elemente sehen das anders. Inline Blockelemente sind eine Mischung. Bilden zwar keinen eigenen Block mit Zeilenumbruechen, koennen also ohne weiteres hintereinander aufgereiht werden, bilden in sich allerdings einen Block. Falls von diesen Standardelementen keines reicht, must Du in die CSS Trickkiste greifen. Floats und Absolute Positionierung koennten Dir ebenso helfen, erfordern aber wesentlich mehr Wissen um deren eventuell andere Auswirkungen ordentlich zu handhaben.

Also pack dinen Text erstmal in label und dann formatier die.

(ich bin mir sicher, mittlerweile hat schon jemand geantwortet, da ich seit ca: 14:20 diese Antwort offen habe, aber nebenher arbeiten muss. Mal sehen, wie sinnlos mein Post jetzt noch ist)