PDA

View Full Version : Website Navigation Problem



umarkal
31 Dec 2010, 08:14 AM
Hello

I have a problem with my navigation. Well everything is working and there is a gap between the Navigation bar and the body.

My HTML and CSS coding are shown below:

---HTML---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Ready Made Custom PCS</title>
<link rel="stylesheet" href="custombuild.css" type="text/css" />
</head>
<body>

<center>
<table width="50%">

<tr><td>
<!--header-->
<div id="header">

<!--logo-->
<div id="logo">
<img src="images/logo.png" width="270px" alt=""></img>
</div>

<!--email-->
<div id="email">
<a href="mailto:muk0261@my.londonmet.ac.uk"><img src="images/email.png" border="0px"></a>
</div>

</td></tr>

<!--navigation-->
<tr><td>
<img src="images/navbar.gif"></img>

<div id="navigation">
<ul>
<li><a href="index.html">Home </a></li>
<li><a href="product.html">Products</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

</td></tr>


<!--body-->
<tr><td>

<div id="content">
Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here.
Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here.
Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here.
Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here. Text Goes Here.
</div>

</td></tr>

<!--footer-->
<tr><td>
<div id="footer">

<!--copyright-->
<center>
<div id="copyright">
Powered by Mohammed Kaleem - Copyright &copy;&nbsp;2011 - All Rights Reserved &reg;
</div>

</center>
</td></tr>

</table>
</center>
</body>
</html>

---CSS---

body {
font-family:arial;
font-size: 12px;
margin: 5px;
background-image:url('images/backgroundbottom.png');
background-repeat:repeat-x;
background-position:center bottom;
}

table {
background-color: white;
border-left: 8px ridge black;
border-right: 8px ridge black;
border: 0px soild #cccccc;
}

#header {
background-color: #000000;
height: 150px;
width: 100%;
}

#logo {
margin: 25px;
position: absolute; top: -500; left: 335;
}

#email {
position: relative; top: 80px; left: 310px;
}

#navigation {list-style: none;}
#navigation {font-size: 16px;}
#navigation li {display: inline; padding: 50px;}
#navigation li a:hover {color: blue;}
#navigation li a {color: black;}
#navigation {position: relative; left:-10px; top:-50px;}
#navigation ul li a:visited, a:hover{text-decoration: none;}

#body{
border: 1px solid black;
height: 405px;
width: 100%;
}

#content{
border: 1px solid black;
height: 1000px;
width: 100%;
}

#footer{
background-color: #000000;
height: 50px;
width: 100%;
}

#copyright {font-size: 12; color: white;}
#copyright {position: relative; bottom:-20px;}

To view a live website of the problem i have above, please go to www.custombuild.com.nu

zachsformacs95
01 Jan 2011, 11:43 AM
It seems like the relative positioning of the navigation bar (i.e. top: -50px) is causing the gap. I see that the reason you're using it is so the navigation bar will overlap the background image of it. I guess the easy way out would be to bring up the content 50px as well, but I don't think it's a good approach (although neither is setting up the website in a table). The best thing would be to get rid of the image before the navigation bar and apply it as a background-image in CSS instead.