Verschiedene Bilder positionieren mit CSS3

[Arlesdro]

Hallo liebe Gemeinde,

vorab möchte ich sagen, dass ich mich nicht wirklich besonders mit CSS auskenne und mich so nach und nach in die Sache reinschnuppere. Für meine Anforderungen reicht es wenn ich mich mit Firebug so lange durchwurschtel, bis ich die richtigen Parameter geändert habe, um sie dann in den Css-Editor zu übertragen.

Ich versuche gerade einen auf Wordpress basierenden Shop nach meinen Vorstellungen zu gestalten.
Daher habe ich neben den standartisiert angelegten Seiten eine neue Startseite erstellt die ich versuche, mit Leben zu füllen.

Ich habe in die Seite Bilder eingefügt, die ich im Nachhinein mit Css versucht habe zu positionieren.
Das hat grundsätzlich auch geklappt

da ich die Bilder vorher linksbündig bzw. rechtsbündig und zentriert gelegt habe und sie somit verschieben konnte. Nun muss ich aber mehr als drei Bilder positionieren und habe z.B. zwei Bilder mit "alignleft" bezeichnet, dann verschiebt er auch immer beide.

Wie kriege ich es hin das ich jedes Bild einzeln greifen kann.

Anbei habe ich mal einen Screenshot angehängt, damit man sehen kann wie es ungefähr aussieht.
Im Grunde möchte ich das dritte Bild jetzt neben das Graue und unter das horizontale Bild positionieren.
Dann soll noch ein viertes daneben und ein fünftes zum Abschluss darunter.

 

[cebito]

Bilder ins passende Format schneiden und dann so z.B.... http://jsfiddle.net/6w9n8gqs/

 

[Arlesdro]

Danke erstmal für die schnelle Antwort, ich habe versucht das bei mir in den Editor anzupassen. Leider funktioniert es trotzdem nicht so wie gewollt.
Sobald zwei Bilder die gleiche Klasse haben: also z.B. alignnone, und ich versuche für ein Bild die Parameter zu ändern, überträgt sich dieses auch immer auf das zweite Bild.
Ich überlege schon eine Tabelle zu machen, und die Bilder dort einzufügen.

Hier mal der HTML , wie er im Editor des Wordpress' Backend angezeigt wird, wenn ich 3 Bilder eingefügt habe.

<a href="https://supr.com/lombardis-weine/files/singlemaltwhiskys_foto.jpg"><img src="https://supr.com/lombardis-weine/files/singlemaltwhiskys_foto.jpg" alt="SingleMaltWhiskys_foto" width="230" height="500" class="alignnone size-full wp-image-136" /></a>

<a href="https://supr.com/lombardis-weine/files/rotweine_entdecken.jpg"><img src="https://supr.com/lombardis-weine/files/rotweine_entdecken.jpg" alt="Rotweine_Entdecken" width="705" height="248" class="alignnone size-full wp-image-142" /></a>

<a href="https://supr.com/lombardis-weine/files/bestseller_foto.jpg"><img src="https://supr.com/lombardis-weine/files/bestseller_foto.jpg" alt="Bestseller_Foto" width="350" height="252" class="alignnone size-full wp-image-151" /></a>

Diese Bilder, möchte ich nun nach meinen Vorstellungen positionieren.

Vielen Dank für eure Antworten

 

[Enigmon]

Warum machst du nicht ein(e) Bild/Collage daraus und machst einzelne Bereiche als Links.

so wie hier beschrieben:


hier noch ein Beispiel: