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
[comment deleted]