Question

Ok, I’m working on this website (its my first one), and I am looking for some insight on making my nav menu work better. When you go to the “projects” page, the about button all of a sudden looks like it has too much spacing to the right. Also, when you go to the “Contact” page, the menu is totally messed up. I thought about just adding the home button to the main page navigation so all the menus would be exactly the same and maybe it would work right, but there HAS to be a better solution.

Also, the website looks really flat. I’d be open to suggestions on giving it some depth, as well as any other criticism you may have. (bear in mind I’ve only been doing this for a couple months).

Web address

HTML:

 <ul class="transparent" id="navcontainer" >        
    <li class="topnavleft floatleft"><a href="index2.html">Home</a></li>                    
    <li class="topnav floatleft"><a href="About.html">About</a></li>                           
    <li class="topnavright floatleft"><a href="Projects.html">Projects</a></li>                    
</ul>

CSS:

#navcontainer {
    margin-top: 0;
    height: 55px;
    width: 232px;
    float: right;
    overflow: visible;
    padding: 0;
}

.topnav {
    width: 45px;
    border-right: 1px solid #FFF;
    margin-right: 10px;
    padding-right: 22px;
    margin-left: 10px;
    margin-top: 16px;
}

.topnavleft {
    width: 45px;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    margin-left: 7px;
    padding-left: 10px;
    padding-right: 6px;
    margin-top: 16px;
}

.topnavright {
    width: 45px;
    border-right: 1px solid #FFF;
    margin-right: 7px;
    padding-right: 20px;
    padding-left: 1px;
    margin-top: 16px;
}

Answer 1

There is a problem with this line in the About page:

<div class="transparent" id="logo"><a href="www.ALRGuitars.com"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" </a></img>

You have missed out the closing /> of the img tag, it should be like this:

<div class="transparent" id="logo"><a href="http://www.alrguitars.com"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" /></a></img>

For screenreaders and search engines, the logo should have the text ALR Custom Guitars, use a background-image instead of an img tag, and set text-indent: -999px so that only the image will show.

Also, lots of your links point to www.ALRGuitars.com, they should be http://www.ALRGuitars.com.

---

EDIT:

Here are some errors to correct (remember to correct all errors and warnings from the W3C validation result):

This:

<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" </img><a/>
<a href="http://twitter.com/ALRGuitars" target="_blank"><img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img></a>

Should be:

<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" />
<a href="http://twitter.com/ALRGuitars" target="_blank"><img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img></a>

In the copyright notice, you have forgotten a semicolon after a character reference.

Either use © or ©.

This:

<link href'http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>

Should be:

<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>

There was a missing = sign after href.

---

EDIT #2:

After some fiddling with the CSS, try this for the menu:

#navcontainer {
    float: right;
    width: 250px;
    height: 30px;
    padding: 5px;
    margin-top: 0;
    overflow: visible;
}
.topnav a {
    display: block;
    width: 70px;
    height: 20px;
    padding: 5px;
    text-align: center;
}
a:hover {
    color: #606060;
    font-style: italic;
}

It should correct the problem of the links moving when hovered over.