Überlappende Floats

[zeckensack]

Ich habe da so ein Problem mit meiner schnuckeligen Gallerie (work in progress, bitte nur moderater Spott). Kein position:fixed, absolute, Tabellen oder solche Scherze. Nur die ganz normale div-Suppe.
Um möglichst viel "above the fold" zu haben, lasse ich die "Kopfzeile" und das aktuell gewählte (große) Bild beide links floaten. Die Überschrift und die Thumbs befinden sich in einem div (gallery_nav), das nicht floatet, aber die vorgenannten Elemente umfließt. Auf die Weise fängt die ~Navigation der Gallerie schön weit oben an. Dass die Überschrift nicht genau zentriert über den Thumbs erscheint nehme ich gerne in Kauf. So weit die Idee.

Opera 9.10:
http://www.back-catalog.net/img/temp/gallery-opera.png

Firefox 2.0.0.3:
http://www.back-catalog.net/img/temp/gallery-firefox.png

Man beachte die Überlappung zwischen dem großen Bild und dem ersten Daumennagel. Meiner Meinung ist das ein Firefocksscher Rendering-Fehler, aber Tips zur Prävention, Workarounds etc nehme ich trotzdem gerne entgegen.

Beide Browser erhalten das gleiche Stylesheet (http://www.back-catalog.net/bcn.css.gz). Die Seite steht zur Detailansicht im Netz (http://www.back-catalog.net/gallery/metroid_prime), aber ist halt ein Mockup, also erwartet keine berauschende Funktionalität. Es geht erstmal nur um den Layout-Fehler.

Hier zur Ansicht noch Opera 9.10 im Debug-Modus:
http://www.back-catalog.net/img/temp/gallery-opera-debug.png

[darph]

Du könntest #gallery_nav einfach text-align: right geben, anstatt center. Wenn die Bilder eh alle die gleiche Breite haben, betrifft das nur noch die "More ... images"-Überschrift. Diese kannst du ja dann manuell wieder zentrieren.


#gallery_nav {
margin: auto;
text-align: right;
color: #FFFFFF; /* Ich persönlich sehe keinen Grund für die Einsparung von 3 Zeichen.
Ist nur potentielle Fehlerquelle für Browser, die's nicht verstehen. Aber das
ist nur meine Meinung... */
background: #404040;
}
#gallery_nav h1 {
text-align: center;
}

Bei der Gelegenheit: Bitte bitte keine JavaScript-Thumbnails. :ugly:

[zeckensack]

Du könntest #gallery_nav einfach text-align: right geben, anstatt center. Wenn die Bilder eh alle die gleiche Breite haben, betrifft das nur noch die "More ... images"-Überschrift. Dieser kannst du ja denn manuell wieder centrieren.Das klappt ausgezeichnet! Danke :)
Bei der Gelegenheit: Bitte bitte keine JavaScript-Thumbnails. :ugly:Wooos?
Ich weiß jetzt nicht genau was du meinst, aber ich wollte (mit noscript-Fallback) zumindest eine Blätterfunktion in Client-seitigem Script implementieren, weil a)warum muss der arme Server das immer alles alleine machen, wenn der Client es doch auch könnte ;(
und b)entfällt dann das unfeine Nachladen der Seite. Wenn man nur die Thumbnails durchblättern möchte, halte ich ein solches Verhalten für irritierend.

[darph]

Was ich meinte ist: Es sollte bei Clients ohne JavaScript trotzdem funktionieren. Zusätzliche Funktionalität mittels JS bereitstellen ist eine feine Sache. Aber mich persönlich regen diese Spieleseiten auf, bei denen man die großen Bilder nicht betrachten kann, weil die um's Verrecken aktiviertes JS vorraussetzen. *noscriptnutz* ;( Besonders fies sind solche Leute: <a href="javascript:popUp(someId)"><img src="thumbnail" /></a> Do geht mir immer's Messer in de Dasch uff. Daß es auch besser geht, beweist Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/). DAS ist feature-wise massiv aufgemotztes, aber immer noch barrierefreies Web. :ulove:

[zeckensack]

Ja nee, ist klar. Script statt url ist auf jeden Fall voll die Seuche.

Ich war auch nicht ganz untätig. Kuxxtu nochmal den gleichen Link (http://www.back-catalog.net/gallery/metroid_prime), krixxtu nun eine funktionuckelige und bisher völlig script-freie Gallerie =)
Seiten umblättern kommt auch noch, irgendwann.

Btw gerade dein verlinktes Lightbox 2-Beispiel finde ich grauenhaft. Sinnlosestes Bling-Bling. Der User muss warten während vollkommen überlüssige Animationen gerendert werden. Progressiver Bildaufbau oder Fehlerbehandlung (Server langsam oder Bild futsch) finden nicht statt, und werden durch die betrügerische busy-Animation ersetzt. Preload beherrscht es bei mir auch nicht, obwohl es das behauptet. Nur um beim Hovern Navigationselemente für vorwärts und rückwarts eingeblendet zu kriegen würde ich mir sowas niemals ans Bein binden. Bäh!