CSS - How Do I Overlap Header Images - Wp Stylesheet.css

I'm new to CSS .. got the basics, but having a problem using 3 images in a header for a site .....

[---img_1 ------img_2 -----img_3----]

I want img_2 to allways be centered. in the page, and img_1 and img_3 on the sides... so far I have that working .. now the problem .... I want img_1 & img_3 to scale depending on size of browser ... so that the header fills 100% of the width .....

html
<div id="siteHead" align="center">
<div id="leftbar"></div>
<div id="midbar"></div>
<div id="rightbar"></div>
</div>

css
#siteHead {
width:100%;
}

#leftbar {
float:left;
width:100%;
height:248px;
background-image: url(imgs/1_01.jpg);
background-repeat: repeat-x;
text-align:right;
}

#midbar {
float:left;
width:778px;
height:248px;
background-image: url(imgs/1_02.jpg);
background-repeat: no-repeat;
text-align:center;
}

#rightbar {
float:left;
width:100%;
height:248px;
background-image: url(imgs/1_03.jpg);
background-repeat: repeat-x;
text-align:right;
}


so what am I missing ... or whats my n00b mistake ... I hope I made sense ... english is poor

playing with width %'s if browser is so small the 3 images stack on each other .. I would like to prevent that from happening ... but one n00b issuse at a time....

I'm trying to get two images in my header/logo section. One is a logo with the site title etc, which I want to sit in the direct center of the header section, the other is a repeating gradient which I want to repeat across the page.

I'm struggling to get the first image to sit on top of the second.

I'm using a PHP script from A List Apart to generate a random image for my header whenever it is called. While the script is great, my image sizes need drastic reduction. These header images are composed of two parts -

1)The title text
2)A background photograph.

I can increase the compression of the background photograph to get it down from 120kb to about 20kb with little notice in quality - a great improvement! However, when I do this, the text suffers a great loss of quality.

Since I can save the text as a .gif which would only register about 6kb, I was wondering if there was a way I could combine the script to get the random photograph and have the text lay on top.

Ive tried putting both img codes in the same div and giving the text a higher z-index, but that does not work.

I know that the best-case scenario would be to just use actual styled text in the div to go on top of the photograph. But I can't get the stroked look I'd want by doing this.

Any suggestions?

I have a layout in which I use a <div> called #image on all pages in the site. I know this question is silly, but I have no idea how to do this:

#image
{
margin-left: 0px;
margin-right: 178px;
margin-top:0px;
padding:0px 0px 175px 0px;
border-bottom:1px solid #003366;
background-color:#f5f5f5;
background-image:url(binary_liquid_2.jpg);
background-position:top left;
background-repeat:no-repeat;
}

as you can see in this div, the background image for the home page is binary_liquid_2.jpg

If I wanted to maintain the same page structure, but use a differnet image in that div on each page, how do I code that?

I was thinking that #image would simply provide the "box" dimensions and then I would have seperate classes for each page like .image_help .image_contact. These classes would then place a new picture in that #image div depending on the page I was viewing. IS that correct? And, wodl the HTML markup be:

<div id="image" class="image_contact">

</div>

is that close?

please help!

thanks a million

jpm226@bellsouth.net

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

All,
I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated.

Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me

I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help.

What I'm trying to do

All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify.
NOTES
The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px.

I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse.

Here is a print screen of the header:

[IMG]URL[/IMG]

Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message.

The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now.

CSS Code
Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that.

Code:

	#myHeader {width:auto;height:133px;
		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

 		#myLogo {
				 float:left;
				 width:10%;
				 height:150px	;
				 margin-left:2.22%;
				 display:inline;
				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
			   

		#myConame {
				
				width: 15.33%;
				height:90px;
				margin-left:auto;
				margin-right:auto;
				background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
		
		
		#myBanner {
				float:right;
				width: 29.73%;
				height:150px;
				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

The HTML Code

Code:

<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
  <ul>
        <li><a href="http://shuttermaster.co">Home</a></li>
        <li><a href="#">Portfolio</a></li>
		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
			<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>	
				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
				<li><a href="Link">Drop 2</a></li>
				<li><a href="Link">Drop 3</a></li>
        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
   </li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Guestbook</a></li>
  </ul>
</div> 
</div>
<div style="clear: both;"></div>

I hope I have been clear enough. Hoping someone can point me the right direction.

Regards, and thanks....

Hi

I have this page http://www.networkhealthgroup.co.uk/new/jobs.htm

I have put borders around the columns, when viewed in IE you will see that the main content div overlaps the right column.

You will also see that the right border is looks alot more than 140px wide in IE than it does in Firefox!!!

Does anyone know what I am doing wrong here?

I need this menu to be halfway on the content section, however it keeps getting pushed around. I can't figure out what to change for positioning to move it over! Help

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="layout.css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>


<div id="wrapper">

<div id="main">
<p>Insert Content Here</p>
<p>Insert Content Here</p>
<p>Insert Content Here</p>
<p>Insert Content Here</p>
<p>Insert Content Here</p>
<p>Insert Content Here</p>
<p>Insert Content Here</p>
<p>Insert Content Here</p>

<div id="nav">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>
<!--Close #nav-->
</div>
<!--Close #main-->
<!--Close #wrapper-->
</body>
</html>

CSS:
Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color:#000;
	font-family: arial, helvetica, sans-serif;
	margin: 1em;
}

#wrapper {
}

#main {
	background-color:#FFF;
	width:80%;
}
<!--margin: 0em auto;-->
#nav {
	float:left;
	margin-left:-7em;
	margin-top:0;
}

#nav ul {
	list-style-type:none;
}

#nav a {
	display: block;
	color: green;
	background-color: navy;
	width: 5em;
	padding: .2em .5em;
	text-decoration: none;
	font-size: 1.25em;
}

