Ungeordnete Liste - Bilder an Unterkante ausrichten

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]

Bildergalerie 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; }
Text
Text
Text
Text
Text
Text
Text
Text

 

[/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

  1. Den Bildern die Eigenschaft bottom:0; hinzufügen.

  2. IE6 solltest du dir keine Gedanken drüber machen, wer den nutzt ist selber schuld.
    Hat momentan nur noch unter 13%
    http://www.axiis.org/examples/BrowserMarketShare.html

Versuch es mal das Border aufzusplitten in border-width und … color und… aufzusplitten, ob es dann geht.

MfG

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

Hallo,

das zweite Problem habe ich gelöst. Wenn die einzeilige border-Angabe durch

border-color: grey;
border-style: solid;
border-width: 1px;
ersetzt wird klappts auch mit dem IE 6.0.

Gruss

MrMurphy

Definitionslisten für Bilder? Ich würde

    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

    -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;
    }

    usw.[/code]

    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]

<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>
[/code]

Edit: Die inneren div-Tags sollten besser p-Tags sein. Ich habe aber gerade keine Lust, das zu ändern.

Hallo,

dein Vorschlag wird im IE 6 und 8 leider verschoben dargestellt.

Gruss

MrMurphy

[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;
    }[/code]

ich nehme an, dass das Bild auf der Baseline steht. Wenn Du das Bild mit vertical-align:bottom; formatierst, sollte das Bild nach untenrutschen.

ist eine Definitionsliste. Ungeordnete Listen sind
    .

    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.

Stimmt eigentlich. Ich hatte beim Testen bemerkt, dass

keine Block-Level-Elemente enthalten kann. Deshalb bekam ich den Eindruck, es sei vielleicht nicht die beste Wahl. Aber wäre natürlich kein Problem.

Bekommt jemand mit 'ner Definitionsliste (

) den gewünschten Effekt hin?

Ausgehend vom ersten Post:

/*vertical-align*/
dl dt {
display: table-cell;
vertical-align: bottom;
width: 160px;
}

dl dt span {
display: none;
}

und für den IE<8:

<!--[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]

Text
[/HTML]

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.)