PDA

View Full Version : white space trouble



hurloon
09-18-2006, 03:10 AM
I have this code:

<!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" xml:lang="en" lang="en">
<head>
<title>
LaLa Web Design
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<div class="header">
<p class="headtext">
LaLa Web Designs
</p>
</div>
<div class="leftdiv">
<div class="le">
Navigation
</div>
<ul id="nav">
<li><a href="index.html" class="nav2">Home</a></li>
<li><a href="#" class="nav2">Art</a></li>
<li><a href="#" class="nav2">Services</a></li>
<li><a href="#" class="nav2">About</a></li>
<li><a href="#" class="nav2">Links</a></li>
</ul>
</div>
<div class="rightdiv">
<div class="righttitle">
Advertisements
</div>
<!-- advertisement code here-->
</div>
<div class="navdiv">
<a href="index.html" class="nav">Home</a>>Welcome Page
</div>

<div class="content">
<div class="title">
<p class="htitle">
Welcome to LaLa Land
</p>
</div>
<p class="text">
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</p>
</div>
</div>
</body>

</html>

CSS:

html {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
height:100%;

font-family:"verdana";
margin:0;
padding:0;
background-color:#79a678;
}

.container {
background:url(back.gif) repeat-y;
height:100%;
width:755px;
margin:0 auto;
text-align:left;
}

.header {
width:755px;
height:85px;
text-align:left;
padding:0;
padding-left:50px;
background-color:#79a678;
}
.leftdiv {
float:left;
top:0;
background:url(bg.gif) top left no-repeat;
width:130px;
}
.headtext {
font-weight:500;
font-family:"Bradley Hand ITC",papyrus,Comic Sans MS;
font-size:72px;
display:inline;
margin-top:25px;
}
.content {
width:470px;
padding:0;
margin:0 auto;
margin-top:5px;

min-height:100px;
background-color:#91c378;
border:4px solid #79a678;
}
* html div.content {
height:100px;
}
.rightdiv {
float:right;
width:140px;
height:100px;
padding:0;
top:0;
background:url(b2.gif) top right no-repeat;
}
.title {
height:30px;
text-align:center;
border-bottom:4px solid #79a378
}
.righttitle {
font-weight:500;
text-align:center;
}
.htitle {
text-align:center;
color:#333;
font-size:18px;
display:inline;
}
.text {
margin-left:10px;
}
.navdiv {
width:350px;
margin:0;
margin-left:135px;
margin-top:35px;
font-family:"verdana";
font-size:11px;
font-weight:bold;
color:#000;
text-decoration:none;
}
#nav {
list-style:none;
width:130px;
float:left;
padding:0;
margin:0;
margin-top:10px;
}
#nav li {
display:block;
}
#nav li a {
padding:5px;
padding-left:15px;
display:block;
font-family:"arial",verdana;
font-size:16px;
font-weight:bold;
text-decoration:none;
color:#000000;
border-left:5px solid #91c378;
}
#nav li a:hover {
padding:5px;
padding-left:15px;
display:block;
font-family:"arial",verdana;
font-size:16px;
font-weight:bold;
color:#333333;
background-color:#a1cb78;
text-decoration:none;
border-left:5px solid #79a678;
}
a.nav {
font-family:"verdana";
font-size:11px;
font-weight:600;
color:#000;
text-decoration:none;
}
a.nav:hover {
font-family:"verdana";
font-size:11px;
font-weight:600;
color:#000;
text-decoration:underline;
}
*html #nav li {
height:1%;
float:left;
}
*html #nav li a {
height:1%;
}
.le {
margin-top:30px;
text-align:center;
font-family:"arial",verdana;
font-size:17px;
font-weight:bold;
text-decoration:none;
color:#333333;
}

and for some reason I have some unwanted white space off to the right of my container which I havent been able to get rid of. any advice is greatly appreciated.

Arbitrator
09-18-2006, 03:29 AM
You /do/ know that none of those images will work without a complete URL, right? I looked at it without images and I can't tell what you mean or which browser you refer to since it looks different between Firefox and Internet Explorer 6.