0

I have the below nav menu and whenever i resize using the ctrl+right click the last item FAQ appears and dissapears..not to mention it also breaks my entire site background represented by 2 images. whats wrong and how to make it stay the same on resizing? cheers!

html:

<div class="nav">
        <ul>
           <li class='active '><a href='#'><span>Home</span></a></li>
           <li><a href='#'><span>about us</span></a></li>
           <li><a href='#'><span>our errand ladies</span></a></li>
           <li><a href='#'><span>schedule an errand</span></a></li>
           <li><a href='#'><span>contact us</span></a></li>
           <li><a href='#'><span>faq</span></a></li>
        </ul>
    </div>

css:

.nav {
            width: 100%;
            height: 63px;
            overflow: hidden;
        }

        .nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: auto;
            position: relative;
            display: block;
            height: 63px;
            text-transform: uppercase;
            font-size: 21px;
            background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
            font-family: Helvetica,Arial,Verdana,sans-serif;
        }
        .nav li {
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            }
        .nav li a {
            display: block;
            float: left;
            text-decoration: none; 
            padding:0 30px;
            height: 63px;
            line-height: 63px;
            vertical-align: middle;
            background: transparent url('images/divider.png') no-repeat top right;
            }
        .nav li a:hover {
            background: transparent url('images/nav-hover.png') repeat-x top right; 
            }

        .nav li a span {
            color: #000;
            font-weight: bold;
        }
4

2 回答 2

0

You have overflow: hidden; set on your .nav element and no width defined.

By default, the .nav is set to 100% width, as it's a block element. It will automatically span the width of the parent it's currently sitting in.

When you resize the window down to a size that cannot fit the links, they fall outside of the .nav and are hidden from view.

You can set a fixed width to your .nav (or parent container) to prevent it from collapsing in width.

.nav {
  width: 960px;
}

Or if you still want it to collapse, but still show the nav links, you can remove overflow: hidden; and the elements will appear (however, they will not be inline with each other.

于 2013-05-22T19:00:00.683 回答
0

for the second problem set the 

body{
background-repeat:no-repeat;
}

and it disappears as overflow is hidden; set it to none

.nav{
width:1000px;
overflow:none;
..
}

the way i see is you are trying to put the list elements inline so you can try this code and modify the looks:

<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Here</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
于 2013-05-22T19:00:25.400 回答