#nav a:hover {
	background-color: blue;
	color: dark green;
}

How do I get it to overlap and to get the text/images to wrap around the nav menu?

Greets,

I'm having trouble with the menu not being properly shown in IE. The list is supposed to pass over the central DIV, and... the bugger seems to want to stay in the background for some reason.

I set that div's z-index well above the others, set the visibility to visible... I'm stumped.

teh linkification

Hello! I have a flash header and I'm wondering how to make an img (jpg/png) overlap a flash header? It seems that the flash keeps covering my img when i use positionsomething)

Thanks!

Hey guys,

It might be easiest if you see the example first:

http://www.venusadvertising.com.au/ourwork.php

See how the red tab overlaps the Flash element in Webkit browsers and under it in IE? I need the page to scroll rather than for the elements to overlap.

CSS doc is he http://www.venusadvertising.com.au/_assets/css_venus.css

Thanks for your help!
Ham

Hello all - I will be so grateful if someone can help me. I'm not sure why, but my right column is overlapping my footer.

I have been working too long and my brain is dead! I cannot figure it out for the life of me. Can someone please tell me what I did wrong?

I am trying to have the header, 3 columns, left-fixed, right-fixed, center fluid. I want the footer to span all 3 along the bottom, which it is doing. But the right column is overlapping.


Code:

#header {background: #ffffff; height: 120px; margin: 0; padding: 0}
#content {margin: 0}

#wrap {min-width:770px;margin: auto;position:relative}
#main #content-wrap {position:relative;width:100%}
#main #content {margin: 0 235px auto 175px}

#content-wrap {position:relative;width:100%}
#leftnav {position:absolute;top:0;left:0px;width:150px} 
#sidebar {position:absolute;top:0;right:5px;width:200px;} 
#footer {positon:relative; background-image: url(../imag
/bottom.jpg); background-repeat: repeat-x;} 

With the structure as such:

Code:

<body id="main">
<div id="wrap">
   
<div id="header">
</div>
   
<div id="content-wrap">

<div id="leftnav">
</div>

<div id="content">
</div>
   
<div id="sidebar">
</div>

<div id="footer">
</div>

</div>
</div>
</body>

Hello,

I have 3 Divs as follow:

<div id="Container">
<div id="Header">header</div>
<div id="Text">text</div>
</div>

I need the following:
1. Both "Header" and "Text" div's top left corner to be align at top left of "Container" div
2. "Text" div should be over "Header" div hiding it.

How can I do this?

Thanks,
Miguel

Thanks for taking the time to read my question.

I have a horizontal UL for a nav bar. It works great, and positions well in IE, but in FF the ContentBox moves too far up, and overlaps with my nav bar. I can't figure out why. I added an extra div and placed the nav bar in that, but that didn't help either.

What am I doing wrong.

Also, I have my widths set to 100% IE has no horizontal scroll bar at the bottom, but FF does. Not sure what is going on here either.

thanks again for your help.

Brad


HTML:
Code:

body {
background-color: #48494D;
padding: 0px;
margin: 0px;
}

#Head1 {
background-color: #000000;
width: 100%;
height: 100px;
padding-left: 20px;
}

#Head2 {
background-color: #ffffff;
width: 100%;
height: 45px;
border-bottom: solid #CCCC99 2px;
padding-left: 130px;
}

#MainNav {
width: 100%;
height: 20px;
background-color: transparent;
}

#navcontainer ul
{
padding-left: 25px;
margin-left: 0;
background-color: transparent;
color: #CCCC99;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
/*padding: 0.2em 1em 0em 0em;*/
background-color: transparent;
color: #CCCC99;
text-decoration: none;
text-align: center;
float: left;
border-right: 1px solid #CCCC99;
width: 134px;
font-size:12px;
border-bottom: 4px solid #48494D;
}

#navcontainer ul li a:hover
{
border-bottom: 4px solid #CCCC99;
text-align: center;
}

#navcontainer ul li.LastOne a {
    border: 0 none;
}

#navcontainer ul li.LastOne a:hover{
border-bottom: 4px solid #CCCC99;
}

#ContentBox {
width: 800px;
height: 400px;
margin: 0px auto;
background-color: aqua;	  
display: block:
}

#CBHeader1 {
background-image:url(SecondHeaderImg.jpg);
height: 50px;
width: 800px;
}

CSS:
Code:

body {
background-color: #48494D;
padding: 0px;
margin: 0px;
}

#Head1 {
background-color: #000000;
width: 100%;
height: 100px;
padding-left: 20px;
}

#Head2 {
background-color: #ffffff;
width: 100%;
height: 45px;
border-bottom: solid #CCCC99 2px;
padding-left: 130px;
}

#MainNav {
width: 100%;
height: 20px;
background-color: transparent;
}

#navcontainer ul
{
padding-left: 25px;
margin-left: 0;
background-color: transparent;
color: #CCCC99;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
/*padding: 0.2em 1em 0em 0em;*/
background-color: transparent;
color: #CCCC99;
text-decoration: none;
text-align: center;
float: left;
border-right: 1px solid #CCCC99;
width: 134px;
font-size:12px;
border-bottom: 4px solid #48494D;
}

#navcontainer ul li a:hover
{
border-bottom: 4px solid #CCCC99;
text-align: center;
}

#navcontainer ul li.LastOne a {
    border: 0 none;
}

#navcontainer ul li.LastOne a:hover{
border-bottom: 4px solid #CCCC99;
}

#ContentBox {
width: 800px;
height: 400px;
margin: 0px auto;
background-color: aqua;	  
display: block:
}

#CBHeader1 {
background-image:url(SecondHeaderImg.jpg);
height: 50px;
width: 800px;
}