Problem with top Navigation bar for site

nevalite

12-31-2005, 03:37 PM

Hey,

The site I am making I want a navigation bar with links like home, gallery etc. I made it with slices in photoshop but when i put it into the html code (using tables) it leaves spaces between each slice and then it doesnt all fit in the right area.

heres the code:

<table width="810" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="white">
<tr>
<td height="40" colspan="2">
<a href="index.html"><img border="0" src="images/nav-bar/nav-bar_01.gif" alt="Home" height="40"></a>
<a href="projects.html"><img border="0" src="images/nav-bar/nav-bar_02.gif" alt="Projects" height="40"></a>
<a href="forum.html"><img border="0" src="images/nav-bar/nav-bar_03.gif" alt="Forums" height="40"></a>
<a href="gallery.html"><img border="0" src="images/nav-bar/nav-bar_04.gif" alt="Gallery" height="40"></a>
<img border="0" src="images/nav-bar/nav-bar_05.gif" alt="navbar" height="40">
</td>
</tr>
</table>

Thats the code for the nav bar but how can i get all the images to stick right to each other?

_Aerospace_Eng_

12-31-2005, 09:45 PM

Use a list instead.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin:0;
padding:0;
background:#000000;
color:#FFF;
}
#nav {
margin:0 auto;
padding:0;
list-style-type:none;
line-height:0px;
font-size:0;
height:40px;
background:#FFF;
color:#000;
width:810px;
}
#nav li {
float:left;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="index.html"><img border="0" src="images/nav-bar/nav-bar_01.gif" alt="Home" height="40"></a></li>
<li><a href="projects.html"><img border="0" src="images/nav-bar/nav-bar_02.gif" alt="Projects" height="40"></a></li>
<li><a href="forum.html"><img border="0" src="images/nav-bar/nav-bar_03.gif" alt="Forums" height="40"></a></li>
<li><a href="gallery.html"><img border="0" src="images/nav-bar/nav-bar_04.gif" alt="Gallery" height="40"></a></li>
<li><img border="0" src="images/nav-bar/nav-bar_05.gif" alt="navbar" height="40"></li>
</ul>
</body>
</html>

nevalite

12-31-2005, 11:21 PM

when i did the list and css style thing the rest of the site got sorta distorted, it spaced out my main area and the nav bar wasnt alligned properly :confused: