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

Bild & Text; Definitionsliste verwendbar?

J

JensB

Neues Mitglied
Hallo,

im Zuge der "Renovierung" meiner HP möchte ich auch gerne diese Tabellen loswerden: Elektronik - www.jb-electronics.de

Also das kleine Bild auf der linken Seite, und danach der Beschreibungstext. Wie muss ich die <dl> mit CSS formatieren, damit das <dt> (das Bild) und die <dd> (der Text) in einer Zeile sind?

Oder gibt es eine bessere Lösung?

Gruß
Jens
 
Das ist der default-margin vom Browser.
Gebe dd einen margin-left der der Breite von dt entspricht.
Suche mal nach css-reset.

Deine Bilder sind vielleicht nur Schmuckgrafiken. Als solche würden sie in kein eigenes Element gehören.
Der Link könnte in dd stehen und die Beschreibung in dt.

@threadi
Das ist Zufall. Je nach Inhalt oder Schriftgröße siehst du einen Versatz wenn dd höher wie dt wird.
 
Zuletzt bearbeitet:
Hallo,

also das Bild im <dt> ist schon beschreibend und daher mehr als bloße Dekoration, im Elektronik-Teil meiner Webseite sieht man dort zum Beispiel ein Bild der jeweiligen Schaltung, oder im Programmieren-Teil einen Screenshot des jeweiligen Programms. Ich denke daher, dass das semantisch noch vertretbar ist.

Klar, ich kann die Breite des dts auf die Breite des Bildes stellen, aber das finde ich sehr unflexibel. Geht es auch anders?

Habe hier mal einen Screenshot hochgeladen wie es z.B. bei mir aussieht: http://www.jb-electronics.de/ergebnis.jpg

Gruß
Jens
 
beiden float: left; geben.

edit:
z.B
Code: 
dl:after {
content:".";
display:block;
clear:left;
height:0;
visibility:hidden;
}

dd {
border:1px solid red;
float:left;
width:400px;
margin:0;
}
Eine Breite für dd ist in diesem Beispiel Pflicht.
IEs bis Vers.7 kennen :after nicht. Für diese Browser reicht zoom: 1; auf dl um die floats einzuschließen (ab IE5.5 win).
 
Zuletzt bearbeitet:
Danke für deine Hilfe. Aber wenn ich bei dieser Lösung - die das gleiche bezweckt wie die obige - für das dd eine Breite angeben muss neben diesen anderen Änderungen und teilweisen Inkompatibilitäten (:after) dann ist das ungleich komplizierter.

Warum sind denn die <dt> und <dd> so komisch "ineinander gewachsen" wie auf meinem Screenshot zu sehen? Ist doch irgendwie seltsam, dass ich das <dd> mit margin-left nicht vom <dt< trennen kann.
 
Weil dar das gefloatete dt nur von seinem nachfolgenden Inhalt umflossen wird. Das Element selber (dd) beginnt an der paddingkannte von dl.
Du könntest dd display: table-cell geben. Für den IE< 8 zoom:1; auf dd:
Code: 
dd {
border:1px solid red;
display:table-cell;
margin:0;
zoom: 1;   /* IE 5.5 - 7 */
}
 
Zuletzt bearbeitet:
Ui... Ich merke, das mit den floats habe ich noch nicht so ganz verinnerlicht. Ich werde mir es nochmal in einem Tutorial durchlesen, danke für deine Hilfe.
 
Eine weitere Fragestellung ist aufgetreten: Wenn der Beschreibungstext zu lang wird, dann ist er vertikal größer als das Bild. In der <table->-Version wurde dann das Bild vertikal zentriert, sodass der Text oben wie unten gleichermaßen weit übersteht.

Geht das auch mit der <dl>-Variante?

Ich habe versucht, das dt so zu formatieren:
Code: 
dd {
    float: left;
    width: 50px;
    margin-right: 0.4em;
    margin-left: 0.2em;

    /* das Neue: */
    display: table-cell;
    vertical-align: middle;

}
Leider hat das keine Auswirkung. Was tun?

Danke für eure Hilfe,
Jens
 
So wie ich das bisher verstanden habe hat der Inhalt von dt (das Bild) eine Breite von 50px und dd soll die übrige Breite einnehmen.
Nun hast du aber dd eine Breite von 50px gegeben.
Dein gesamter Inhaltsbereich hat eine feste Breite von 810px ( div.Seite ). Warum willst du dann innerhalb von div.Seite mit unbekannten Breiten arbeiten? Oder haben die Bilder eine unterschiedliche Breite?


Zeige mal einen aktuellen Link in dem deine Versuche zu sehen sind.
 
Zuletzt bearbeitet:
Hier der aktuelle Stand der Dinge: Testseite

Zwei Probleme:

  • Das Bild (also der Bereich im <dt>) ist nicht vertikal zum Text zentriert
  • Es entsteht ein "Treppeneffekt", wenn das Bild zu Ende ist. Das möchte ich aber verhindern.
 
  1. Du könntest inline-blöcke verwenden.
  2. Den Treppeneffekt kann ich gerade nicht sehen.

Inline-block:
html
Code: 
<dl>
<dt>
&lt;dt&gt;
</dt><!--
--><dd>
&lt;dd&gt <br/>
Lorem Ipsum
</dd>
</dl>
css
Code: 
  * {
margin: 0;
padding: 0;
}

dl {
display: inline-block;
}

dt,
dd {
display: inline-block;
background-color: gray;
}

dt {
background-color: maroon;
}

dd {
vertical-align: middle;
border-left: 5px solid green;
}
Allerdings funktioniert das nicht im ff<=2 und der IE<8 bräuchte auch hier einen kleinen Hack.

Edit:
Nachtrag (Float-Variante):
Den Treppeneffekt hattest du vielleicht zwischendurch weil dt höher wie dd war und das Clearfix nicht angewendet hast.
 
Zuletzt bearbeitet:
Danke, ich werde es heute nachmittag mal ausprobieren. Aber eine kleine Frage noch: Warum klappt es mit display: table-cell; nicht?
 
Tabellenzellen lassen sich nicht floaten.
Aus einer einzelnen Tabellenzelle (table-cell) ohne umliegendes tr (table-row) generiert der Browser selber diese Elemente um die Zelle , unabhängig von den Nachbarelementen.
Die Zelle ist also nur so hoch wie ihr Inhalt.
Wenn die Zelle mit ihrer Nachbarzelle mitwachsen soll, bräuchtest du eine komplette css-Tabelle mit display: table / display: table-row / display: table-cell (wie in einer html-Tabelle auch).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben