definitionslisten problem

gandalf_hh · #1 (**permalink**) 16.04.2012, 06:20

leider komme ich mit definitionslisten nicht klar und bräuchte mal eure hilfe zu mein problem:
ich möchte das der gelbe kasten "profile dd" sich ganz normal wie ein div verhält und am rosanen kasten "profile dt" klebt. ich hab viel versucht aber leider nicht gelöst.

<!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>Unbenanntes Dokument</title>
<style type="text/css">

.profile {float:left; clear:left; width:990px; height:310px; background-color:#00F;}

.profile dt {
float:left;
clear:left;
width:200px;
height:150px;
background-color:#F3F;
}

.profile dd {
float:left;
clear:left;
width:700px;
height:150px;
background-color:#FF0;
}
</style>
</head>
<body>
<dl class="profile">

<dt><img src="profile/zitrone.jpg"/></dt>
<dd>lalala<br />lalala<br />lalala</dd>

</dl>
</body>
</html>

MrMurphy · #2 (**permalink**) 16.04.2012, 07:37

Hallo,

setze Quelltext in Foren zunächst mal in den vorgesehen Tag.

Gib Bildern bitte immer eine Breite und eine Höhe mit. Das gehört zum guten html und mangels des Bildes fehlt mir jetzt z. B. diese Angabe, deshalb habe ich Text genommen.

Definier mal bitte, was du mit "...ganz normal...klebt..." meinst? Ich habe mal geraten, das du damit meinst, das die nebeneinander auf gleicher Höhe stehen sollen. Das "richtige" Verhalten ohne Formatierung wäre hingegen, das sie als Blockelement untereinander stehen.

Beschäftige dich mal mit css-reset. Ich habe mal ein einfaches eingefügt. Das hilft unerwartete Abstände zu verhindern.

Folgend ein Lösungsbeispiel von mir:

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>Unbenanntes Dokument</title>
<style type="text/css">

html {
   padding: 0px;
   border: 0px;
   margin: 0px;
   font-family: Arial, Helvetica, sans-serif;
}

dl.definitionsliste-tabelle  {
   float: left;
   width: 900px;
   margin: 1em 0;
   padding: 1em;
   background-color: gold;
}
.definitionsliste-tabelle dt {
   float: left;
   clear: left;
   width: 200px;
   height: 150px;
   margin: 0;
   padding: 5px;
   font-weight: bold;
   background-color: red;
}
.definitionsliste-tabelle dd {
   float: left;
   width: 680px;
   height: 150px;
   margin: 0;
   padding: 5px;
   background-color: green;
}

</style>
</head>
<body>
<dl class="definitionsliste-tabelle">
   <dt>
      <h2>Ein kurzer Text</h2>
   </dt>
   <dd>
      <p>Ein etwas längerer Text<br />mit 2<br />Zeilenumbrüchen</p>
   </dd>
</dl>
<dl class="definitionsliste-tabelle">
   <dt>
      <h2>Ein kurzer Text</h2>
   </dt>
   <dd>
      <p>Ein etwas längerer Text<br />mit 2<br />Zeilenumbrüchen</p>
   </dd>
   <dt>
      <p>Ein etwas längerer<br />Text mit 2<br />Zeilenumbrüchen</p>
   </dt>
   <dd>
      <p>Ein kurzer Text</p>
   </dd>
   <dt>
      <h2>Ein kurzer Text</h2>
   </dt>
   <dd>
      <p>Ein etwas längerer Text<br />mit 2<br />Zeilenumbrüchen</p>
   </dd>
</dl>
</body>
</html>

Gruss MrMurphy

gandalf_hh · #3 (**permalink**) 16.04.2012, 08:42

danke für die mühe.
durch "magin 0" und das falsche "clear:left;" bei ".profile dd" hat alles geklappt. superrrr

ich möchte viele profile auflisten und hatte es mit DIVS gemacht. man hat mir gesagt es ist besser mit definitionslisten.
"bild + bschreibung"
"bild + bschreibung"
"bild + bschreibung"
"bild + bschreibung"
"bild + bschreibung"

MrMurphy · #4 (**permalink**) 16.04.2012, 09:05

Hallo

Zitat:

man hat mir gesagt es ist besser mit definitionslisten.

Es gibt mehrere Möglichkeiten, wobei die Lösung mit den Defintionslisten eine zwar nicht gebräuchliche aber sinnvolle und zulässige ist, die ich selbst gerne nutze.

Es gibt zwar einige Webseitenersteller, die die Verwendung von Definitionslisten gerne auf Glossare (Begriff - Bedeutung des Begriffs) einschränken und dies auch allen anderen aufzwingen möchten, aber von denen sollte man sich nicht schrecken lassen. Für sich können die ja gerne so verfahren.

Einige Möglichkeiten auch in Verbindung mit Grafiken findest du z. B. auch unter

Definition lists – misused or misunderstood? | Max Design

Daher habe ich auch die Grundlagen für mein Beispiel.

Gruss

MrMurphy

heiko_rs · #5 (**permalink**) 17.04.2012, 02:19

Zitat:

Zitat von MrMurphy

Es gibt zwar einige Webseitenersteller, die die Verwendung von Definitionslisten gerne auf Glossare (...) einschränken

Die Zeit dieser Streitigkeiten ist zum Glück vorbei, denn spätestens mit HTML5 wurde ihr stark erweiterter Einsatzbereich offiziell: 4.5.8 The dl element — HTML5

Umso deutlicher wird dies dadurch, dass für ihren ursprünglichen Einsatzzweck, nämlich ein Glossar, jetzt noch dfn innerhalb von dt eingesetzt werden soll - d.h. die dl ist per se keine Glossar-Liste mehr, sondern muss erst (durch die Erweiterung um dfn) dazu gemacht werden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Font der Überschrift ändern (Problem)	artist	CSS	2	07.12.2007 10:01
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28