Anzeige

html5, css, Skalierbare Bilder nebeneinander mit Padding

html5, css, Skalierbare Bilder nebeneinander mit Padding | PSD-Tutorials.de

Erstellt von afr0kalypse, 06.03.2014.

  1. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    html5, css, Skalierbare Bilder nebeneinander mit Padding
    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: 06.03.2014
    #1      
  2. DaKKK

    DaKKK Das Krümelmonster

    Dabei seit:
    04.09.2007
    Beiträge:
    200
    Geschlecht:
    männlich
    Ort:
    Heidelberg
    Software:
    Sublime Text 3, Adobe CC, Win7 64 Ultimate
    html5, css, Skalierbare Bilder nebeneinander mit Padding
    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: 06.03.2014
    #2      
  3. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    html5, css, Skalierbare Bilder nebeneinander mit Padding
    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.
     
    #3      
  4. hub

    hub nicht ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    1.116
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    PS,Lr. VS Code, NP++, ...
    Kameratyp:
    Sony a 6000
    html5, css, Skalierbare Bilder nebeneinander mit Padding
    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
     
    #4      
  5. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    html5, css, Skalierbare Bilder nebeneinander mit Padding
    Du könntest es auch mit dem flexbox-Modell versuchen, wenn dir die Unterstützung für ältere browser (hauptsächlich IE) nicht so wichtig ist.
     
    #5      
  6. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    html5, css, Skalierbare Bilder nebeneinander mit Padding
    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:
     
    #6      
x
×
×