zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Abstand zwischen Bilder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2013, 19:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2013
Beiträge: 4
Ellen befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2013, 20:57
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Und welche Regel hast du im CSS für die Bilder geschrieben?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2013, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2013
Beiträge: 4
Ellen befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2013, 17:34
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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

Jetzt weisst du es, warum.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2013, 18:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2013
Beiträge: 4
Ellen befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2013, 19:05
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Ohne Link zur Seite, kann man jetzt nichts weiter sagen, was da nicht stimmen mag.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 27.08.2013, 19:07
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

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
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #8 (permalink)  
Alt 27.08.2013, 19:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2013
Beiträge: 4
Ellen befindet sich auf einem aufstrebenden Ast
Standard

Hi Lotti,

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

Liebe Grüße
Ellen
Mit Zitat antworten
Antwort

Stichwörter
bilder

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 07:21
Problem mit Schattenrahmen um Bilder (Typo3) micronix CSS 2 20.08.2012 20:01
bilder in div container unten anordnen diegaby CSS 12 17.11.2008 14:08
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57


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