Image Links nebeneinander

Hallo Leute,

ich kämpfe gerade mit Link-Images, die ich gerne nebeneinander positionieren möchte und in der Mitte zentriert.

Ich habe das "WP lightbox 2" Plugin installiert und füge dann unter meinem Text verschiedene Bilder wie folgt ein:

Hier steht ein Text:
<a rel="lightbox[group]" href="../uploads/2010/02/1.png"><img src="../uploads/2010/02/1.png" alt="" title=".." width="150" height="150" class="aligncenter size-thumbnail wp-image-1319" /></a>
<a rel="lightbox[group]" href="../uploads/2010/02/2.png"><img src="../uploads/2010/02/2.png" alt="" title=".." width="150" height="150" class="aligncenter size-thumbnail wp-image-1323" /></a>
...
Hier steht darunter auch nochmals ein Text.

Die Bilder werden hier auf 150x150 beschränkt und sollen dann in der Größe nebeneinander. Leider stehen sie untereinander!

Ich habe auch schon versucht über ein <div class="myclass">...</div> eine Klasse anzulegen, bei der dann "float:left" gesetzt wird, aber das geht leider nicht.

Weiß jemand zufällig, wie so etwas geht?

Hi,

erst einmal Danke für die Antwort.

Das Problem ist nicht unbedingt das nebeneinander positionieren. Das geht mit dem Beispiel und dem CSS von http://www.mediaevent.de/css/css_beispiele/display.html sehr gut.

Allerdings wird der nachfolgende Text direkt in das Bild geschrieben. Es findet also kein Zeilenumbruch nach dem Listenelement statt.

Ein <br>, was ja ansich schon hässlich ist, funktioniert auch nicht (vielleicht muss man hier sagen Gott sei Dank nicht).

Habe auch schon versucht den nachfolgenden Text einfach in ein <p>...</p> zu setzen. Das ist auch etwas häßlich, tut aber auch nicht.

Hi,

danke Dir für die Antwort. Ich weiß nicht, ob das so schön genug ist, aber so funktioniert es jetzt zumindest:

<div class="widepic" align="center">
   <span style="float:left">
     <a class="lightbox" rel="lightbox[group]" href="../uploads/2010/02/Pic1.png"><img src="../uploads/2010/02/Pic1.png" alt="" title="Title for Pic1" width="150" height="150" /></a>
   </span>


   <a class="lightbox" rel="lightbox[group]" href="../uploads/2010/02/Pic2.png"><img src="../uploads/2010/02/Pic2.png" alt="" title="Title for Pic2" width="150" height="150" /></a>
   <span style="clear:all" />
</div>

.widepic { 
    width: 355px;
    margin: 0 auto; 
}

Zitat von koslowski

clear:all; gibt es nicht. :roll:

Hhm, stimmt, wenn ich auf Selfhtml schaue, sehe ich das auch. Die Aptana IDE zeigt das aber im IntelliSense als Option an.

Zitat

Sorry, aber die Lösung mit dem span ist grausamst, wenn ich das mal so sagen darf. ;)

Klar, darfst Du ;-)

Zitat

Wie marc schon schrieb gehören die Thumbs semantisch in eine ul.
Die Thumbs bekommst du dann auch mit display:inline für li nebeneinander. Zentrieren geht dann ganz einfach mit text-align:center;

Ich habe jetzt mal eine neue Variante gemacht, die nur noch halb so schlimm ist, aber dennoch verbesserungswürdig sein könnte. Vielleicht kannst Du mir hier noch ein paar Tipps geben

<ul class="setcenter">
    <li class="thumbpic"><a rel="lightbox[group]" href="../uploads/2010/02/Thumb1.png"><img src="../uploads/2010/02/Thumb1.png" alt="" title="ThumbPic 1" width="150" height="150" /></a></li>
    <li class="thumbpic"><a rel="lightbox[group]" href="../uploads/2010/02/Thumb2.png"><img src="../uploads/2010/02/Thumb2.png" alt="" title="ThumbPic 2" width="150" height="150" /></a></li>
</ul>

.thumbpic { display: inline; text-align: center !important; }
.thumbpic a { border-bottom: none !important; }
.setcenter { text-align: center !important; padding: 0 0 0 0 !important; margin: 0 0 0 0 !important;}

Ich finde das mit den ganzen "!important" attributen irgendwie nicht sonderlich schön. Dennoch habe ich das Problem, dass sowohl die CSS Eigenschaften von <ul> per ".entry ul {...}" definiert sind, als auch die <a> entsprechend von oben geerbt werden.

Wie geht man hier denn generell vor? Was ist hierfür eine "Best Practice"?

Ursprünglich dachte ich, dass es reicht, einem <ul> bzw. einem <a> ein Class-Attribut mit einem eigenen Namen zu geben, aber offensichtlich nicht. Sowohl padding, margin, als auch text-align, sowie die Unterstriche der Links werden von oben durch gereicht.

Was empfehlt Ihr mir hier? Ist das okay mit den "!important" Deklarationen?

Hallo ubik,

das hatte ich auch schon mal ausprobiert. Hier bekomme ich aber bzgl. der Thumbs leider eine Art Treppe angezeigt. Also das eine ist etwas nach unten versetzt, dennoch passt es, dass die beiden nebeneinander sind.

Zusätzlich sind die beiden Thumbs aber nicht zentriert.