Galerie mit dynamischer Bilderbreite

[kwurzel]

Hallo erstmal!

ich bin dabei, eine Galerie zu erstellen, in der sich die Bilder in der Breite dynamisch an die Fensterbreite anpassen. Prinzipiell klappt das auch, nur mit width: 100%; und einem Margin eben nicht.

Die URL zur Verdeutlichung: Die große Kinoformat-Teaser-Seite

Das obere ist das Konstrukt, das ich benutzen möchte, das untere ist das gewünschte Ergebnis (man beachte den rechten Seitenrand).

Habt ihr eine Idee, wie ich das verwirklichen kann? Habe schon einiges ausprobiert, bin aber offensichtlich nicht weit (-er) gekommen, vielleicht habe ich aber auch Tomaten auf den Augen und ein Brett vorm Kopf.

Vielen Dank für eure Hilfe!
Julius

 

[stormwind]

Aus welchem Grund musst du denn unbedingt das obere Konstrukt benutzen?

 

[dkdenz]

Naja, das Problem liegt ja klar auf der Hand.
Nimm mal gedanklich ein Foto von Deiner Konfirmierung und verzerre es in der Höhe, obwohl das Bild in der Breite gleich bleiben soll.
Was passiert?

 

[kwurzel]

Aus welchem Grund musst du denn unbedingt das obere Konstrukt benutzen?

Nicht unbedingt genau dieses Konstrukt, aber ein Tabellenaufbau kommt - eigentlich - nicht in Frage, es sei denn, es gibt keine andere Möglichkeit.

Das hat verschiedene Gründe, z. B. Ladezeit, Größe, Semantik, Zugänglichkeit etc. pp.

 

[kwurzel]

Naja, das Problem liegt ja klar auf der Hand.
Nimm mal gedanklich ein Foto von Deiner Konfirmierung und verzerre es in der Höhe, obwohl das Bild in der Breite gleich bleiben soll.
Was passiert?

Um Breite/Höhe habe ich mich hier nicht gekümmert, das soll dann schon proportional werden. Das ist aber auch nicht das Problem, das funktioniert auch ohne Probleme. Es geht mir nur um den Abstand/Rahmen rechts.

 

[dkdenz]

margin:0px 10px 0px 10px; ?

 

[kwurzel]

margin:0px 10px 0px 10px; ?

Welchem Objekt zugeordnet? Bei dl.gallery verschiebt es das ganze nur nach rechts oben, was es nur verschlimmbessert und bei .gallery dt img verschiebt es nur das Bild nach rechts.
Also leider auch keine Lösung, aber trotzdem danke!

Ich habe aber rausgefunden, dass es sowohl am margin als auch am padding liegt. Werde mal noch ein wenig damit experimentieren, aber große Hoffnungen habe ich keine...

 

[kwurzel]

Ich habe das ganze Problem recht einfach lösen können, und zwar mit der CSS-3-Eigenschaft box-sizing: border-box, siehe Webkrauts » CSS3 - Alles wird gut?.

Hätte nie gedacht, dass es so einfach ist und bin ziemlich froh über diese neue Eigenschaft, die doch so einiges vereinfacht!

Trotzdem danke für eure Hilfe!

 

[dkdenz]

Funktioniert das auch im IE?

Mehrere Browser interpretieren bereits diese CSS 3-Eigenschaft, so zum Beispiel Internet Explorer 5 für Mac, Opera 7 und Konqueror seit Version 3.3.2. Mozilla interpretiert diese Eigenschaft in der Form -moz-box-sizing – durch die Vorsilbe -moz- als proprietäre Erweiterung gekennzeichnet, da box-sizing noch nicht in einer verabschiedeten Spezifikation enthalten ist. Mozilla interpretiert zudem padding-box als weiteren Wert: -moz-box-sizingadding-box.

Der Internet Explorer für Windows und Safari interpretieren box-sizing nicht.

CSS3 lernt mit der Funktion calc() rechnen / Vergleich mit box-sizing – SELFHTML aktuell Weblog

 

[kwurzel]

Funktioniert das auch im IE?

CSS3 lernt mit der Funktion calc() rechnen / Vergleich mit box-sizing – SELFHTML aktuell Weblog

Nein, funktioniert nicht im IE7, beim IE6 scheint das im Quirks-Mode wohl Standard zu sein. Aber was funktioniert schon im IE?