Can you use padding instead of margin and add it to .pananim?
On Saturday, August 16, 2014, Tim Dawson <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
> 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/
>
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
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/
