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]
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/
