View Full Version : Need help with a css sidebar/navbar

06-18-2012, 08:29 PM
I was having a little trouble with css in making my sidebar.png function with links. I need help coding the links to each individual word (Home Products About Design). I do have an understanding of coding but am not a pro so any help would be nice. Just tell me if you need me to explain something. Download nextcom.zip and see what i did wrong. Thank You.

EDIT: left out the center picture because it was too large.

06-19-2012, 06:17 PM
You've got some quirky things going on with some of your code, but I'm just addressing the image map issue for now.

Here's the CSS (which should be called externally):

#nav_links {

position: absolute;
width: 578px;
height: 74px;

background: url('images/sidebar.png')no-repeat;

#nav_links ul {
margin: 0;
padding: 0;
list-style: none;

#nav_links a {
position: absolute;
width: 120px;
height: 74px;


#nav_links .home a {
top: 0px;
left: 0px;

#nav_links .products a {
top: 0px;
left: 150px;
#nav_links .about a {
top: 0px;
left: 300px;
#nav_links .design a {
top: 0px;
left: 450px;

And here's the updated HTML:


<div id="wrapper">
<a href="index.html"><img src="images/logo.png" id="logo"/></a>

<div id="nav_links"><ul>
<li class="home"><a href="HOME"> </a></li>
<li class="products"><a href="PRODUCTS" ></a></li>
<li class="about"><a href="ABOUT"> </a></li>
<li class="design"><a href="DESIGN"> </a></li>

<img src="images/nextgen.png">
</div><!-- END wrapper -->

The new code is in red and you'll need to actually point the links to go to the right pages. I rearranged some of your other stuff because you had things in the <head> which should have been in the body and vice-versa. Hope this helps.