|
||||
CSS: Listen, Label und die Höhe -wie richtig?
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: HTML-Code:
<li><label>test</label><span>blabla</span</li> 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 |
Sponsored Links |
Sponsored Links |
|
||||
Zitat:
|
|
||||
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: HTML-Code:
<ul> <li> <label></label> <div></div> <span class="clear"></span> </li> </ul> Code:
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; } http://jassesnee.de/easyclear/index.html Geändert von David (04.02.2009 um 18:33 Uhr) |
|
||||
Eine echte Abhängigkeit wie von zwei Zellen in einer Zeile einer Tabelle kann man afaik nur mit "display:table-cell" erreichen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
||||
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. |
|
||||
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 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Höhe von Listen... | crossgolfer85 | CSS | 4 | 20.07.2009 15:08 |
Bild richtig in CSS einbinden! | karina | CSS | 1 | 20.06.2008 13:17 |
Wege zum guten CSS - Ausgewählte Links | Sp33dy G0nz4l3s | Ressourcen | 1 | 27.05.2008 11:09 |
CSS Layout: Höhe dem Inhalt anpassen - mit Mindesthöhe | trequ | CSS | 3 | 05.09.2004 11:29 |
Öffnen im eigenen Fenster - Breite unf Höhe mit CSS ? | Anonymous | CSS | 2 | 25.06.2003 13:17 |