Hallo Forum,
ich finde Rahmen mit Text unter den Bildern ganz praktisch und hab mir dazu folgendes CSS gebaut:
ul.img {
background-color: #CCCCCC;
list-style: none;
padding:5px;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
-moz-border-radius:8px;
}
.img li {
font-size: 0.8em;
text-align: center;
}
.img li img {
border:none;
}
.links {
float:left;
width: auto;
margin:0 0.5em 0.3em 0;
}
.rechts {
float:right;
width: auto;
margin:0 0 0.3em 0.5em;
}
In HTML werden die Bilder folgendermaßen aufgerufen:
<ul class="img links"><li><a href="url()" target="_blank">
<img src="pfad" width="67" height="74"></a>
<br>Text 1</li></ul>
<ul class="img links"><li><a href="url()" target="_blank">
<img src="pfad" width="63" height="74"></a>
<br>Text 2</li></ul>
Das sieht auch ganz gut aus und die Bilder werden schön hintereinander aufgereiht. Auch die Links funktionieren. Aber ...
Die ganze Galerie möchte ich in einem DIV Container haben.
Das CSS dafür lautet:
.content {
background-color: #e9ffe9;
text-align: left;
font-size: 1em;
padding: 1em;
margin: 0.5em 0.1em 0.5em 0.1em;
border: 2px solid #6EBD80;
-moz-border-radius: 8px;
}
Aufgerufen in HTML wird er mit
<div class="content">
Dann kommt die oben genannte Bildergalerie mit vielen <ul .... ></ul> hintereinander weg.
</div>
Leider liegt die Bildergalerie jetzt nicht in dem .content Rahmen. Sowohl IE als auch FF zeichnen mir einen leeren .content Rahmen und die Bilder liegen unabhängig vom DIV Rahmen darüber.
Wie kriege ich die Bilder in den DIV Rahmen und bringe den DIV Rahmen dazu, sich in Höhe und Breite anzupassen - abhängig von der Anzahl der Bilder ?
Hat jemand dazu eine Idee ? Dazu muss ich sagen, ich bin noch Newbi bei CSS und die Seite ist auch noch nicht im Netz, sodass man sie sich leider noch nicht ansehen kann.