XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Abstand zwischen Bilder (http://xhtmlforum.de/showthread.php?t=69846)

Ellen 16.08.2013 20:14

Abstand zwischen Bilder
 
Hallo liebes Forum,

für euch ist meine Frage wahrscheinlich etwas "dämlich", aber ich weiß leider keine Lösung. Ich habe eine Sidebar mit 300px Breite. Dort möchte ich über ein HTML Widget mehrere verlinkte Bilder einsetzen.
Meine Bilder sind bereits verlinkt und das passt alles, aber ich bekomme es nicht hin, zwischen den Bildern bswp. 10px Abstand zu setzen.

Das heißt: die Sidebar ist 300px Breit. Darin befinden sich 3 kleine Bildchen á 90px Breite. D.h. zwischen zwei Bildern passen jeweils 15px Abstand. Genau diesen Abstand bekomme ich einfahc nicht rein.

So sieht mein Code vom Aufbau her aus:

<a href="link"><img src="bild" alt="deko" /></a>
<a href="link"><img src="bild" alt="kuchen" /></a>
<a href="link"><img src="bild" alt="fotografen" /></a>

und so weiter fortlaufend.... Zwischen Bild 1 und 2, und 2 und 3 hätte ich gerne 15px Abstand.

Wenn mir jemand dabei helfen könnte, wäre ich happy :)

Danke!!!!!!!!!!!!

Ellen

explanator 16.08.2013 21:57

Und welche Regel hast du im CSS für die Bilder geschrieben?

Ellen 19.08.2013 18:17

Hi,
ich habe versucht die Bilder passend in ein Textwidget zu legen und in der CSS habe ich den weiteren Befehl
.widget_text img { margin: 15px; } eingetragen. Ich verstehe jedoch nicht, warum das bei 300px Breite nicht klappt, die drei Bilder nebeneinander zu setzen. Schließlich kommt das genau hin. 3x90px Breite=270px + 2x15px= insgesamt 300. Aber nein, das letzte Bild hüpft immer eine Zeile tiefer, obwohl oben noch Platz ist.

LG, Ellen

explanator 19.08.2013 18:34

90 Pixel + 15 Pixel(links) + 15 Pixel(rechts) = 120 Pixel pro Bild
120 Pixel x 3 = 360 Pixel

Jetzt weisst du es, warum.

Ellen 19.08.2013 19:37

Die 15 Pixel betreffen nur den Abstand zwischen Bild 1 und 2, sowie zwischen Bild 2 und 3.

90+15+90+15+90

=300


Ich hatte den Code wie oben beschrieben schonmal in meinem Textwidget und das hat wunderbar gepasst, aber vielleicht ist das Theme auch schon so weit modifiziert, dass in der CSS irgendwas nicht mehr stimmt...

Trotzdem danke für die Hilfe :)

explanator 19.08.2013 20:05

Ohne Link zur Seite, kann man jetzt nichts weiter sagen, was da nicht stimmen mag.

lottikarotti 27.08.2013 20:07

Hallöchen,

dann verpasse dem mittleren Link doch einfach folgende Eigenschaften:
Code:

margin-left: 15px ;
margin-right: 15px ;

Hier findest du ein entsprechendes Beispiel. Lass dich nicht von den Zahlen beirren - da steht zwar "100x100" drauf, sie werden via CSS aber auf 90x90 skaliert.

Viele Grüße,
lotti

Ellen 27.08.2013 20:57

Hi Lotti,

super, das hat geklappt! Besten Dank!!!!

Liebe Grüße
Ellen


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:56 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019