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
-
Den Bildern die Eigenschaft bottom:0; hinzufügen.
-
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,
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.
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.)