Antworten auf deine Fragen:
Neues Thema erstellen

html5, css, Skalierbare Bilder nebeneinander mit Padding

afr0kalypse

Allwissendes Karmameerschweinchen!

Moinsen. Ich stehe gerade auf dem Schlauch...
Ich habe 2 figure Elemente in denen sich jeweils 1 img Element befindet. Die figure Elemente sollen zu 50% nebeneinander stehen, responsive / skalierbar sein und die Bilder sollen einen festen Abstand von einander haben und mit skalieren.
Hier mein derzeitiges Beispiel: http://jsfiddle.net/C967y/18/
Ich dachte mir, wenn ich dem figure Element 50% Breite und 10px Padding (Innenabstand) gebe, dass dann das img Element davon beeinflusst wird und sich bei 100% Breite um 10px verkleinert... tuts aber nicht, soll es aber... Ist das überhaupt möglich? Wo ist mein Denkfehler?

Edit: eine Lösung habe ich: http://jsfiddle.net/CgLn5/4/
Aber eine Erklärung für den beschriebenen Fehler suche ich trotzdem noch :)

VG
 
Zuletzt bearbeitet:

DaKKK

Das Krümelmonster

Ist ganz einfach. Es liegt am Boxmodell. Dabei werden Padding und Margin zur angegebenen Breite hinzugerechnet. Also deine 50% und dann nochmal die 10px. Dabei kommen natürlich mehr als 100% raus und es passt somit nicht in eine Zeile.

Bei box-sizing:border-box; sind der Rahmen und Padding in der Breite enthalten und lediglich Margin wird hinzugerechnet.

Setze dich einfach mit dem Boxmodell auseinander, dann wird alles klar.

edit: http://www.css4you.de/wsboxmodell/
Hier wird es verständlich erklärt.
 
Zuletzt bearbeitet:

cebito

undefined

Ok, DaKKK sagt es schon. Lies dich mal zum Unterschied der Boxmodelle ein. Ich wollt eigentlich nur noch anmerken, dass es besser ist das Padding auch in Prozenten anzugeben. So bleibt das Verhältnis von Bildgrößen und Abständen gleich und macht das Erscheinungsbild bei jeder Größe harmonisch.
 

hub

nicht ganz neu hier

Moin moin,
in deinem ersten Versuch wird das Padding auf die 50% addiert, also 50% + 20px. Abhilfe wäre z.B. einen weiteren Div-Container mit dem Padding um deine Images,und die äusseren Container ohne Padding und Margin "nur" zum anordnen. Oder aber eben so, wie du es in deinem 2. Versuch gemacht hast - der Effekt ist dann der gleiche.

Gruß Ulli
 

afr0kalypse

Allwissendes Karmameerschweinchen!

Danke für die Antworten. Ich dachte die 50% bilden den Außenabstand und das Padding den reinen Innenabstand, sodass Child-Elemente dadurch verkleinert werden. :danke:
 
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.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben