zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden definitionslisten problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.04.2012, 06:20
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.04.2012, 07:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.04.2012, 08:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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"

Geändert von gandalf_hh (16.04.2012 um 08:44 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.04.2012, 09:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 17.04.2012, 02:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
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
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


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