Antworten auf deine Fragen:
Neues Thema erstellen

Verschiedene Bilder positionieren mit CSS3

A

Arlesdro

Guest

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.
 
Zuletzt bearbeitet von einem Moderator:

A

Arlesdro

Guest

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.

HTML:
<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

Nicht mehr ganz neu hier

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

so wie hier beschrieben:


hier noch ein Beispiel:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben