• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verhindern des Zeilenumbruch bei Definitionslisten

bin mir nicht sicher..aber versuchs mal damit:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title> test </title>
<style type=text/css>
dt{
    float: left;
    border: 1px solid;
    width: 120px;
    margin: 5px;
    text-align:center;
}
dd{
    float: left;
    width: 120px;
    margin: 5px;
    padding: 0px;
    display:block;
    border: 1px solid;
    text-align:center;
}
</style></head>
<body>

<dl>
        <dt>blabla1</dt>
        <dd>Lilli</dd>
        <dt>blabla22</dt>
        <dd>Dummy</dd>
</dl>

</body></html>

Gruß
Loon3y
 
Mh, prinzipiell funktioniert es zwar, aber komischerweise wird es damit oben bündig ausgerichtet, was sofort auffällt, wenn die Schriftgrößen unterschiedlich sind.
 
Mal dumm gefragt: "was willst du machen?"

Bei einer 2 spaltigen und mehrzeiligen "auflistung", kann man fast schon dazu übergehen eine Tabelle zu nutzen (beispielsweiße für einen Steckbrief), denn es sind ja dann auch tabellarische Daten und keine Auflistungen von Stichpunkten oder Wörtern mehr.

Gruß
Loon3y

Edit: erhöhe / verringe den wert beim margin und ändere auch width und height mal. Habe den Rahmen extra gelassen, damit du siehst wie es sich beim Ändern der Werte verhält.
 
Loon3y schrieb:
Mal dumm gefragt: "was willst du machen?"

Bei einer 2 spaltigen und mehrzeiligen "auflistung", kann man fast schon dazu übergehen eine Tabelle zu nutzen (beispielsweiße für einen Steckbrief), denn es sind ja dann auch tabellarische Daten und keine Auflistungen von Stichpunkten oder Wörtern mehr.

Gruß
Loon3y

Edit: erhöhe / verringe den wert beim margin und ändere auch width und height mal. Habe den Rahmen extra gelassen, damit du siehst wie es sich beim Ändern der Werte verhält.
Zum Vergrößern anklicken....

Ich gehe auf deinen Vorschlag ein :-D

http://www.html.de/websitecheck/24586-private-website-bitte-um-bewertung.html

- Über mich Seite -
 
Naja da es ein Steckbrief ist, kann man eine Tabelle nutzen.

Das Bild floatest du einfach rechts daneben und das war es eigentlich schon.

Alternativ, wie du es bei "jobs" hast, kannst du auch überschriften nehmen und das darunter schreiben. Meiner Meinung nach gehören in Tabellen keine Sätze.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title> test </title>
<style type=text/css>
div { width: 500px; border: 1px solid; }
img { float: right; border: 1px solid; width: 200px; height: 200px; }
</style>
</head>
<body>
<div>
<img src="#" width="" height="" alt="Dein Name" />
<table>
 <tr>
    <th> Name: </th>
    <td> xyz </td>
 </tr>
 <tr>
    <th> Geboren: </th>
    <td> hierda </td>
 </tr>
</table>
<h2>Tätigkeit:</h2>
 <p> ich mache das dies und dort etwas </p>
 
<h2>Vereine:</h2>
<ul>
 <li> Fotoclub 'Tele' Freisen: <a href="#"> ...</a> </li>
 <li> ..... </li>
</ul>

<h2>Jobs: </h2>
<ul>
 <li> Computer-Center 2 der WiWi-Fak.: <a href="#"> ...</a> </li>
 <li> ... </li>
</ul>
</div>
</body></html>
Ist natürlich kein Muss, sondern ein kann. ^^ Viele Wege führen nach Rom. Ich habe lediglich das ausgezeichnet was du da hast. Aber es lässt sich leicht formatieren ohne groß Klassen oder ID's zu vergeben. deine "Schlagwörter" wie "Name" kannst du im th einfach mit "text-transform: uppercase;" groß schreiben und die Farbe zuweisen die du magst.

Gruß
Loon3y
 
Efchen schrieb:
Das ist bei mir eine Tabelle in der zumindest in Spalte 3 ganze Sätze vorkommen.
Zum Vergrößern anklicken....

EDIT: ja bei 3 spaltig sicherlich korrekt. Wäre es aber 2-spaltig wäre es eine <dl>.

Eh, aber misst ;) unglücklich ausgedrückt. Wollte damit erläutern, dass man nicht so schreibt:

Code: 
<table>
<tr>
<td> heute war ich hier und da und dort deshalb mach ich das udn dies und das </td>
</tr>
</table>
sondern eben so:

Code: 
<p>heute war ich hier und da und dort deshalb mach ich das udn dies und das</p>
aber danke das du mich drauf aufmerksam gemacht hast ^^

Grüßli
Loon3y
 
Ich leg noch einen drauf: zweispaltiges ist nicht zwangsläufig eine Definitionsliste. Das kann trotzdem eine Tabelle sein.

Folgende Spalten:
Verein
Punkte

Eine Definitionsliste ist für mich noch ein Sonderfall, wo aber wirklich zwei Elemente in einer Beziehung zueinander stehen. Klassische Definitionslite ist für mich ein Fotoalbum mit Bildtitel. Oder ein Fremdwörterbuch oder sowas.
 
Efchen schrieb:
Ich leg noch einen drauf: zweispaltiges ist nicht zwangsläufig eine Definitionsliste. Das kann trotzdem eine Tabelle sein.

Folgende Spalten:
Verein
Punkte

Eine Definitionsliste ist für mich noch ein Sonderfall, wo aber wirklich zwei Elemente in einer Beziehung zueinander stehen. Klassische Definitionslite ist für mich ein Fotoalbum mit Bildtitel. Oder ein Fremdwörterbuch oder sowas.
Zum Vergrößern anklicken....

Naja habe ja nichts anderes behauptet, bei seinem Steckbrief habe ich selbst gesagt, dass eine Tabelle angebracht wäre, da er tabellarische Daten hat. Eine Definitionsliste zeichnet nur eine Definition und den zu definierenden Begriff aus.

Diesse 2-spaltig ist auf dein Beispiel bezogen, wenn du sagst:

Funtkion
Funktionsbeschreibung

In den anderen Punkten stimm ich dir natürlich vollkommen zu.
 
Tut mir ja Leid, dass ich noch einen drauflege, aber hat irgendjemand jetzt plausibel erklärt, warum der Steckbrief auf Silversurfers Seite keine Definitionsliste sein soll? Eine zweispaltige Tabelle mit den Daten von dort hätte doch die Spaltentitel "Eigenschaft" und "Beschreibung" -- oder zumindest sinngemäß ähnliche. Das kommt mir eher vor wie eine Definitionsliste...
 
ingoS schrieb:
Tut mir ja Leid, dass ich noch einen drauflege, aber hat irgendjemand jetzt plausibel erklärt, warum der Steckbrief auf Silversurfers Seite keine Definitionsliste sein soll? Eine zweispaltige Tabelle mit den Daten von dort hätte doch die Spaltentitel "Eigenschaft" und "Beschreibung" -- oder zumindest sinngemäß ähnliche. Das kommt mir eher vor wie eine Definitionsliste...
Zum Vergrößern anklicken....

Ja die möglichkeit besteht...nur dann würde das so aussehen (sofern es so korrekt ist):

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title> test </title>
<style type=text/css>
dl { clear: left; }
dt{
    float: left;
    border: 1px solid;
    width: 120px;
    margin: 5px;
    text-align:center;
}
dd{
    float: left;
    width: 120px;
    margin: 5px;
    padding: 0px;
    border: 1px solid;
    text-align:center;
}
</style></head>
<body>

<dl>
        <dt>Name:</dt>
        <dd>Lilli</dd>
</dl>
<dl>
        <dt>Geboren:</dt>
        <dd>dort</dd>
</dl>
<dl>
        <dt>größe:</dt>
        <dd>so groß</dd>
</dl>
</body></html>
das wäre doch mehr wie eine kleine tabelle, oder? Eben ansichtssache..habe ja selbst gesagt, das ist nur ein vorschlag, kein "muss" =)

Grüßli
Loon3y
 
Eigentlich wäre eine Definitionsliste weniger als eine "kleine" Tabelle.
Wenn ich mit deinen Definitionslisten vergleiche, dann entspricht jedes <dl> einem <tr> und <dt>+<dd> je einem <td>. Das wäre also gleich viel, aber es steht ja bei der Tabelle noch <table></table> drumherum.
Außerdem muss man nicht für jede Definition eine neue Liste aufmachen. In meinen Augen müsste der HTML-Code so aussehen:
Code: 
<dl>
        <dt>Name:</dt>
        <dd>Lilli</dd>

        <dt>Geboren:</dt>
        <dd>dort</dd>

        <dt>größe:</dt>
        <dd>so groß</dd>
</dl>
Wenn du allerdings den kombinierten HTML- und CSS-Code gemeint hast, sieht die Sache möglicherweise anders aus, das habe ich jetzt nicht nachvollzogen.
Auf alle Fälle meine ich mich düster erinnern zu können, dass der Internet Explorer mit Überraschungen aufwartet, wenn man dem gleichen Element float und clear zuweist, was in diesem Fall wohl, wenn ich das richtig sehe, erforderlich wäre.
 
