Mmm, tabellen voor de opmaak is niet echt aan te bevelen.
De afbeeldingen zitten juist zo mooi in een ongeordende lijst met links-gefloate list-items.
Keurig, niets meer aan doen! :thumb:
Maar nu het probleem.
Even de maatlat erbij gepakt voor het ff checken.
De <div id="page"> is 780px breed + 2keer L/R padding à 10px = samen 800px. Klopt.
Daarbinnen de <div id="poptrox">, met ook een breedte van 780px, zonder padding L/R, en geen borders. Klopt ook.
Daarbinnen de <ul id="gallery">, zonder breedte, zonder border, met margins en paddings op 0 gezet. Klopt ook.
Daarbinnen de <li>'s met een padding L/R van 10px, en zonder margins of borders.
Dit alles betekent:
- Aan de linkerzijkant: 10px padding-L van de #page, en 10px padding-L van het 1e image (het 1e <li>) = samen 20px.
- Per zwarte middenkolomn: een padding-R en een padding-L van twee images/<li>'s = samen 20px
- Er zijn twee middenkolommen.
- De rechterzijkant is ook weer 20px.
Al met al: 4 randjes-kolommen. Samen 80px die van de 800px af gaan. Blijft over: 720px breedte voor 3 images, dus voor elk: 720/3 = 240px maximale breedte.
In de list-items zitten <a>'s zonder opgegeven breedte, margins, paddings en borders. Dat gaat goed.
Het 1e img is 240px breed.
Het 2e img is 240px breed.
Het 3e img is 240px breed.
Nu begint m'n klomp toch wel te breken! Als klopt, en toch niet!
Dan maken we een screenshot, om alle pixels na te meten in een tekenprogramma:
De paddings (knalpaars) zijn in orde: allemaal 20px breed. De images zijn ook de vereiste 240px breed.
Maar ... de aap uit de mouw: de images hebben randjes van 2px breed! :d
Bij 3 images is dat dus 12px breed: precies de breedte die je aan de rechterkant tekort komt om de laatste afbeelding er op te laten passen.
Waar komen die randjes vandaan? Ze zijn niet handmatig is de css gezet!
- De oorzaak is, dat browsers aan images in een link altijd standaard een rand meegeven. Vaak is dat een vette blauwe rand, maar als je de links een andere kleur gegeven hebt, wordt dat die kleur.
En zo is de oplossing eenvoudig: verbieden dat images in een link een border krijgen.
Hoppa: daar vallen de images op hun goede plek.
Met vriendelijke groet,
CSShunter
_________
PS: Je moet wel even de javascripts de uitgang
.js geven (en zo ook de verwijzing in de html aangeven).
En even de spaties in de bestandsnamen vervangen door streepjes - of onderstreepjes _, want zonder meer een spatie in een map- of bestandsnaam is niet handig (dan zou je in alle verwijzingen %20 moeten zetten waar een spatie staat).
(edit)
O, misschien moeten de randjes juist wel om de images heen. Dan is de oplossing: de paddings aanpassen, of de images smaller maken. Borders worden opgeteld bij de breedte van een element, dus als een afbeelding inclusief borders van 2px breed 240px moet zijn, moet het image zelf 236px zijn.
O ja, als je even opneemt ...
Code:
html {
height: 100%;
padding-bottom: 1px;
}
... dan gaan pagina's bij een lage resolutie niet verspringen als je een foto uit de galery aanklikt om te vergroten. Dat gebeurt anders bij Firefox, Opera, Chrome en Safari, omdat die geen rechterscrollbar-ruimte gereserveerd hebben als er geen scrollbar nodig is. Ook bij wisseling van korte pagina's (zonder scrollbar) en lange pagina's (met) gaan de pagina's verspringen, omdat het ene midden niet het andere midden is (bij een gecentreerde site).
- Als je een rechter-scrollbar forceert door de pagina er net niet in hoogte op te laten passen (de 1px padding-bottom), dan kan er niet gejumpt worden, en is er geen probleem.
(/edit)
