CODEWITHSUNDEEP
htmlcssnavbar
Matt Altepeter
Matt Altepeter

Reputation: 329

Horizontal Navigation Bar Issues

I am currently re-working a website that I manage and I am having issues with the navigation bar. It works perfectly using a high resolution (I am currently using 1440x900), but when I switch to a lower resolution, the last couple menu items get chopped off.

Here is the HTML:

     <body>

<div id="page-wrap">
    <div id="inside">


        <div id="header">
            <img src="LogoGood.gif" alt="LogoGood" width="591" height="224" />



        <div id="nav">
<ul>

    <li><a href="index.html">Home</a></li>
    <li><a href="writings.html">Writing</a></li>
    <li><NOBR><a href="media.html">Media Relations</a></NOBR></li>
    <li><a href="events.html">Events</a></li>
    <li><NOBR><a href="proofreading.html">Proofreading</a><NOBR></li>
    <li><NOBR><a href="work.html">Writing Workshops</a></NOBR></li>
    <li><a href="publications.html">Publications</a></li>
    <li><a href="About.html">Working With You</a></li>
    <li><a href="aboutkathy.html">About Kathy Mayer</a></li>
    <li><a href="contact.html">Contact Kathy</a></li>
</ul>

and the css:

    #page-wrap {
background: beige;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
    margin: 50px 10px 0px 10px;
    padding-bottom: 10px;
}

    #main-content {
background: beige;
padding-left: 50px;
padding-top: 80px;

height: 400px;}


    #header {
padding-top: 5px;
background: beige;
text-align: center;}

    #nav {
float: left;
width: 100%;
background: beige;
height: 80px;
overflow: hidden;
padding: 0;
margin: 10px 0 0 0;
border-bottom: 1px solid rgb(255,23,28);}

    #nav ul{
text-align: center;
float: left;
list-style: none;
padding-left: 13px;
margin: auto;}

    #nav li {
float: left;
list-style: none;}


    #nav li a {
display: block;
padding: 8px 8px;
border-right: 1px solid rgb(255,23,28);}

Thanks in advance!

Upvotes: 3

Views: 1502

Answers (2)

DriftingSteps
DriftingSteps

Reputation: 526

I believe the main problem here is the number of menu items present and the defined height. The items are there, but the height of #nav is just 80px. For wider screens, this shouldn't be a problem, but for screens with smaller resolution, the menu will get chopped off, especially when the height is already defined. One top of that, having a lot of items in a single navigation bar surely increases its overall width. Having long names for links also help increase the width of each li (for example, "About Kathy Mayer" compared to "About" or "About Me" and "Contact Kathy" compared to "Contact").

One way of getting rid of this problem is by creating two separate navigation bars. You may have "Home", "About/About Kathy Mayer" and "Contact/Contact Kathy" on the top-right corner of the page, making it a separate nav-bar, and keeping the rest on another nav-bar, so that you'll have two different navigation bar.

Another way would be making a vertical navigation bar, which will eliminate the whole problem.

One more idea I just got: You may also sub-menus for items that have similar titles, like enlisting "Writing", "Proofreading" and "Workshops" under one sub-menu.

I hope I was helpful.

Upvotes: 1

ptriek
ptriek

Reputation: 9286

You've set your #page-wrap to min-width:780px - but your menu is wider than that.

http://jsfiddle.net/bbcmF/

Try a larger min-width: http://jsfiddle.net/bbcmF/1/ (or make the menu smaller)

Upvotes: 0

Related Questions