help - header and content near each other.. (not space between them)

avraamG13 · May 24, 2009

Hello, i need some help..

Im trying to make header and content of my site to be the one near the other please see examples images:

Error image:

http://www.anthelo.org/error/ERROR.png

How to look when fixed:

http://www.anthelo.org/error/FIXED.png

.css code

/* CSS Document */

body{
padding:11px 0 14px 0;
margin:0;
background-color:#fff;
color:#000;
background: url('../images/layout/background_body.gif');
}
div, h1, h2, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}

ul{
margin:0; 
padding:0; 
list-style-type:none;
font-size:0;
}
.spacer{
clear:both; 
font-size:0; 
line-height:0;
}
#ads-top-blue {
padding-top: 35px;
padding-left: 465px;

}

/* body */
#main {
position:relative;
width:981px;
clear:both;
height:auto;
margin:auto;
background: url('../images/main/main.gif') repeat-y center;
}

#content_outer {
//border-top: 1px solid #FFF;
width:981px;
}
.content {
padding-left: 465px;	
color: #444;
padding: 16px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}

/* body */
#body{
width:auto;
padding:13px 1px 13px 2px;
margin:0 0 4px 0;
}

/*------------------------------------------------left--------------------*/
/* Header */
#header{
background:url(../images/header/header.gif) 0 0 no-repeat;
width:981px;
height:130px;
position:relative;
margin: 0 auto;
top: -11px;
}
#header ul{
background:url(../images/header/nav_bar.gif) 0 0 no-repeat;
width:847px;
height:29px;
position:absolute;
left:31px;
padding:0 0 0 72px;
}
#header ul li{
background:url(../images/header/nav_div.gif) right top no-repeat;
height:27px;
float:left;
padding:0 1px 0 0;
}
#header ul li a{
display:block;
background:url(../images/header/nav_bg.gif) 0 0 repeat-x;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
color:#344A04;
background-color:inherit;
text-decoration:none;
}
#header ul li a:hover{
background:url(../images/header/nav_hover.gif) 0 0 repeat-x;
color:#fff;
background-color:inherit;
}
#header ul li a.hover{
display:block;
background:url(../images/header/nav_hover.gif) 0 0 repeat-x;
color:#fff;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
background-color:inherit;
text-decoration:none;
cursor:text;
}
#header ul li.last{
background-image:none;
height:27px;
float:left;
}

#header img.logo{
position:absolute;
left:40px;
top:30px;
width:auto;
height:auto;
}

/*------------------------------------------------header--------------------*/

/* footer */

HTML 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>testing website</title>
	<meta http-equiv="Content-Language" content="" />
	<meta http-equiv="Content-Type" content="text/html; CHARSET=UTF-8" />
	<link rel="stylesheet" href="<?php echo($sitepath); ?>css/screen.css" media="screen" />
	<link rel="stylesheet" href="<?php echo($sitepath); ?>css/menu.css" media="screen" />
	<link rel="shortcut icon" href="<?php echo($sitepath); ?>images/favicon.ico" type="image/ico" />
</head>
<body>
<div id="header">
  <ul>
    <li><a href="<?php echo($sitepath); ?>" class="hover">Home</a></li>
    <li><a href="?action=nothing"></a></li>
    <li><a href="?action=nothing"></a></li>
    <li><a href="?action=nothing"></a></li>
    <li><a href="?action=nothing"></a></li>
    <li><a href="?action=nothing"></a></li>
    <li><a href="?action=nothing"></a></li>
    <li><a href="?action=nothing"></a></li>
    <li class="last"><a href="?action=nothing"></a></li>
  </ul>
  <a href="<?php $sitepath ?>"><img src="images/header/logo.gif" alt="" width="249" height="72" border="0" class="logo" /></a>
	      <div id="ads-top-blue">
				<?php if($ads_top) { ?>
						<?php ads_top(); ?>
				<?php } ?>
  </div>
    </div> 
	<div id="main">
		<div class="left" id="content_outer">
			<div class="content">
Hello
  </div>
    </div>
      </div>
</body>
</html>

I hope an expert can help me

Thank you very much

Axeia · May 24, 2009

Well for one you're closing more divs then you opened, you opened up the header div and then closed two divs.

Don't forget that http://validator.w3.org/ is your best friend for debugging, and only 2 clicks aways with something like the Firefox web developer toolbar . (or just one with a simple link to it)

avraamG13 · May 24, 2009

This document was successfully checked as XHTML 1.0 Transitional!

-----------------------------------------------------------------------

to be honest i dident know about the website.. thank you .. ive fixed everything and its the same.. i must forget something...

Sign In

help - header and content near each other.. (not space between them)

Recommended Posts

avraamG13

Link to comment

Share on other sites

Axeia

Link to comment

Share on other sites

avraamG13

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information