Automatischer Zeilenumbruch in <dd> - Tags

[BenniK]

Hallo zusammen,

ich habe ein Problem, und zwar habe ich eine Liste mit dt und dd Tags erstellt.
Es funktioniert auch alles soweit ganz gut, bis auf folgende Tatsache:
Ist beispielsweise der Text im <dd> Tag zu lang, so führt er ihn in der nächsten Zeile fort. So weit so gut.
Problem ist jetzt nur, dass in dieser Zeile ebenfalls der Text aus dem <dt> Tag angezeigt wird. Es kommt also zu einer Überlappung.

Was kann ich dagegen tun? Ich hatte es mit einem harten Zeilenumbruch verushct, aber das ist nicht die Lösung. Denn dieser wird ja immer angezeigt und ist der <dd> Tag nur eine Zeile, so sieht das total blöd aus. :(

Hat jemand eine Idee, wie ich das im <dd> Tag gealisieren kann?

So sieht mein Konstrukt ungefähr aus:

<dl>
          <dt>Coffee</dt>
            <dd>Black hot drink</dd>
          <dt>Milk</dt>
            <dd>Das hier ist ein viel zu langer Text. Das hier ist ein viel zu langer Text.Das hier ist ein viel zu langer Text.Das hier ist ein viel zu langer Text.</dd>
      <dt>Water</dt>
            <dd>Water drink</dd>
    </dl>

Hier überlappt sich jetzt "Das hier ist ein viel zu langer Text. Das hier ist ein viel zu langer Text.Das hier ist ein viel zu langer Text.Das hier ist ein viel zu langer Text." mit "Water".

Hat jemand Rat unbd kann mir helfen?
Vielen Dank schon einmal im Voraus! :grin:

LG,
Benni

 

[Banana_Jones]

Ohne CSS ergibt der Code eine korrekte Darstellung. Ich nehme also an, dass es dazu noch div. CSS-Angaben gibt, die du uns hier vorenthälst ;)

 

[BenniK]

Es handelt sich um eine Datei.
Ich weiß jetzt nicht, in wie fern es da noch unterschiede gibt :(

 

[djheke]

Zeig doch mal alles was du hast. So können wir nicht helfen

 

[BenniK]

Ich habe so etwas hier:

Um den Fett markierten Bereich geht es...

Danke für eure Hilfe :-D

 

[BenniK]

Hier ist das komplette:

Hier ist das komplette:

Der "fette" Teil unten, darum gehts :)

Vielen Dank im Voraus! ;Jump

 

[Banana_Jones]

Damit können wir erstmal nichts anfangen. Hier geht es um ein Darstellungsproblem, also ist der erzeugte HTML-Code (der, der später im Browser ankommt) relevant, erstmal nicht wie und mit welchen Schleifen die Ausgabe erzeugt wird.
Zusätzlich enorm wichtig sind CSS-Angaben, die die Darstellung der Definitionslisten steuern, denn sollte der Code so aussehen wie in deinem ersten Post, liegt der Hund dort begraben.

Alles in Allem wäre es am Besten, du könnest uns einen Link zur fraglichen Seite zur Verfügung stellen.

 

[BenniK]

Ich habe leider keinen Link, da die Seite nur intern zu erreichen ist. :(

Ich folgenden nochmal die. css Datei und vllt tut sich dort ja der Fehler auf. Ich weiß langsam nicht mehr weiter....

 

[Banana_Jones]

Du vergibst hier

footer dt, dd {    line-height: 21px;
    height: 21px;
}

eine feste Höhe. Der lange Text passt aber nicht in das 21 Pixel hohe Element, deswegen läuft er raus und ins nächste Element hinein. Nimm die Höhe raus und es sollte passen.

Für das Debuggen solcher CSS-Geschichten bieten sich die Entwicklertools deines Browsers an (IE und Chrome bringen bereits welche mit, für für den Firefox gibts die Erweiterun FireBug)

 

[BenniK]

Danke für die schnelle Antwort. :)

Meinst du line-height raus oder nur height? Oder gar beides?

 

[Banana_Jones]

line-height gibt die Zeilenhöhe an, und hat nur sehr bedingt Auswirkungen auf die effektive Höhe des Elementes (bspw. bei einem einzeiligen Element mit großer line-height und keinen anderen height-Angaben). Keinesfalls jedoch wird durch die line-height die Höhe eines Elementes "begrenzt", was height tut.

 

[BenniK]

Hat funktioniert - vielen vielen Dank an dich! :)