0

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
19
Views
2 Years
Discussion Span
Last Post by gentlemedia
0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.