XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   definitionslisten problem (http://xhtmlforum.de/showthread.php?t=67294)

gandalf_hh 16.04.2012 07:20

definitionslisten problem
 
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 16.04.2012 08: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 16.04.2012 09: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 16.04.2012 10: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 17.04.2012 03:19

Zitat:

Zitat von MrMurphy (Beitrag 514707)
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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:11 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023