ich hab noch ein kleineres CSS / HTML Problem....chen


Nach der Suche präsentiere ich Ergebnisse in einer Tabelle

der Benutzer kann dann mittels Radio-Button einen der Einträge selektieren und damit dann die eigentlichen Daten anzeigen lassen .. funktioniert auch ohne Probleme - nur das Aussehen..

direkt am Radio-Button möchte ich ein "zweizeiliges Label" , dass den jeweiligen Eintrag eindeutig identifiziert .. (erste Zeile Kontraktnummer, 2te Zeile vergebene 2te Nummer) ...

wenn irgendwie möglich hätt ich das gern so



erste Zeile
(*)
zweite Zeile
also zu deutsch .. der Radiobutton soll vorn sein und vertikal zentriert vor dem 2zeiligen Label stehen

meine bisherigen Versuche , das über <p> erste Zeile<br/>zweite Zeile> zu lösen führen aber dazu, dass ich eine reihe von &nbsp; brauche , damit die zweite Zeile dann auch ungefähr da anfängt wo die erste beginnt (horizontale Ausrichtung) , außerdem hängt der Radiobutton so links oberhalb davon ...

css


p.radio input
{
width: 16px;
margin-top: 2px;
line-height: 18px;
}

p.radio label
{
margin-left: 4px;
width: 105px;
float: none;
line-height: 18px;
}

<tr>
<td><p class="radio"><input type="radio" name="........./>
<label for=" ....>erste Zeile<br/>&nbsp;&nbsp;&nbsp;&nbsp;zweite Zeile</label>
</p></td>......

ein weiterer Versuch mit einer Tabelle im Label oder Absatz wird nicht korrekt dargestellt, ist aber laut Validator auch nicht statthaft, weil block elemente nicht in inline-elemente dürfen

also wie krieg ich das hin?

Als Erstes solltest du mal den Code vernünftig umbrechen. Kein Mensch scrollt gerne horizontal.

Peter

schon geschehen .. wobei - da standen nur so 5 zeichen ^^

Hallo,

da gibt es mehrere Möglichkeiten. Hast du es schon einmal mit display: inline-block versucht? Dürfte imho die einfachste Variante sein.

Gruß,

Amica

Wenn du das ganze ohnehin schon in einer Tabelle hast, könntest du es auch einfach in zwei Zellen aufteilen, eine für den Radiobutton und eine für das Label. Nicht die sauberste Lösung aber in deinem Fall die einfachste :)

INPUT nach links floaten, eine height geben, die etwa zwei Zeilenhöhen entspricht, ggf. auch noch line-height;
LABEL einfach daneben darstellen lassen.

danke fab_s, meine Nutzer mit Seh-hilfe freuen sich über die neu gewonnene Übersicht ^^ (und die ohne Brille auch )