On 16/08/2014 13:59, Tom Livingston wrote:
Can you use padding instead of margin and add it to .pananim?
Applied to .pananim the absolutely positioned images ignore the padding (I'm not yet sure whether that's to be expected), but if I apply it to the images it has the desired effect, I think. Thank you.
http://webadit.co.uk/hminew3/ Tim
On Saturday, August 16, 2014, Tim Dawson <t...@ramasaig.com <mailto:t...@ramasaig.com>> wrote: 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 <http://www.css-discuss.org/mailman/listinfo/css-d> List wiki/FAQ -- http://css-discuss.incutio.__com/ <http://css-discuss.incutio.com/> List policies -- http://css-discuss.org/__policies.html <http://css-discuss.org/policies.html> Supported by evolt.org <http://evolt.org> -- http://www.evolt.org/help___support_evolt/ <http://www.evolt.org/help_support_evolt/> __________________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/__mailman/listinfo/css-d <http://www.css-discuss.org/mailman/listinfo/css-d> List wiki/FAQ -- http://css-discuss.incutio.__com/ <http://css-discuss.incutio.com/> List policies -- http://css-discuss.org/__policies.html <http://css-discuss.org/policies.html> Supported by evolt.org <http://evolt.org> -- http://www.evolt.org/help___support_evolt/ <http://www.evolt.org/help_support_evolt/> -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com <http://mlinc.com>
-- 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/
