No takers?

Kane

01-31-2007, 10:56 PM

body {
width: 100%;
height: 100%;
background-color: #666666;
margin: 0;
}

#header {
background-color: #000000;
background-image: url(header.gif);
background-repeat: no-repeat;
background-position: center bottom;
height: 137px;
width: 729px;
top: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}

#nav {
background-color: #000000;
background-image: url(navbkgnd.gif);
background-repeat: no-repeat;
background-position: center bottom;
height: 29px;
width: 739px;
top: 152px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-right:auto;
margin-left:auto;
margin-bottom:auto;
}

a:hover{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
color:#990000;
display: block;
text-align: center;
text-decoration: none;
font-weight: bolder;
}

ul{
list-style: none;
margin: 0px;
padding-left: 0px;
}

ul li {
width: 147px;
height: 49px;
float: left;
padding-top: 14px;
}

ul li a {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #CCCCCC;
display: block;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
#contentArea{
background-image:url(contentbkgnd.gif);
height: 405px;
width: 749px;
clear:both;
padding: 0;
}

/html/
<!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=ISO-8859-1" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="calendars.html">Calendars</a></li>
<li><a href="pens.html">Pens</a></li>
<li><a href="apparel.html">Apparel</a></li>
<li><a href="businessgifts.html">Business Gifts</a></li>
<li><a href="contact.html">Contact</a></li></ul>
</div>
<div id="contentArea"></div>
</html>

the #contentArea is about 20 px below the nav, and i cant figure out why i have gone through just about every positioning setting possible, no luck. maybe has to do with nav above it? pls and thank you!

Arbitrator

01-31-2007, 11:15 PM

Use a thread title that actually describes your issue. “No takers” is not descriptive.
When describing the issue, it’s helpful to demonstrate how things should look instead of just pointing out what’s wrong. So you have a 20 pixel space that you want removed. How much space is there supposed to be there? None? 5 pixels?
Specify which browser(s) and versions of those browsers that the issue occurs in.
Use tags to delimit your code when posting.

#nav {
background-color: #000000;
background-image: url(navbkgnd.gif);
background-repeat: no-repeat;
background-position: center bottom;
height: 29px;
width: 739px;
top: 152px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-right:auto;
margin-left:auto;
margin-bottom:auto;
}

…

/html/
<!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=ISO-8859-1" />
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="nav">
<ul>
<li><a href="calendars.html">Calendars</a></li>
<li><a href="pens.html">Pens</a></li>
<li><a href="apparel.html">Apparel</a></li>
<li><a href="businessgifts.html">Business Gifts</a></li>
<li><a href="contact.html">Contact</a></li></ul>
</div>
<div id="contentArea"></div>
</html>

the #contentArea is about 20 px below the nav, and i cant figure out why i have gone through just about every positioning setting possible, no luck. maybe has to do with nav above it? pls and thank you!The padding declaration above, highlighted in red, may be the source of some of the undesired space.

I also see an error in your code: the </body> tag is missing.

Excavator

01-31-2007, 11:20 PM

Hello Kane,
A few errors there that need to be looked at, check the validator link in my sig below.
To fix the gap make your CSS read like this:
html, body {
width: 100%;
height: 100%;
background-color: #666666;
}
* {
margin: 0;
padding: 0;
}
#header {
background-color: #000000;
background-image: url(header.gif);
background-repeat: no-repeat;
background-position: center bottom;
height: 137px;
width: 729px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}

#nav {
background-color: #fff;
background-image: url(navbkgnd.gif);
background-repeat: no-repeat;
background-position: center bottom;
height: 29px;
width: 739px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-right:auto;
margin-left:auto;
overflow: hidden; /*to clear your floats*/
}

a:hover{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
color:#990000;
display: block;
text-align: center;
text-decoration: none;
font-weight: bolder;
}

ul{
list-style: none;
margin: 0px;
padding-left: 0px;
}

ul li {
width: 147px;
height: 49px;
float: left;
padding-top: 14px;
}

ul li a {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #CCCCCC;
display: block;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
#contentArea{
background-image:url(contentbkgnd.gif);
height: 405px;
width: 749px;
clear:both;
margin: 0 auto;
background-color: #00FF00;
}

Just a start for you...

Kane

01-31-2007, 11:32 PM

Thanks for the help