CSS - 3 Image Header In Css. Some Help Please?

Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work.

Here is the main.css (only css file being used)

Code:

body {
     color: #ffffff;
     background-color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin:auto;
     text-align:center;
     margin:0 auto;
     }

a {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

p {
     margin: 0px 0px 7px 0px;
     }

sup {
     display: inline;
     padding: 0px;
     vertical-align: super;
     font-size: 8px;
     }

a:hover {
     color: #ffb4b4;
     }

legend {
     display: none;
}


label {
     display: none;
}

fieldset {
     border: none;
     padding: 4px 0px 4px 5px;
    }

fieldset p {
     display: block;
     margin: 5px 5px 5px 2px;
     }

form {
     margin: 0px 0px 5px 0px;
     }

img {
     border: none;
     }

li {
     padding-bottom: 5px;
     }

/* +------------------------------------------------------------+ */
/* | General XHTML Classes                                      | */
/* +------------------------------------------------------------+ */

.center {
     text-align: center;
     }

.inlinecenter {
     text-align: center;
     }

p.inline {
     display: inline;
     padding: 0px;
     }

.strong {
     font-weight: bold;
     }

.big {
     font-weight: bold;
     font-size: 16px;
     }

.hidden {
     display: none;
     }

a.unfancy {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

/* +------------------------------------------------------------+ */
/* | Skin Specific Divs                                         | */
/* +------------------------------------------------------------+ */


#skin_header {
     height: 230px;
     width: 899px;
     margin:auto;
     padding: 0px;
     background-position: center top;
}
     
#skin_wrapper {
     width: 910px;
     padding: 0px;
     margin:auto;
     }

#skin_wrapper_full {
     width: 100%px;
     padding: 0px;
     margin:auto;
     background-image: url('../media/header.png')
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_ct {
     width: 100%;
     padding: 0px;
     margin: auto;
     border-spacing: 0px;
     border-collapse: collapse;
     }

#skin_ct_lcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     width: 160px;
     height: 80px;
     }

#skin_ct_rcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     height: 80px;
     text-align: right;
     }

#skin_ct_lcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     text-align: left;
     }

#skin_ct_mcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     line-height: 150%;
     }

#skin_ct_rcol {
     padding: 2px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     }

#skin_footer {
     color: #FFFFFF;
     background-color: #000000;
     padding: 50px 10px 10px 10px;
     margin: 0px;
     text-align: center;
     background-image: url('../media/footer.png');
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_pgtitle {
     font-size: 16px;
     padding: 0px 0px 4px 0px;
     margin: 0px 0px 10px 0px;
     font-weight: bold;
     border-bottom: 1px solid #999999;
     }

#skin_content {
     margin: auto;
     }

There is more coding but the actual image header is located inside of the #skin_header.

Also, here is the PHP code where the SRC code is located:

Code:

</head>

<body>


<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>

<div id="skin_wrapper_full"><div id="skin_wrapper">




<table id="skin_ct">

<tr>


<td id="skin_ct_rcol_head" colspan="3">

<div id="skin_menu_head">

<ul>

<?php 
if (!(empty($link_home)))     {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart)))     {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account)))  {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact)))  {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>

</ul>

Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net

thank you!

Hey,

Im pulling my hair out...basically iv developed a site testing it in safari and when i have come to test it in FF the background image i am displaying in my header div doesn't display in FF but displays fine in Safari, unable to check IE atm.

Iv broken down my code down and put together a simple test html script and css script and still no joy. Below is the script can anyone see where i am going wrong...hope so.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background Image Test</title>
<link rel="stylesheet" type="text/css" href="millar.css" />
</head>
<body>
	<div id="container">
		container
		<div id="header">
			header
		</div>
		<div id="main">
			main
		</div>
		<div id="footer">
			footer
		</div>
	</div>
</body>
</html>

Code:

body {
	background-color: #F0F0F0;
	font-family: verdana;
	font-size: 10px;
	color: #333333;
}
#container
{
	background-color: red;
	margin: 0 auto;
	
}

#header
{
	background-color: yellow;
	height: 100px;
	background-image: url('topbanner.jpg');
}

#main
{
	background-color: blue;
}

#footer
{
	background-color: green;
}

cheers
tom

I'm trying to get something that looks like this:



Here is the xhtml:

Code:

<div id="container">
                <div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
</div>

Here is the relevant css:

Code:

.design_box {
	display: block;
	margin-bottom: 17px;
}

#row_a_right_web_design img {
	float: left;
}

.design_box h1 {
	color: #fbfbfb;
	font: bold .9em Tahoma, arial, sans;
	margin-bottom: 4px;
}

.design_box p {
	color: #c4c2c2;
}

Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this.

Thanks in advance.

Hi,

Av been having a lot of problems with my drop down working in IE since I added the flash fade to the images.

Can anyone point me to the code that is responsible for keeping the drop down menu at the top of the header image.. How can I change it to make it at the bottom?

Thanks


