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

Ungeordnete Liste - Bilder an Unterkante ausrichten

M

MrMurphy

Senior HTML'ler
Hallo,

ich möchte mittels einer ungeordneten Liste (dl dt dd) eine Vorschau für eine Bildergalerie erstellen. Die Vorschaubilder sind höchstens 140px breit oder hoch.

Erst mal der Quelltext:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bildergalerie</title>
<style type="text/css">
dl {
    padding: 8px;
    border: 1px solid grey;
    margin: 1px;
    width: 160px;
    height: 180px;
    float: left;
}
dl dt {
    padding: 0;
    border: 0;
    margin: 0;
    width: auto;
    height: 150px;
}
dl dd {
    padding: 0;
    border: 0;
    margin: 0;
    text-align: center;
}
dl dt img {
    padding: 0;
    border: 1px;
    margin: 0 auto;
    display: block;
    background-color: #F00;
}
</style>
</head>
<body>
<dl>
  <dt>
    <img src="001.jpg" width="105" height="140">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="002.jpg" width="140" height="120">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="003.jpg" width="100" height="80">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="004.jpg" width="100" height="80">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="005.jpg" width="100" height="80">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="006.jpg" width="100" height="80">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="007.jpg" width="100" height="80">
  </dt>
  <dd>Text</dd>
</dl>
<dl>
  <dt>
    <img src="008.jpg" width="100" height="80">
  </dt>
  <dd>Text</dd>
</dl>
<p style="clear:both;">&nbsp;</p>
</body>
</html>
Problem 1: Zur Zeit richten die Bilder sich mit ihrer Oberseite an dem umgebenden dt-Bereich aus. Ich möchte die Bilder an der Unterkante des dt-Teils ausrichten, so das sie immer den gleichen Abstand zum darunterliegenden Text haben. Wie kann das bewerkstelligt werden?

Problem 2: Im Internet Explorer 6.0 wird bei mir der Rand des dl-Teils (border: 1px solid grey) nicht angezeigt. Wie kann das behoben werden, da der Rahmen angezeigt werden soll.

Gruss

MrMurphy
 
Hallo,

1. Funktioniert leider nicht. Vielleich füge ich es auch falsch ein. Wo und wie muss ich die Anweisung einfügen?

2. Warum sollte ich 13% der möglichen Besucher ein schlechteres Layout zumuten?

Gruss

MrMurphy
 
Definitionslisten für Bilder? Ich würde <ul> nehmen, aber gut, nicht entscheidend.

Ist offenbar gray, nicht grey.

Was mir spontan zu der Anordnung der Bilder einfällt:

Definiere in jedem grau umrandeten Block ein <div>-Element mit fester Breite und Höhe und setze diesen Elementen die entsprechenden Hintergrundbilder als background.

Code: 
.thumbnail {
    width: 200px;
    height: 200px;
    background: #000 bottom center no-repeat;
}

<div class="thumbnail" style="background-image: url('img008.jpg');"></div>

...

<div class="thumbnail" style="background-image: url('img009.jpg');"></div>

usw.

Habe es nicht probiert, aber das könnte klappen.
 
Hallo,

danke, aber es sollen Vorschilder sein, die Links auf ihre größere Darstellung enthalten sollen Die Links habe ich weggelassen, um den Quellcode für die Problemlösung übersichtlicher zu gestalten.

Können denn mit ul die Bilder auch gefloatet werden?

Ich habe die ungeordnete Liste gewählt, weil ich dann problemlos Bilder mit Links incl. kurzen Bildbeschreibungen einfügen kann und sich die anderen je nach Bildschirmgröße automatisch anordnen.

Die Schreibweise für die Farbe habe ich korrigiert, danke für den Hinweis.

Gruss

MrMurphy
 
Vielleicht so. Nicht übermäßig schick... Irgendwo wird man bei der Problemstellung immer improvisieren müssen, denke ich.

Code: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Demo</title>
    </head>

    <style type="text/css">
        img {
            border: none;
        }

        .test li {
            border: 1px solid #ccc;
            float: left;
            padding: 5px;
            margin: 5px;
            list-style: none;
            text-align: center;
        }

        .test div {
            width: 200px;
            height: 200px;
            background: #f00;
            position: relative;
        }

        .test div div {
            position: absolute;
            bottom: 0;
            background: #0f0;
            text-align: center;
        }

        .test a {
            text-decoration: none;
        }
    </style>

    <body>
        <ul class="test">
            <li>
                <div>
                    <div style="height: 32px;">
                        <a href="http://wikipedia.org/">
                            <img src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Cproxy0.png" alt="" />
                        </a>
                    </div>
                </div>

                <p>Beschreibung</p>
            </li>
            <li>
                <div>
                    <div style="height: 60px;">
                        <a href="http://wikipedia.org/">
                            <img src="http://upload.wikimedia.org/wikipedia/commons/e/e0/Ayuda-ai.jpg" alt="" />
                        </a>
                    </div>
                </div>

                <p>Beschreibung</p>
            </li>
        </ul>
    </body>

</html>

Edit: Die inneren div-Tags sollten besser p-Tags sein. Ich habe aber gerade keine Lust, das zu ändern.
 
Zuletzt bearbeitet:
Code: 
        img {
            border: none;
            display: block;
        }

        .test li {
            border: 1px solid #ccc;
            float: left;
            padding: 5px;
            margin: 5px;
            list-style: none;
            text-align: center;
        }

        .test div {
            width: 200px;
            height: 200px;
            background: #f00;
            position: relative;
        }

        .test div div {
            position: absolute;
            left: 0;
            bottom: 0;
            background: #0f0;
            text-align: center;
        }

        .test img {
            margin: 0 auto;
        }

        .test a {
            text-decoration: none;
        }
 
MrMurphy schrieb:
Problem 1: Zur Zeit richten die Bilder sich mit ihrer Oberseite an dem umgebenden dt-Bereich aus. Ich möchte die Bilder an der Unterkante des dt-Teils ausrichten, so das sie immer den gleichen Abstand zum darunterliegenden Text haben. Wie kann das bewerkstelligt werden?
Zum Vergrößern anklicken....
ich nehme an, dass das Bild auf der Baseline steht. Wenn Du das Bild mit vertical-align:bottom; formatierst, sollte das Bild nach untenrutschen.
 
MrMurphy schrieb:
ich möchte mittels einer ungeordneten Liste (dl dt dd)
Zum Vergrößern anklicken....
<dl> ist eine Definitionsliste. Ungeordnete Listen sind <ul>.

mermshaus schrieb:
Definitionslisten für Bilder? Ich würde <ul> nehmen, aber gut, nicht entscheidend.
Zum Vergrößern anklicken....
Warum? Das ist doch der perfekte Einsatz für eine Definitionsliste, weil die Bilder alle einen Text als Beschreibung bekommen. Das Image ist der Term, die Beschreibung die dazugehörige Definition.
 
Efchen schrieb:
Warum? Das ist doch der perfekte Einsatz für eine Definitionsliste, weil die Bilder alle einen Text als Beschreibung bekommen. Das Image ist der Term, die Beschreibung die dazugehörige Definition.
Zum Vergrößern anklicken....

Stimmt eigentlich. Ich hatte beim Testen bemerkt, dass <dt> keine Block-Level-Elemente enthalten kann. Deshalb bekam ich den Eindruck, es sei vielleicht nicht die beste Wahl. Aber <img> wäre natürlich kein Problem.

Bekommt jemand mit 'ner Definitionsliste (<dl>) den gewünschten Effekt hin?
 
Ausgehend vom ersten Post:
Code: 
/*vertical-align*/
dl dt {
display: table-cell;
vertical-align: bottom;
width: 160px;
}

dl dt span {
display: none;
}

und für den IE<8:
Code: 
<!--[if lt IE 8]>
<style>
dl dt span {
display: inline;
zoom:1;
height: 150px;
}

dl dt {
height: auto;
text-align: center;
}

dl dt img {
display: inline;
}

</style>
<![endif]-->

Das span gehört in dt:
HTML: 
<dl>
  <dt>
   <span></span><img src="t1.jpg" width="105" height="140">
  </dt>
  <dd>Text</dd>
</dl>

dl muß viel höher werden damit dd auch bei Schriftvergrößerung in den Rahmen passt. Der IE< 7 würde die jeweilige dl sonst von sich aus vergrößern.
Die Listen müssen in diesem Beispiel aber alle gleich hoch sein.

edit:
Code geändert,
jetzt passt es auch im IE5.5 und vielleicht auch im IE5.0 (IE<5.5 kennt zoom nicht, löst aber durch die height layout aus.)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben