DIV-Image mit Class sortieren

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

dies ist mein erster Beitrag, daher eine kurze Vorstellung:
Mein Name ist Ralf, genannt Schischi, bin 34 Jahre alt, IT-ler von Beruf aus der Schiene Netzwerk, Hardware und Management.
Hobbymäßig bastel ich die ein oder andere Homepage, welche den Ansporn haben sich qualitativ zu steigern.

Derzeit bastel ich an einem Problem zu dem ich keine Lösung finde, ich denke aufgrund der für mich eingeschränkten Möglichkeiten…bislang.

Ich habe einige Fotos, welche in 2, bzw. 3 Größen vorliegen. Alle Fotos haben die gleichen Höhe in PX, 225. die Breite unterscheidet sich.
Die Bilder möchte ich gerne auf der Seite nebeneinander darstellen, hübsch angeordnet. Das geht ja an sich noch.

Ich habe die Bilder aber durch ein im Netz gefundenes Tutorial mit einer Bildunterschrift dargestellt:

[ATTACH=full]4142[/ATTACH]
Im HTML sieht das so aus:

EinzelzimmerEinzelzimmer
EinzelzimmerEinzelzimmer
DoppelzimmerDoppelzimmer

Hierzu habe ich mir auch eine CSS Klasse erstellt:

.unterschrift496 {
width: 357px;
position: relative;
}

.unterschrift496 img {
display: block;
}

.unterschrift496 span {
background-color: silver;
background-color: hsla(0, 0%, 100%, 0.4);
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
font-size: 15pt;
font-family: sans-serif;
font-weight: bold;
color: #341810;
float: right;
}

Diese habe ich wie gesagt aus einem Tutorial, habe sie aber soweit verstanden.

Ich schaffe es nun nicht, die Bilder nebeneinander, zum Beispiel 3 Stück, darzustellen UND die Unterschrift mit anzuzeigen. Diese verschwindet aus dem Bild und steht dann unter dem Bild… das will ich ja nicht.

Im Endeffekt möchte ich 4 oder 5 Zeilen mit verschiedenen Bildern, welche sich auf die Breite der Seite verteilen mit dem gleichen Abstand.

Ich hoffe auf ein wenig Hilfe…

Vielen Dank schonmal im Voraus.

Gruß
Ralf

2

So sollte es funktionieren.

<!DOCTYPE html>
<html lang="de">
<head>
<title>Galerie</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">

#galerie {
width:906px;
margin:0 auto;
overflow:hidden;
}

figure {
margin:0;
padding:0;
position:relative;
float:left;
border-right:2px solid #fff;
}

figure img {
display:block;
}

figcaption {
position:absolute;
left:0;right:0;bottom:0;
padding:5px;
background:rgba(0,0,0,.5);
color:#fff;
}
</style>

</head>
<body>

<div id="galerie">

<figure>
<img src="zebra.jpg" alt="Einzelzimmer" width="300" height="162">
<figcaption>Einzelzimmer</figcaption>
</figure>

<figure>
<img src="zebra.jpg" alt="Einzelzimmer" width="200" height="162">
<figcaption>Doppelzimmer</figcaption>
</figure>

<figure>
<img src="zebra.jpg" alt="Einzelzimmer" width="400" height="162">
<figcaption>Dreibettzimmer</figcaption>
</figure>

</div>

</body>
</html>
3

Hallo djheke!

Vielen Dank! Ich habe mir eine Testseite aufgebaut und den Code eingefügt, bzw einmal als HTML und eine CSS

Das Ergebnis:

[ATTACH=full]4143[/ATTACH]

Die Unterschrift befindet sich jetzt noch unter dem Bild, richtig? Im ersten Beispiel von mir, also das aus dem Tutorium, liegt die Unterschrift AUF dem Bild, Schrift ist mittig und die Color (silver) ist durchsichtig mit
background-color: silver;
background-color: hsla(0, 0%, 100%, 0.5);

Das kriege ich nicht hin bzw scheinbar nimmt er das nicht an…

Möglicherweise lässt sich das Bildformat dabei auch noch begrenzen da sie so doch recht groß sind?

Info: Die Breite des Frames liegt bei 1132 Pixeln…

4

Zu 1 Die Unterschrift liegt auf dem Bild und ist halb transparent.
Zu 2 Keine Ahnung wie breit deine Bilder sind. Im Beispiel haben die Bilder 200px ,400px, 300px = 900px + 3 x 2px Border = 906px. Du musst dein Container neu anpassen. Mit text-align:center wird der Untertitel zentriert.

5

Perfekt gelöst!!
Vielen herzlichen Dank!!