This is in the header section
Code:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
        
        <!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<style type="text/css">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression( 
(document.documentElement.clientWidth > 1152)? "1150px" : 
(document.documentElement.clientWidth < 702) ? "700px" : 
    "auto");}	  
</style>
<![endif]-->
        
<?php wp_head(); ?>

I.E css

Code:

#header-image {
	float: left;
	width: 100%;
	height: 383px;
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #FFFFFF;
	margin-bottom: 20px;
}

Main stylesheet

Code:

#nav li {
    position:relative; /* establish stacking context for the AP'd dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
}
#nav li a {
	float:left;
	padding:0 .5em;
	border-right: 1px solid #333;
	color: #CCCCCC;
	text-decoration: none;
}
#nav li a.first {border:none;}

#nav li:hover, 
#nav li.sfhover{ 
    background:black;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, 
#nav li.sfhover a {color:#FFF}/*1st level font color on hover*/

/*=== All Sublist Styles ===*/
#nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
}
#nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
	border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a, 
#nav li.sfhover li a  {color:#000;} /*2nd level font color*/

#nav li li:hover a, 
#nav li li.sfhover a  {color:#FFF;} /*2nd level font color on hover*/

/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul { 
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}

label.screen-reader-text {
display: none;
}
.avatar {
display:none;
}

thanks

I am trying to get my header image to stretch 100% width in the browsers. Right now it's centered--and too short.

My CSS code:


body {
font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva;
background-color: #1c1c1c;
background-repeat:repeat-x;
border-color: #FC3;
border-width: 1px;
padding: 25px;
margin: 30px;
color: #FFC;
}


#header {
height: 200px;
width: 100%;
margin: 0;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-right: 0px;
margin-left: 0px;
border: thin solid #FFF;
border-style:none;
}


#header {
height: 200px;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}


#p {
padding-left:inherit;
padding:inherit;
}






A:link {color:#FFF; text-decoration:underline; }
A:visited {color:#CCC; text-decoration:underline; }
A:hover {color:#FFC; text-decoration:underline; }
#nav {
height: 35px;
}




I've tried:
width: 100%;

and

width: 100%;
width: auto;



There is nothing useful online that has really touched on this problem. The only solutions are the "width 100%"

Any help would be so great please.

I just can't do it!!!! I need help on this..

My header.. I can't get rid of the spaces around the image..

hmm check this out.. I can't post a link direct but its on the world wide web at
piedmontred (dot) com

firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either..

I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out..

Thanks for any help!!
Todd

I wish to include a header image on each page of my site. Is it typically better to include the image in the CSS or HTML? For example, see OPTION 1 and OPTION 2.

Thank you

OPTION 1

Code:

#header {
    margin: 0;
    padding: 0;
    height: 165px;
    background: url(headers/tapmeister_header.jpg) no-repeat scroll left top;
}

Code:

<div id="header">
<h1 class="header_title">Welcome to Tapmeister</h1>
<p class="tagline">Better Beer!</p>
</div>

OPTION 2

Code:

<div id="header">
<img src="images/headers/tapmeister_header.jpg" style="margin: 0; width: 165px" />
<h1 class="header_title">Welcome to Tapmeister</h1>
<p class="tagline">Better Beer!</p>
</div>

I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends.

http://www.guestwardho.com/campground_map.html


If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends.


Thank you in advance for your assistance.

Hey all,

I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer.

I would like it to look something like this.

I'm using this code for the background image, for the Header:

body
{
background-image: url(stars.gif);
background-repeat: repeat-x
}

And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page?

Here is the code that I'm assuming would have to be used:

{
background-image: url(stars.gif);
background-repeat: repeat-x;
background-position: bottom;
}

Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code?

Thanks.

I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image.

I can do the following and it works:

Code:

.icon {vertical-align: middle;}

<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here

However, if I wrap H1 tags around "Header Goes Here" the text drops below the image.

Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable.

Is there any way to make it so the H1

I want to display text, image, videolinks in the header and footer images in my html with css.While header and footer images are displayed in the html , the intended text,image,videolinks are not displayed within the image block of header, footer.Will you please advise me the correct code in css, html to embed the text,image,videolinks inside the header and footer images.
thanks

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

Why is the second header on his site is located at the bottom of the page, I can't seem to figure it out. Can anyone take a look at the page and maybe point me in the right direction? The url is <NO LONGER AVAILABLE> I know that is has to have something to do with #clearheader1 or #clearheader2 calls. Maybe where they are placed or something.

How do i stop the <h1> add white space above and below anything in the header tag.

Hello, my name is Jordan, and I run breatheheavy (can't post the URL)

I have a new header designed that's 1665x515px. I am having a little trouble putting it on the website because of the current restrictions placed in Wordpress on the header.php and style.css files. When I uploaded the header and changed the settings in Wordpress, it didn't look correct on all browsers or the iPad. I was hoping to get some help from someone that could help me with this and make it compatible with all browsers / mobile version.

You can see the site on an ipad simulator site (also can't post the link)

Thanks for reading

Sending good vibes your way,

Jordan