Member Avatar for suavedesign

My url is
Can anyone help me figure this out:
I am trying to get the nav bar to appear on top of the image. I dont know why there is a space between the image and the top of the screen, which is where the nav is now. How do I get rid of that space, so that the na sits on yop of the image, not on top of that extra space?
My code is

<div id="hometopwrapper">

    <div id="top">

        <?php include('inc_nav.php') ; ?>



    </div>

    </div>



    <div id="wrap">

   <div class="topimg"><img src="images/top_img.png" width="100%" height="auto" border="0" alt="Pesach Tikvah Family and Childrens Services" /></div>

Where "topimg" is the big image, and the nav is in "#hometopwrapper", not "#wrap", which is what I see stretching to the top, causing the extra space. How do I get rid of that??
Thanks!

Edited by pritaeas because: Fixed URL.
  • 3 Contributors
  • 5 Replies
  • 196 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by suavedesign

Dani AI

Generated

A few quick, practical checks and fixes that address the usual causes of the “gap between the nav and the top image” problem observed in this thread (and that build on ’s float comment and ’s HTML-check suggestion).

First, debug checklist (in order):

  • Inspect computed styles in DevTools for body, #hometopwrapper, #wrap and the image—look for nonzero margin-top, position, or float.
  • Confirm the nav’s children aren’t floated without the parent containing them (a floated child can make the parent collapse to zero height).
  • Check for browser default body margins (often 8px) and for the image being treated as inline (baseline gaps).

If the goal is for the nav to sit visually on top of the image, the most robust approaches are either to make the hero image part of the same wrapper as the nav (or use it as a CSS background), or to absolutely position the nav over that wrapper. Example CSS patterns that are safe, responsive, and avoid reflow issues:

/* reset and image baseline fix */
body { margin: 0; padding: 0; }
.topimg img { display: block; width: 100%; height: auto; }

/* contain floats if nav items are floated */
#hometopwrapper::after { content: ""; display: table; clear: both; }

/* overlay nav (use when image and nav share the same container) */
#hometopwrapper { position: relative; }
#top { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; }

If changing markup is not an option, another quick fix is to contain floated nav items (overflow: auto or the clearfix above) so #hometopwrapper keeps height; that prevents #wrap from rising up. As an alternative to absolute positioning, consider switching the top image to a background-image on the wrapper so the nav remains in normal flow while visually overlaying the image. Finally, validate the HTML structure (matching tags) because malformed markup can produce unpredictable spacing.

Recommended Answers

All 5 Replies

Member Avatar for Member #1042208

This is what i came across while checking your source.

<ul>
<li><a href="" >Home</a></li>
<li><a href="" >About Us</a></li>
<li><a href="" >Staff</a></li>
<li><a href="" > Programs</a></li>
<li><a href="" >Donate</a></li>
<li class="lastli"><a href="" >Contact Us</a></li>
</ul>
</div>



    </div>

    </div>

After 9th line, you have given </div> twice. Remove one of them and see if it works for you.

Do let us know.

Member Avatar for JorgeM

If you remove the height property as shown below, the space if removed. However, you will need to work on the mouseover/hover effect on those links..

75189e1cd1c98fc49ffbc2679ccbf425

Member Avatar for suavedesign

Firstly, there is no extra </div>. One is for id "hometopwrapper", and one is for "top".

When I removed the height on the hometopwrapper, like you suggested, it did not get the nav to appear on top of the image, like I want.
Basically, I want to know why #wrap is starting from the top of the page, instead of under #hometopwrapper, like I coded it. (If you check with inspect element, you'll see that #wrap includes the entire site)

Thanks

Member Avatar for JorgeM

Sorry, misunderstood your question...

Basically, I want to know why #wrap is starting from the top of the page, instead of under #hometopwrapper, like I coded it.

My inclination is to look to see if you are taking #hometopwrapper or some element above #wrap out of the normal flow. This can typically happen if you apply a "float" property. When you float an element, it is taken out of the normal flow within the DOM, thereby allowing other elements to move up.

Member Avatar for suavedesign

thanks for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.