header

[davy_yg]

style.css

#container {
	background: url(images/header.png) top repeat-x;  color: black;
	padding: 0 0 31px 0;
}

#header {
	width: 961px; margin: 0 auto; position: relative;
	overflow: hidden;
}

header.php

<div id="container">
	<div id="header">
	<ul id="nav">
   		<li><?php wp_list_pages('sort_column=menu_order&title_li='); ?></li>
	</ul>
    
	<ul id="topcorner">
		<li><a href="#">Career</a> | <a href="#">Mail</a></li>
	</ul>
    
   <div id="search"><?php include('search.php'); ?></div>
	<div id="banner">
	<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner.png" />
	<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/bannerside.png" />
    </div>
    
</div>

I would like a header in the middle with black color header background on it's left and right.

#container {
background: url(images/header.png) top repeat-x; color: black;
padding: 0 0 31px 0;
}

If I delete the top repeat-x; then the header will fill the whole website. I would like just a header with black color header background on it's left and right.

How to do so?

[Macko888]

#container {
background: url(images/header.png); //replace this
background:#000000 url("images/header.png"); //with this
repeat:no-repeat;
padding: 0 0 31px 0;
}

[davy_yg]

With that code, the header filled the whole screen.

Well, almost there.

header.php

<div id="container">
<div id="header">


<ul id="nav">
<li><?php wp_list_pages('sort_column=menu_order&title_li='); ?></li>
</ul>
<div id="search"><?php include('search.php'); ?></div>   
<ul id="topcorner">
<li><a href="#">Career</a> | <a href="#">Mail</a></li>
</ul>
    
  
</div>
</div>

style.css

#container {
	background: #000000 url(images/header.png) top no-repeat;  
	padding: 0 0 31px 0;
}

#header {
	width: 961px; margin: 0 auto; position: relative;
	overflow: hidden;
}

#header h1 a:hover {
	background-position: bottom;
}

#header ul#nav {
float: left; margin: 110px 0 0 24px; background: url(images/navbar.png) top; padding: 2px 0 2px 0; width: 920px;
}
#header ul#nav li {
float: left; padding: 5px; margin: 0 15px 0 15px; color: #000000; 
}
			
#header ul#nav li:first-child {
margin: 0;
}
#header ul#nav li a {
display: block; font: 12px Arial, Serif; color: black;
text-decoration: none;
}
#header ul#nav li a:hover {
color: grey;
}
	
#header #search {
margin: -22px 0 0 700px;		
}
#header ul#topcorner {
float: right; margin: -110px 50px 0 0;	
font: 12px Arial, Helvetica, sans-serif; color: white; 
}				
	
#header ul#topcorner a:link{
font: 12px Arial, Helvetica, sans-serif; color: white;
text-decoration: none;
}

The black background now including some space under the navigation but above the banner.

[drjohn]

This would be so much easier if you pointed us at the web page, then we could see what you mean and use web developer toolbar to edit things locally. Otherwise, we have to recreate PART of your page on our own machines, and it could be something else that is causing your problems.

[teedoff]

This would be so much easier if you pointed us at the web page, then we could see what you mean and use web developer toolbar to edit things locally. Otherwise, we have to recreate PART of your page on our own machines, and it could be something else that is causing your problems.

I suggested this to hime like 20 posts ago..lol As well as learning some of these basics that he's struggling with.

Forums are here to help, not build entire sites for ppl.