Thanks, that certainly works. I must bone up on my collapsing margins again, as it looks more
like an expanding margin to me ! Though I'm not doubting that what you say is right.
Thanks again,
Tim
On 06/06/2015 14:44, Ryan Reese wrote:
You have a classic margin collapse. Look at "div#pananim". That element has a
51pxtop margin
that is pushing through the parent. Add a 1px top padding to #outer.
I'm not sure hte overall look you are going for; but it is a margin collapse.
On Sat, Jun 6, 2015 at 9:40 AM, Tim Dawson <t...@ramasaig.com
<mailto:t...@ramasaig.com>> wrote:
I'm working on a web site which has a menu bar at the top, with a large
banner image below.
http://holidaymullandiona.com
The menu bar (<nav>) stays in place as the page is scrolled up (courtesy of
jQuery). It is
positioned absolutely wrt a div.outer. The banner has six images which are
rotated (also
with jQuery). The images, with overlying text, are each contained in a
<div> which is
absolutely positioned wrt a containing <div id='pananim'>. That div is
given height by using
JQuery to clone one of the divs after loading and make its position static.
That all works
satisfactorily.
But the entire page is displaying with a 51px gap at the top. The HTML
after loading follows
this outline. I have shown the relevant CSS beside each element:
<body>
<div class='outer'> {position: relative;}
<nav> {position: absolute; wrt .outer}
nav stuff here
</nav>
<div id='pananim'> {position: relative; margin-top: 51px;}
<div> {position: static;}
image and text in each div
</div>
<div> {position: absolute; wrt #pananim}
image and text in each div
</div>
five more similar divs...
</div>
<div class='inner'>
home page content...
</div>
<footer>
</footer>
</div>
</body>
To see this outline you'll need to be able to view the generated source.
The <nav> has a height of 51px (50px image plus 1px border-bottom), so to
get the absolutely
positioned divs that are inside div#pananim to display in the right place
I've given
div#pananim a margin-top of 51px. So far so good, but the whole page has
now acquired a gap
at the top (occupied only by HTML), and I can't work out why.
My understanding is that absolute positioning is with respect to the BORDER
position (if
there were one), that's to say it's outside the padding, but inside any
margin. Hence the
{margin-top: 51px}.
I can get rid of the gap by taking the {position: relative;} OFF div.outer,
but that leaves
the <nav> positioned with respect to the body, which I suppose is OK but
not what I'd like.
In the hope of clarifying a bit, I've put a RED outline on the body and
GREEN on the div.outer.
This is the large screen version. The same happens on small screens, but
the menu is hidden
until the green icon is clicked (prodded).
I think the gap must come about because I've got confused with my
{position: relative} and
{position: absolute;}. Can anyone offer some guidance, please ?
Tested in Firefox and Chrome and briefly in IE11.
Regards,
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org
<mailto: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://evolt.org> --
http://www.evolt.org/help_support_evolt/
--
Ryan Reese
--
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/
