Bilder nebeneinander anordnen

[-Andi-]

Hi,

ich habe folgendes Problem und komme einfach auf keinen grünen Zweig.
Mittels display:inline kann ich ja mehrere Divs nebeneinander darstellen. Das geht ja noch, aber ...
ich habe pro Bild-Päckchen immer 2 Bilder. Ein Vordergrundbild (so ne Art Bildrahmen) und ein normales Bildchen. Das Übereinander legen ist kein Problem. Das mache ich mit z-index und left, sowie position:relative. Mein Problem liegt nun aber darin, dass es eine Art Bilder-Gallery werden soll, in der immer 3 Bild-Päckchen nebeneinander dargestellt werden sollen.
Das Problem besteht nun darin, dass mein Bild-Päckchen zwar übereinander dargestellt wird, aber rechts daneben die Breite meines Bilderrahmens frei bleibt und erst danach wieder das nächste Bilder-Päckchen anfängt. Ich habe es auch schon mit overflow:hidden versucht aber leider ohne Erfolg.
Hat jemand eine Idee?

CSS-Code

#galleryImageFrame {
 z-index:1;
 position:relative;
 display:inline;
}

	#gallery {
		position:relative;
		padding:0px;
		margin:10px 0px 0px 0px;
		display:inline;
	}
	#gallery img {
		border:none;
	}
	#gallery ul {
		padding:0px;
		margin:0px;
		list-style:none;
		background-image:none;
	}
	#gallery ul li {
		display:inline;
		padding:0px;
		margin:0px;
		background-image:none;
	}
	#gallery ul img {
		border:none;
	}

HTML-Code

    <div id="gallery">
    <ul>
        <li>
            <a href="pics/1.jpg" title="Testbild 1">
                <img src="pics/thumbs/1.jpg" alt="" /><div id="galleryImageFrame" style="left:-150px; top:0px;"><img src="images/gallery_pic_frame_150x113.png"></div>
            </a>
        </li>
        
        <li>
            <a href="pics/2.jpg" title="Testbild 2">
                <img src="pics/thumbs/2.jpg" alt="" /><div id="galleryImageFrame" style="left:-150px; top:0px;"><img src="images/gallery_pic_frame_150x113.png"></div>
            </a>
        </li>
    </ul>
    </div>

Danke.

Mfg. -Andi-

[th2409]

Ich würde meine Quelltext noch mal ein bisschen aufdröseln und semantisch sinnvoller machen. Dein Bilderrahmen "gallery_pic_frame_150x113.png" ist ja im Grunde nur ein schmückendes Beiwerk und kein Bild im inhaltlichen Sinne, so dass ich es auch gar nicht als <img> darstellen würde.

Entsprechend kann man dann vereinfachen: das <li> enthält dann nur noch <a> und das eigentliche <img>. Dem <a> würde ich entsprechend padding geben, es als Block darstellen (Breite und ggfs. Höhe angeben), floaten, und als css- background-image den Bilderrahmen aufdrücken.

[-Andi-]

Hi Thomas,

das mit dem Background Image ist mir auch schon durch den Kopf gegangen. Leider ist es ein Bilderrahmen, der einen kleinen Teil des Bildes überdeckt, um das Bild so aussehen zu lassen, als wären die Ränder gewellt.
Oder gibt es eine Möglichkeit das Hintergrundbild als Vordergrundbild darzustellen?

Mfg. -Andi-

P.S. Das mit dem ul und li kommt daher, dass es ein jQuery Gallery-Script ist.

[-Andi-]

Hi,

ich habe das Problem gelöst.
Wenn ich meinem Bild (NICHT dem Rahmen) als position:absolute gebe, dann klappt es.
Trotzdem danke.

Mfg. -Andi-