...

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



TerraNuva
06-18-2012, 07: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.

EpicWebDesign
06-19-2012, 05: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;
top:0;
right:0;
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:

</head>

<body>
<div id="wrapper">
<header>
<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>
</ul>
</div>

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

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum