Member Avatar for sweexee

Hi, please can someone help me to solve divs' ovelapping issue in my code? My navigation overlapping logo area when I resize my browser window to a smaller. Other divs stay proportionally in their places except navigation . I tried different options but I can't find a mistake. I would really appreaciate a help. This is this part css and html:

* {
    margin: 0%;
    padding: 0%;
}
body {
    font-family: "PT Sans Caption";
    font-size: 1em;
}
li {
    list-style: none;

}
ul {
    display: block;
}
}
header, nav, section , footer{
    display: block;
    clear: left;
    float: left;
    width: 100%;
}

#container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
}
header {
    height: 10em;
    position: relative;
}
nav {
    width: 75%;
    position: relative;
    left: 16%;
    clear: none;
}

.logo {
    width: 13%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-top: 2%;
    position: fixed;
    z-index: 1000;
    float: left;
}

.top-nav {
    padding-top: 2%;
    clear: none;
    position: relative;
}
.top-nav-li {
    float: left;
    margin-right: 2%;
}

and here HTML:

<body onload="MM_preloadImages('images/nav_about_col.png','images/nav_illustration_col.png','images/nav_graphic_col.png','images/nav_contact_col.png','images/social_fb_col.png','images/social_pin_col.png','images/social_blog_col.png','images/web_cap250_col.jpg')">
<div id="container">
  <header>
    <div class="logo">
      <p><img src="images/web_logo.png" width="120" height="124" alt="fox box design" /></p>
</div>
    <nav class="top-nav" role="navigation">
    <li class="top-nav-li">
    <a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/nav_about_col.png',1)"><img src="images/nav_about1.png" alt="a link to about section" name="Image2" width="67" height="70" border="0" id="Image2" /></a></li>
    <li class="top-nav-li"><a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nav_illustration_col.png',1)"><img src="images/nav_illutr1.png" alt="a link to illustration category" name="Image3" width="67" height="70" border="0" id="Image3" /></a></li>
    <li class="top-nav-li"><a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/nav_graphic_col.png',1)"><img src="images/nav_graphic1.png" alt="a link to graphic design category" name="Image5" width="67" height="70" border="0" id="Image5" /></a>
    <li class="top-nav-li"><a href=><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/nav_contact_col.png',1)"><img src="images/nav_contact1.png" alt="a link to contact section" name="Image6" width="67" height="70" border="0" id="Image6" /></a>
    </nav>
  </header>
  • 4 Contributors
  • 3 Replies
  • 3K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

is spot on: position: fixed pulls .logo out of normal flow, so the nav never knows it needs to make room for it. You also have a stray } after the ul { ... } rule and li elements not wrapped in a ul, plus nested anchors in the HTML. Those parsing errors can make layout bugs look random on resize. @Alicera Nz, switching to display:inline will not solve the overlap while the logo is fixed. , if the goal is responsiveness, it’s easier to let the header lay itself out rather than pushing things around with left: 16%.

Two quick paths:

  1. Keep your current look, but remove overlap:
  • Put the logo back in flow and remove the relative offset on the nav.
  • Wrap the nav items in a ul.
  • Let the header distribute space.

Example (minimal):

header { max-width:1200px; margin:0 auto; padding:12px; 
         display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.logo { position:static; flex:0 0 120px; }           /* no fixed */
.top-nav { flex:1 1 auto; }
.top-nav ul { display:flex; flex-wrap:wrap; gap:12px; 
              margin:0; padding:0; list-style:none; justify-content:flex-end; }

@media (max-width:600px) {
  .top-nav { width:100%; order:2; }
  .logo { order:1; }
}
  1. If the logo must stay fixed while scrolling, reserve space for it:
  • Keep .logo { position: fixed; left:0; }
  • Add left padding to the header equal to the logo’s rendered width so content never slides under it (e.g., header { padding-left:140px; }), and remove left: 16% from the nav.
  • Use a media query to reduce that padding on small screens or stack the nav under the logo.

Finally, clean up HTML: one <a> per item, li inside a ul, and drop the deprecated MM_* image-swap JavaScript. These small fixes usually eliminate the overlap entirely.

Recommended Answers

All 3 Replies

Member Avatar for Bensirpent07

This is a question of curiosity, are you doing the resizing to find out if the page is responsive?

Member Avatar for Alicera Nz

change to:

display:inline;
Member Avatar for gentlemedia

It's because you're logo has a fixed positioning, so it's taking out of the normal document flow and has therefore no effect to other elements of that page.

Edited by gentlemedia
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.