Definitionsliste als Tabelle formatieren

BB-BF-BM · Beitrag von **BB-BF-BM** » 17.11.2007 10:43

Guten Tag!

Ich habe eine Definitionsliste

	<dl>
		<dt class="left top">dt: Links Oben</dt>
		<dd class="left top">dd: Links Oben</dd>
		<dt class="right top">dt: Rechts Oben</dt>
		<dd class="right top">dd: Rechts Oben</dd>
		<dt class="left bottom">dt: Links Unten</dt>
		<dd class="left bottom">dd: Links Unten</dd>
		<dt class="right bottom">dt: Rechts Unten</dt>
		<dd class="right bottom">dd: Rechts Unten</dd>
	</dl>

Die Elemente sollen nun wie beschrieben angeordnet werden.

Ich dachte zunächst, das ließe sich mit

Code: Alles auswählen

	dl, dt, dd
	{
		margin: 0em;
		padding: 0em;
	}
	
	.left
	{
		float: left;
		clear: left;
	}
	
	.right
	{
		float: right;
		clear: right;
	}

lösen, doch stellt mich das Ergebnis nicht zufrieden.

Im folgenden Bild wird oben gezeigt, wie es mit meinem CSS-Code aussieht, darunter, wie es aussehen soll.

[ externes Bild ]

Weiß jemand, wie ich mein Vorhaben realisieren kann?

Beitrag von **S2B** » 17.11.2007 11:30

teste mal das:

Code: Alles auswählen

.right {
  text-align: right
}

BB-BF-BM · Beitrag von **BB-BF-BM** » 17.11.2007 17:48

Vielen Dank für deine schnelle Antwort!

Sie funktioniert super!

BB-BF-BM · Beitrag von **BB-BF-BM** » 24.11.2007 16:34

Guten Tag!

Erst jetzt habe ich bemerkt, dass die bisherige Lösung nur solange gut funktioniert, wie in den Zellen auf beiden Seiten die gleiche Textmenge steht.
Ein zweites Bild soll das Problem demonstrieren (oben die jetzige Situation, unten der Wunschzustand): [ externes Bild ]

im CSS-Code habe ich noch die Breite für die linke Seite begrenzt

Code: Alles auswählen

	.left
	{
		float: left;
		clear: left;
		width: 45%;
	}

Ich hoffe, jemand hat eine Idee, wie man das Problem lösen könnte.

Beitrag von **S2B** » 24.11.2007 17:23

Hmm, normal sollte das clear dafür sorgen, dass sowas nicht passiert... Mit welchem DOCTYPE arbeitest du denn?

BB-BF-BM · Beitrag von **BB-BF-BM** » 24.11.2007 17:31

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Beitrag von **S2B** » 24.11.2007 19:04

OK, daran liegt's schon mal nicht... Teste mal sowas:

Code: Alles auswählen

.left {
  float: left;
  clear: both
}

.right {
  float: right
}

BB-BF-BM · Beitrag von **BB-BF-BM** » 25.11.2007 09:05

Jetzt ist die rechte Spalte wieder etwas nach unten verschoben: [ externes Bild ]

Beitrag von **S2B** » 25.11.2007 12:29

Und nächster Versuch - langsam haben wir alle Methoden durch:

Code: Alles auswählen

.left {
	clear: left;
	float: left;
	width: 45%
}

.right {
	margin-left: 45%;
	text-align: right
}

Das sollte jetzt aber funktionieren...

BB-BF-BM · Beitrag von **BB-BF-BM** » 25.11.2007 13:30

Da tritt wieder das gleiche Problem auf, wie ich es schon einmal hatte:
[ externes Bild ]

Die einzige Möglichkeit, die ich im Moment sehe, besteht in der Änderung des HTML-Codes

Code: Alles auswählen

	<dl>
		<dt class="left top">dt: Links Oben</dt>
		<dd class="left top">dd: Links Oben steht sehr viel mehr Text als in der Zelle Rechts Oben, weshalb es zu Darstellungsproblemen kommt. </dd>
		<dt class="right top">dt: Rechts Oben</dt>
		<dd class="right top">dd: Rechts Oben</dd>
		<dd class="clear">&nbsp;</dd>
		<dt class="left bottom">dt: Links Unten</dt>
		<dd class="left bottom">dd: Links Unten</dd>
		<dt class="right bottom">dt: Rechts Unten</dt>
		<dd class="right bottom">dd: Rechts Unten</dd>
	</dl>

der CSS-Code wäre dann

Code: Alles auswählen

	dl, dt, dd
	{
		margin: 0em;
		padding: 0em;
	}
	
	.left
	{
	   clear: left;
	   float: left;
	   width: 45%
	}
	
	.right
	{
	   margin-left: 45%;
	   text-align: right
	}
	
	.clear
	{
		width: 100%;
		clear: both;
	}

Damit wäre der HTML-Code aber semantisch nicht ganz korrekt, weswegen ich diese Möglichkeit nur ungern wähle.

Trotzdem vielen Dank für deine Bemühungen!
Falls dir (oder jemand anderem) noch eine Idee kommt: ich bin immer offen für neue Gedanken!