Die Frage, die man sich höchstens sellen könnte, ist ob es bei einer dl immer eine Definition sein muss, denn das ist bei einem Steckbrief IMHO nicht so. Aber ich könnte mir hier durchaus sogar eine dl vorstellen.
 
ingoS schrieb:
Wenn du allerdings den kombinierten HTML- und CSS-Code gemeint hast, sieht die Sache möglicherweise anders aus, das habe ich jetzt nicht nachvollzogen.
Auf alle Fälle meine ich mich düster erinnern zu können, dass der Internet Explorer mit Überraschungen aufwartet, wenn man dem gleichen Element float und clear zuweist, was in diesem Fall wohl, wenn ich das richtig sehe, erforderlich wäre.
Zum Vergrößern anklicken....

Das Problem bei deiner Auszeichnung ist, dass er wollte dass dt links und dd rechts daneben ist (auf gleicher Höhe), was aber hier dann nicht geschiet.
Mich würde sehr interessieren, wie man dein Beispiel dann anstellt. Ich komme nämlich momentan da nicht drauf! *g*

Meine Lösung war dann float..nur wenn man alles in ein <dl> schreib, dann hat man keinen zeilenumbruch sondern alles nebeneinander weg.
Deshalb für jeden Stichpunkt die Liste öffnen und schließen. =(

Wie schon erwähnt, das ist nur mein Vorschlag gewesen, wenn man eine <dl> nimmt. Falsch ist es sicherlich nicht, aber ich wäre da bei dem Steckbrief doch eher zur Underscheidung von tabellarischen Daten und dann einfach noch Kurzbeschreibung ausgezeichnet in <p> und letzenendes die Links als <ul>, da es eine Auflistung von Links ist.

Viele Wege führen nach Rom. Doch nur einer zurück.. ^^
 
Code: 
dt {
clear:left;
float:left;
}

dt links neben dd und dt+dd untereinander.

Wäre eigentlich auch ein div, das dt+dd umschließt erlaubt? Rein Semantisch für mich logisch. Aber syntaktisch ok?
Dann hat man nicht die Probleme mit dem IE, der float+clear in einem Element glaub ich nicht mag...
 
@Loon3y: Ganz unten in meinem Beitrag hatte ich das mit dem Floaten geschrieben, was Efchen auch in Code demonstriert hat. ;)

Efchen schrieb:
Wäre eigentlich auch ein div, das dt+dd umschließt erlaubt? Rein Semantisch für mich logisch. Aber syntaktisch ok?
Dann hat man nicht die Probleme mit dem IE, der float+clear in einem Element glaub ich nicht mag...
Zum Vergrößern anklicken....
Wäre schön, ist aber leider nicht möglich.
 
Ob table oder dl hier richtiger ist mag ich nicht sagen.
2 Spalten klingt erstmal nach dl. Table ist jedoch einfacher zu handhaben.

In eine Liste gehören natürlich nur Listeneinträge.
In den Listeneinträgen selber sind alle Elemente erlaubt.

Eine dl möchte mann meißtens nur zweispaltig darstellen. Dazu braucht man nur für die erste Spalte ein float. Die zweite kann man mit marigin-left auf den nötigen Abstand bringen.

dd muß für IE5-7 nicht gecleart werden wenn das Elternelement Layout hat (hier mit width für dl).
Andere Browser können mit easy clearing (dd:after) umgehen:
Code: 
  * {
margin: 0;
padding: 0;
}

dl {
background-color: red;
float: left;
width: 45em;
}

dt, dd {
border-top: 5px solid gray;

}

dt {
width: 20em;
float: left;
background-color: olive;
clear: left;
}

dd {
margin-left: 20em;
background-color: pink;
}

dd:after {
display: block;
content: "clerer";
clear: left;
height: 0;
visibility: hidden;
}

Für gleichlange Spalten von dd und dt bietet sich faux columns an.

Eine css-Tabelle (display: table) ist nicht möglich da kein Element für display: table-row zur Verfügung steht.
display: inline-block scheidet wegen dem ff2 (und älter) aus.
 
Zuletzt bearbeitet:
Hallo,

ich wollte das ganze gerade auf der Seite mittels einer Tabelle umsetzen, als mir bewusst wurde, das ich somit ein Gestalltungmittel verspiele - ich finde es schöner, wenn der Inhalt der rechten Seite (also z.B. Ort: Hamburg) sich unmittelbar an den Inhalt der linken Seite anschließt.
Bei einer Tabelle wird dies aber unmöglich - oder gibt es auch hierfür eine Lösung?

Andernfalls lasse ich es wie es ist.

Servus
Chris
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben