zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Definitionsliste in einer Floatumgebung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.01.2009, 17:30
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard 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>
Freue mich auf euer Feedback

Viele Grüße

*pi
__________________
Über mich gibs nix zu sagen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.01.2009, 17:42
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von *pi Beitrag anzeigen
habe heute das erste Mal in einem Testdokument mit Definitionslisten gearbeitet und wollte mal fragen, ob das, was ich fabriziert habe, Sinn macht,
Keine Ahnung, wofür soll es gedacht sein?

Aber zum Code: Hast du gesehen, was passiert, wenn <dt> höher wird als die <dd>?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.01.2009, 17:47
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

Mist, daran habe ich überhaupt nicht gedacht. Das muss natürlich gefixt werden. Danke für den Hinweis!!
__________________
Über mich gibs nix zu sagen.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.01.2009, 18:11
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

Also ich könnte die Fehlerhafte Darstellung durch folgende Anweisung beheben:

HTML-Code:
dd:after {
			content: "."; 
			display: block;  
			clear: left;
			height: 0; 
			visibility: hidden;
		}
Allerdings löst dieser Befehl ein globes Clearing aus, was dann zu einer anderen Fehlerhaften Darstellung führt. Kenn jemand auf Anhieb eine andere Lösung? Mir kommt gerade keine in den Sinn

Viele Grüße
__________________
Über mich gibs nix zu sagen.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.01.2009, 18:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Schaffe einen Block Formatting Context, der das Clear einsperrt.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.01.2009, 18:20
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 07.01.2009, 18:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich sehe in deinem Code mindestens 3 Elemente, die floaten könnten. Eines davon ist das dl-Element.
Mit Zitat antworten
  #8 (permalink)  
Alt 07.01.2009, 18:27
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.01.2009, 18:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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:
P.S.: War klar, dass der Befehl dem IE vollkommen egal ist. Ich liebe MS...
Nein, dem IE ist es nicht egal. Was genau erwartest du vom IE?

Bitte: Befehle gibt es nicht in CSS. Eigenschaften. Es sind Eigenschaften und Werte, über die wir reden.

Geändert von fricca (07.01.2009 um 18:39 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.01.2009, 18:37
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:21 Uhr.