get rid off white space

kamkam

07-31-2011, 11:08 AM

Hi;

I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yourheadstone.com</title>
<style type="text/css">

html head title{
border:0;
padding:0;
margin:0;
}

body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}

table tr td{
border: 1px solid #000000;
}

table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;

}

tr td{
padding:0;
margin:0;
}

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;

}
#nav li {
float: right;

}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;

}
#nav li a:hover {
color: #c00;
background-color: #fff; }

</style>
</head>

<body>

<table>

<tr>

<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>

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

VIPStephan

07-31-2011, 02:22 PM

What is it with that table anyway? You don’t need that and it’s totally wrong for what you are doing.

But anyway, if you want to remove whitespace from the bottom of the navigation, why don’t you just remove the bottom margin then?
#nav {
…
margin: 0 0 3em 0; /* ??? */
…

kamkam

07-31-2011, 08:25 PM

vikram1vicky

07-31-2011, 08:36 PM

The reason i do that just trying to using a table to display a website layou.

Because i find my website is different from differenr resolution and also some elements are sit together too when i adjust to another resolution.

In fact, i have tried to set the value of my container is 800*600, but the elements still sit together when i shrink the window. So i try to use table to do website layout.

You should try table-less layout...

Following are some sites for table-less layout examples:

http://www.free-css-layouts.com/
http://www.dynamicdrive.com/style/layouts/
http://designshack.co.uk/articles/css/715-awesomely-simple-and-free-css-layouts

kamkam

07-31-2011, 09:15 PM

Thanks for your fantastic links, i am going to try:thumbsup: that.