I'm just tidying up this problem, and trying to fathom why I still need 'overflow: hidden;' to
prevent the BODY being moved down 48px ( = the margin on the positioned images).
The CSS I've got now for the animation positioning is:
.pananim {
position: relative;
background-color: #0272a7; /* replacing the lime green I used for the problem
demo */
overflow: hidden; /* without this even the BODY gets moved down 48px
*/
}
.pananim img {
position: absolute;
top: 0;
left: 0;
display: block; /* this can be here or on 'last-of-type' (it doesn't seem
to matter) */
margin: 0; /* redundant here, but included to be sure */
margin-top: 48px; /* If I remove this the body no longer moves down (but the
images move up) */
padding: 0; /* redundant here, but included to be sure */
width: 100%;
opacity: 0;
}
.pananim img:last-of-type {
position: static; /* enables div.pananim to expand to wrap the images*/
}
If I remove '.pananim overflow: hidden;' everything, including the body, gets moved down by 48px
(except the copyright and caption text in the animation), as in the example:
http://webadit.co.uk/hminew3/. It's commented out on line 446 of hmi2_01.css
I've set a 5px red outline on the <body> to help illustrate this.
It must be to do with the absolute positioning of the images (within div.pananim), but I'd like
to understand why it seems to work UP the cascade to the body ?
Putting the top margin onto div.pananim instead of the images makes no difference to what
happens. Relatively positioning div.ananim with 'top: 48px;' resolves the problem, but pushes
the header images down over the text below (where the main content will go), so a top margin is
then needed on the content.
So either I stick to 'overflow: hidden;' (which seems fairly innocuous) or I have to start
adding margin further down the page which is likely to lead to complexities when I come to make
the design responsive. Or is there a better solution staring me in the face ?
Tim
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
