[CSS] Deel afbeelding valt buiten scrollbaar gebied

[Arcane Apex]

Een deel van een afbeelding valt buiten het scrollbaar gebied van een browser wanneer men de browser kleiner maakt. Het lijkt dan net of overflow:hidden; aan is gezet in css, maar dat is niet het geval. Men kan trouwens alleen het bovenste deel van de afbeelding niet zien. Men kan in de browser dus wel verticaal en horizontaal scrollen als deze kleiner gemaakt wordt en het meeste van het plaatje kan men dan ook nog wel zien, alleen het bovenste gedeelte is niet te zien en men kan ook niet verder naar boven scrollen om dat bovenste gedeelte te zien, omdat wanneer men maximaal naar boven scrollt, dan valt dat bovenste gedeelte van de afbeelding dus achter de tabs van de browser. Het gebeurt alleen wanneer men de browser kleiner maakt.

Ik heb de afbeelding binnen een div geplaatst en de div gecentreerd op de pagina met de volgende CSS methode:

code:

.mainDiv
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -397px;
margin-top: -374px;
z-index: 1;
}

Iemand enig idee wat de reden kan zijn?

[Verwijderd]

De reden is dat dat een bijwerking is als je op die manier elementen centreert. Daar is niet omheen te werken als je ook verticaal wilt centreren.

[Arcane Apex]

Is er misschien dan nog een alternatieve manier van verticaal centreren die dit voorkomt, maar tegelijkertijd ook cross-browser en cross-OS compatible is?

[Verwijderd]

Nee, die is er niet.

[Arcane Apex]

Waar ligt de fout dan in dit geval? Bij de browsers? Bij de CSS standaard? Bij de gebruikte code?
De W3C CSS validator geeft geen errors of warnings aan.

[ Voor 31% gewijzigd door Arcane Apex op 17-10-2007 19:46 ]

[moozzuzz]

Web is er niet voor gemaakt om zo te layouten. Als je naar je CSS kijkt zal je ook zien waarom het zo loopt:

Je duwt de afbeelding eerst omlaag naar het (vertikaal) midden van je pagina. Dat midden wordt telkens berekend (50% vd hoogte). Nadien push je em 374 px omhoog. Als je view kleiner wordt dan 2x 374 verlies je een deel van wat je wil tonen. Een beetje hetzelfde principe als titles verbergen met de constructie margin-left: -9999px;.