✔ Bilder nebeneinander anordnen

[thigle]

Hallo,

und schon wieder ein kleines Problem.... . Es geht (wieder mal) um diese Seite. Klickt man auf die Kamera, öffnet sich Fancybox. Unter Opera sind nun die Bilder nebeneinander angeordnet. Habe jedem Bild 'align=left' gegeben, siehe hier:

a class="fancybox" href="#video1"><img src="/wp-content/uploads/2010/02/sreet-spirit.jpg" alt="" title="Fade Out" width="120" height="90" align="left" /></a>

<a class="fancybox" href="#video2"><img src="/wp-content/uploads/2010/02/android.jpeg" alt="" title="Paranoid Android" width="120" height="90" align="left" /></a>

Nur, unter Chrome & Firefox sind alle Bilder einzeln untereinander angeordnet, was nicht wirklich besonders nett aussieht. Ich habe es auch schon mit 'float' (siehe diese Seite, Beispiel 2) versucht, aber ohne Erfolg, denn dann waren unter Opera alle Bilder untereinander angeordnet. Hängt das irgendwie mit den verschachtelten 'divs' zusammen und/oder der Fancybox, was muss ich tun, damit unter allen Browsern die Bilder nebeneinander angeordnet erscheinen?


Hier ein Ausschnitt aus dem Code

 <div style="display: none;">
                                                  <div id="test">
<div style="display: none;">
 <div id="video1">
[dailymotion x1be9v]</div>
<div id="video2">
[vimeo 6777127]</div>
 <div id="video3">
[youtube ukythkK4EPQ]</div>
 <div id="video4">
[youtube ukythkK4EPQ]</div>
   </div>

<a class="fancybox" href="#video1"><img src="/wp-content/uploads/2010/02/sreet-spirit.jpg" alt="" title="Fade Out" width="120" height="90" align="left" /></a>

<a class="fancybox" href="#video2"><img src="/wp-content/uploads/2010/02/android.jpeg" alt="" title="Paranoid Android" width="120" height="90" align="left" /></a>

<a class=" fancybox" href="#video3"><img src="/wp-content/uploads/2010/02/mist.jpg" alt="" title="Mist" width="120" height="90" align="left" /></a>


                                  </div>
                                    </div>

<a class="fancybox" href="#test"><img src="/wp-content/uploads/2010/02/video.jpg" alt="" title="Media" width="200" height="190" /></a>

LG
Mart

 

[Maik]

Hi,

der Grund ist das <p>-Element, in dem die Bilder jeweils eingebunden sind, das als Block-Element im Textfluß automatisch einen Absatz erzeugt.

#test p {float:left;}

oder

#test p {display:inline;}

... ändert sein typisches Verhalten.

mfg Maik

 

[thigle]

Auf Dich ist Verlass, es funktioniert. Danke!

Schönes WE
Mart