0

So you guys were so helpful yesterday that I thought I would ask another question. There is unnecissary white space on the right side of the page, you can't see it until you scroll over to the right, But I have no Idea why it is there. My website is http://spencedesign.netau.net/squids.html and my code is:

*  {

padding:0px;
margin:0px;

}

#header {

position: relative;
width: auto;
height:200px;
padding:0px 0px 0px 5px;

}

#body {

background-color: #2C5197; 
margin-top: 0px; 
padding: 1px 1px 3px 1px ; 
width: auto;

} 


#nav ul  {

width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #fff;
position: absolute;
top: 162px;
left: 550px;

}

#nav li  {

float: left; 

}
#nav li a  {

display: block;
padding: 8px 25px 8px 25px;
text-decoration: none;
font-weight: bold;
font-size: 14pt;
font-family: sans-serif;
color: #2C5197;
border-right: 1px solid #2C5197;

}

#nav li a:hover  {

color: #ffffff;
background-color: #2C5197; 

}

.active  {

color: #ffffff;
background-color: #2C5197; 

}

And my HTML code is

<!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>
<title> Squids </title>

<link rel="stylesheet" type="text/css" href="squids.css" />

</head>

<body>

<!-- Header -->

<div id="header" >
<p> Header </p>
</div>

<!-- End of Header -->

<!--Nav Bar-->
<div id="nav">
<ul>
<li class="active"> <a href="#" > <font color="white"> Home </font> </a> </li>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Home </a> </li>
</ul>
</div>

<!--End Of Nav Bar-->

<div id="body" >
<p> Content </p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

<!-- Clock Flash Player -->
<!-- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
width="500" height="150" name="GameID">
<param name="movie" value="simpleclock-500x150.swf">
<embed src="simpleclock-500x150.swf" width="500" height="150" 
quality="high" type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" name="GameID">
</embed></object> -->
<!-- End of Clock Flash Player -->

</body>

</html>
2
Contributors
3
Replies
5
Views
5 Years
Discussion Span
Last Post by adam.adamski.96155
1

Was your code hit by a truck?

#nav ul {
width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #fff;
position: absolute;
top: 162px;
left: 550px;
}

You have 100% width AND absolute positioning, I guess the unecessary whitespace is 550 pixels.

0

Haha thanks. I am as beginner as it gets. I am only 7 weeks into my first html/css class ever

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.