[sahara87]

Hallo,
ich habe folgendes Problem:

Ich versuche gerade meine "Div-Suppe" auszulöffeln Ich bin gerade an einen Punkt gekommen, wo ich mir nicht ganz sicher bin. Und zwar, bei einer Eingabe ...



Die Rahmen sollen ein <li>...</li> darstellen.
Hier ein Bsp für eine Zeile:

<li><label>test</label><span>blabla</span</li>

1.Frage: ist das "State of the Art" wie man so schön sagt? oder ist ein Element falsch? soan oder div? (ich hasse divs )

2.Frage: Ich habe ein Problem, dass diesen entspricht A List Apart: Articles: Faux Columns

Und zwar, wenn der Content im <span> größer/höher ist, als dem des <label>'s "wächst" dieses nicht mit.Beispiel 2. zeile, dass ahbe ich nur erreicht, weil ich bei label height fest vergeben habe. Aber ich möchte, wenn span höher wird, das label auch höher wird, aber wie wird sowas gemacht?

Hier nochmal ein bild ums zu verdeutlichen:

so solls nicht sein, der graue bereich soll automatisch mitwachsen, so dass der rechte teil immer ausgefüllt ist.

Ich hoffe Ihr versteht was ich will

[David]

Label sind meinermeinung nach nur für Formularelemente vorgesehen. Eine Definition-list (<dl>) ist da vieleicht sinnvoller? Oder du verwendest Überschriften . Die Faux Colums technik auf das Problem angewendet würde bedeuten, dass du dem <li> Element eine Hintergrundgrafik gibst, die das Spaltenschema horizontal darstellt und vertikal wiederholt wird.

[sahara87]

Zitat von DNA

Label sind meinermeinung nach nur für Formularelemente vorgesehen. Eine Definition-list (<dl>) ist da vieleicht sinnvoller? Oder du verwendest Überschriften . Die Faux Colums technik auf das Problem angewendet würde bedeuten, dass du dem <li> Element eine Hintergrundgrafik gibst, die das Spaltenschema horizontal darstellt und vertikal wiederholt wird.

Ja mit Die Faux Colums habe ich auch so verstanden, aber wie löse ich das Problem, dass das Label oder nach deinem Vorschlag mit den Überschriften, automatisch die höhe des "rechten" (content) Teils annimmt? mit height:100% funktioniert nicht. Schön wäre ja, wenn <label> oder <hx> die höhe des elterelements <li>/<dl> animmt.

[David]

Idee des Faux Columns ist, es so aussehen zu lassen, als ob da zwei gleich hohe Spalten stehen.
Das Problem, dass der Text nach dem Label wieder an den Anfang der Zeile rutscht löst du ganz einfach mit einem entsprechend großem margin auf der linken Seite des Spans. Das erfordert allerdings display:block für das span und dann musst du das label ein float:left mitgeben. Was wieder zur Folge hat, dass du ein clearendes Element nach dem span innerhalb des Listenelements benötigt, damit das Listenelement in der Höhe mit allen Inhalten mitwächst.

Komplizierte Sache. Was willst du denn darstellen?
Vieleicht wäre eine Tabelle ja garnicht mal so abwegig. Und wie gesagt, labels gehören eigentlich in Formulare!

Um das mal kurz zu verdeutlichen:

<ul>
   <li>
      <label></label>
      <div></div>
      <span class="clear"></span>
   </li>
</ul>

ul li {
   background: #fff url(/hier/der/hintergrund.gif) top left repeat-y;
}
ul li label {
   display:block;
   width:50px;
   float:left
}
ul li div {
   margin: 0 0 0 50px;
   width:xy px
}
ul li span.clear {
   display:block;
   clear:left;
   width:0;
   height:0;
}

Den clearenden Span kann man auch umgehen mit "EasyClearing"
http://jassesnee.de/easyclear/index.html

[Crizzo]

Eine echte Abhängigkeit wie von zwei Zellen in einer Zeile einer Tabelle kann man afaik nur mit "display:table-cell" erreichen.

[sahara87]

danke Ihr beiden, @DNA besonders deiner ausfürhlichen Antwort, dass werd ich gleich mal umsetzen ...

Ja, ich hatte überlegt, ob ich eine Tabelle nehme, damit wäre es ja kein Problem. Nur handelt es sich dabei um eine Eingabe, deswegen auch das <label> obwohl nicht in jeder Zeile ein eingabefeld ist, deswegen werd ich das auf ein Hx Element umstellen. Ich habe in einen Artikel gelesen, dass Tabellen schon ihre Berechtigung haben aber dann wirklich nur für Datentabellen. Ist ein Eingabeformular ein Datentabelle? hmm meiner subjektiven Meinung nach nicht. Deswegen wollte ich keine Tabelle nehmen.

[David]

Ich seh gerade, ich hatte den falschen Link zu EasyClearing gepostet.
Das kommt davon, wenn man in mehreren Themen gleichzeitig antwortet.
Hier der richtige Link:

Einschließen von Floats ohne zusätzliches Markup - easyclear