|
|||
Definitionsliste in einer Floatumgebung
Hallo zusammen,
habe heute das erste Mal in einem Testdokument mit Definitionslisten gearbeitet und wollte mal fragen, ob das, was ich fabriziert habe, Sinn macht, bzw. semantisch ist. Also valide ist schon mal und funktionieren tut es auch in den gängigen Browsern (IE6, IE7, FF 3, Safari, Opera, Chrome) . Hier der Quelltext: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DL-Test</title> <style type="text/css"> *{ margin: 0; padding: 0; } body { background-color: #666666; } .col_left { width: 300px; float: left; background-color:#CCCCCC; } .col_left_content { position: relative; } .col_right { margin-left: 300px; width: 300px; background-color: #999999; } .col_right_content { position: relative; } a { display: block; } /*CONTENT DEFINITIONSLISTEN---------------------------*/ dl { border-bottom: 1px dotted #ffffff; } dt { width: 80px; float: left; border-top: 1px dotted #ffffff; padding: .5em 0; } dt:first-child { border-top: none !important; } dt:first-child + dd { border-top: none !important; } dt:after { content: "."; display: block; clear: left; height: 0; visibility: hidden; } dd { border-top: 1px dotted #ffffff; padding: .5em 0; margin-left: 80px; } </style> </head> <body> <div id="content" class="clearfix"> <div class="col_left"> <div class="col_left_content"> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> </div> </div> <div class="col_right"> <div class="col_right_content"> Hier ist die Rechte Content-Spalte <dl> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf die auch mal etwas länger sein darf die auch mal etwas länger sein darf</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf</dd> </dl> </div> </div> </div> </body> </html> Viele Grüße *pi
__________________
Über mich gibs nix zu sagen. |
Sponsored Links |
|
|||
Zitat:
Aber zum Code: Hast du gesehen, was passiert, wenn <dt> höher wird als die <dd>? |
Sponsored Links |
|
|||
Also ich könnte die Fehlerhafte Darstellung durch folgende Anweisung beheben:
HTML-Code:
dd:after { content: "."; display: block; clear: left; height: 0; visibility: hidden; } Viele Grüße
__________________
Über mich gibs nix zu sagen. |
|
|||
Schaffe einen Block Formatting Context, der das Clear einsperrt.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Daran habe ich zuerst auch gedacht. Aber ich habe doch bei einer Definitionsliste kein Elternelement, dem ich z.B. ein Float in Verbindung mit einer Breite zuweisen kann. Bei einer DIV-Konstruktion würde es funktionieren aber bei einer dl? Oder habe ich gerade nen Brett vor'm Kopf?
Viele Grüße
__________________
Über mich gibs nix zu sagen. |
|
|||
Ich sehe in deinem Code mindestens 3 Elemente, die floaten könnten. Eines davon ist das dl-Element.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Achso, okay, dann habe ich das Prinzip des BFC falsch verstanden.
Also ich habe der dl jetzt noch display: inline-block gegeben und es funktioniert. Prima, vielen Dank für diesen wirklich wichtigen Hinweis . Mal schauen, ob es Browser-übergreifend funktioniert. Viele Grüße P.S.: War klar, dass der Befehl dem IE vollkommen egal ist. Ich liebe MS...
__________________
Über mich gibs nix zu sagen. |
|
|||
Ich empfehle Float. Die Unterstützung für inline-block ist schlecht (teste mal FF2).
Bei einem Layout mit festen Pixelbreiten ist es sinnvoll, alle Spalten zu floaten. Dann stellt sich das Problem des globalen Clears gar nicht erst. Zitat:
Bitte: Befehle gibt es nicht in CSS. Eigenschaften. Es sind Eigenschaften und Werte, über die wir reden.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (07.01.2009 um 18:39 Uhr) |
Sponsored Links |
|
|||
Habs hinbekommen... hier der Quelltext für die Nachwelt:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DL-Test</title> <style type="text/css"> *{ margin: 0; padding: 0; } body { background-color: #666666; } .col_left { width: 300px; float: left; background-color:#CCCCCC; } .col_left_content { position: relative; } .col_right { margin-left: 300px; width: 300px; background-color: #999999; } .col_right_content { position: relative; } a { display: block; } /*CONTENT DEFINITIONSLISTEN---------------------------*/ dl { border-bottom: 1px dotted #ffffff; float: left; width: 300px; } dt { width: 80px; float: left; clear: left; border-top: 1px dotted #ffffff; padding: .5em 0; } dt:first-child { border-top: none !important; } dt:first-child + dd { border-top: none !important; } dd { border-top: 1px dotted #ffffff; padding: .5em 0; margin-left: 80px; } dd:after { content: "."; display: block; clear: left; height: 0; visibility: hidden; } </style> </head> <body> <div id="content" class="clearfix"> <div class="col_left"> <div class="col_left_content"> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> <p>Hier ist die Link Content-Spalte</p> </div> </div> <div class="col_right"> <div class="col_right_content"> Hier ist die Rechte Content-Spalte <dl> <dt><a href="#">Linke Spalte</a> mit noch etwas Text toll oder?</dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte</dd> <dt><a href="#">Linke Spalte</a> mit noch etwas Text toll oder?</dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf die auch mal etwas länger sein darf die auch mal etwas länger sein darf</dd> <dt><a href="#">Linke Spalte</a></dt> <dd>Rechte Spalte, die auch mal etwas länger sein darf</dd> </dl> </div> </div> </div> </body> </html>
__________________
Über mich gibs nix zu sagen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
floatproblem mit definitionsliste | hubert17 | CSS | 2 | 28.08.2007 21:06 |
Definitionsliste - Richtiger Einsatz? | Wasili | (X)HTML | 1 | 11.10.2006 17:32 |
Bildunterschrift mit Definitionsliste | Paulinche | CSS | 16 | 18.06.2006 18:40 |
artikelliste - definitionsliste oder was macht sinn | andip | (X)HTML | 22 | 13.06.2006 12:51 |
Frage zu Definitionsliste und Zeilenumbruch | Tigereye | CSS | 3 | 14.03.2006 23:36 |