[AtomicGarden]

Hallo Freunde,

ich noch mal... Ich habe ein Problem mit meinen px-Werten. Bei meiner Seite möchte ich eine Gallery einbauen. Nun sieht man Thumbs. Klickt man auf diese wird Content in einem neuen DIV geladen. Jedes Thumbnail ist 120px breit und zwischen den Thumbs ist Freiraum von 15px in einer externen CSS-Datei definiert. Ich möchte meine Seite nach einem strengen Raster aufbauen. Das bedeutet drei Thumbnails nebeneinander (mit Freiraum) sollen so breit wie ein original (geladenes-) Galeriebild sein. Ein Screenshot ist angehängt. Den Thumbnails wurde über ne Subclass 1px breiter Rahmen zugewiesen. Das bedeutet drei Thumbails (120px(x)3 = 360px) + 2x Freiraum (2(x)15px = 30px) + 4x1px (Rahmen) = 394px . Wenn das Bild also in den Raster passen soll, muss es (damit es mit auf selber Breite mit den drei Thumbnails liegt) 394px breit sein.

Das passt nicht.

Ich muss es bis auf 401px aufblasen, damit es passt. Wie kann das sein? Liegt da ein Denkfehler bei mir?

http://img200.imageshack.us/i/pagecss.jpg/

p.s.: das upgeloadete Bild zeigt bereits die Einstellung in der das Originalbild auf 401px aufgeblasen wurde, deshalb passt es in den Raster... Aber das ist ja nicht sauber....

[AtomicGarden]

der Fehler lag im HTML. Der Browser fügt automatisch Bildern Whitespace hinzu...

Umgehen kann man das wie folgt:

<a href="der_link"><img src="das_bild" class="gallery"
/></a><a href="der_link"><img src="das_bild" class="gallery"
/></a>

Dreckig aber effektiv... Ich hasse das Internet, meine ganze kreative Energie geht für so ne Haarspalterei und Fummelkram flöten. Wirklich ärgerlich... Na ja, es läuft ja jetzt.

[AtomicGarden]

aaaah... natürlich passt auch das nicht. wird eine border nur einmal gewertet? also ein Bild mit ner 1px border das z.B. 200px breit ist, ist mit border für den browser nur 201px statt 202px breit????

wiiiiiesooooo ist das alles so unlogisch????

[heiko_rs]

[ApfelQFeierabend]

da deine thumbnail liste eine eine liste ist sollte sie in ein <ul> element, dann gibts auch kein whitespace problem.
was ich nicht verstehe wie du bei 3 bildern auf 4 striche kommst wenn jedes zwei seiten hat?

(120px(x)3 = 360px) + 2x Freiraum (2(x)15px = 30px) + 4x1px (Rahmen) = 394px

[heiko_rs]

[ApfelQFeierabend]

na nicht nur float

[heiko_rs]

Natürlich geht's auch anders, aber ich habe auch nicht immer Lust, so unendlich weit auszuholen Das tue ich z.B. in diesem langen Tutorial, in dem ich alle möglichen Varianten inkl. der table-Eigenschaften erkläre - nur inline-block bleibt außenvor, da zumindest für Menüs quasi nie sinvoll bzw. nötig (IE < 8 ausgenommen, aber für den ist's auch erklärt).

Für Deinen zweiten Vorschlag mit dem neg. margin braucht man übrigens kein inline-block, das geht auch per display: inline (was den Aufwand deutlich reduziert und das Standard-CSS valide bleiben lässt), ist aber keine gute Methode, da die verschiedenen Browser sich bzgl. des kleinen Zwischenraumes indifferent verhalten, so dass spätestens bei Textzoom in dem einen oder anderen Browser Überlappungen oder Zwischenräume entstehen können.