Images within header

[Enigmatic]

I'm having difficulty figuring out how to properly display two graphics within my header. I have a header that spans the full width of the screen. Within the header is an image that is 300 x 40 pixels in size. I set the size of the header to be 40 pixels high to match the height of the image.

However, on either side of the law firm's name, I would like a picture of the two lawyers. These pictures are size 90 x 110 pixels. But when I insert the pictures next to the graphic that has the law firm's name, the header grows to be 110 pixels in height. I would like the header to remain 40 pixels high, while the pictures of the lawyers overlap the header. I'm still a beginner with building sites with CSS, so I'm sorry if this is a rudimentary question.

Here is my CSS coding thus far for the header.

#Header {
margin:30px 0px 10px 0px;
padding:0px 0px 0px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:42px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:#DDDDDF;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:40px;
background-color:#222222;

Any help on how to properly insert the pictures would be greatly appreciated,

Enigmatic

[DrDoc]

Have you tried the overflow property?
[w3.org...]
overflow:visible;

[Enigmatic]

I added the overflow: visible; property to the header within my CSS document, but this doesn't seem to work. I'm confused, am I suppose to be adding something to the main document as well? My new code looks like this:

#Header {
margin:30px 0px 10px 0px;
padding:0px 0px 0px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:42px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:#DDDDDF;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:40px;
background-color:#222222;
overflow: visible;}

When I read the W3C's definition, it made it sound like if I added the overflow property within the header, then anything (the pictures) that was larger than the content box (the header) would automatically display outside of the header element. At least in IE 4.0 and NN 6.0 and above. Is this correct? So what am I missing? Thanks,

Enigmatic

[mipapage]

Is the height of the images set somewhere, like in the <img /> tag or your css?

Perhaps (big maybe) it's not rendering correctly because of this?

[Enigmatic]

Yes, the height is defined within the main document in the <img /> tag.

[ArrTu]

Why not set header, and the 'bookend' images to a position:absolute and then use the z-index to allow an overlap?

[Enigmatic]

I looked into the z-index property as ArrTu suggested. I tested it out first with just one of my images. Here is what my code looks like thus far for my first image:

<img class="imgborder" src="untitled86.gif" width="90" height="110" STYLE="position:absolute;
top:10px; left:100px; z-index:2" />

I then proceeded to give my header a z-index of 1, so that the picture would overlap the header. However, I'm still running into some problems. I want the image to stay positioned relative to the header as the web site is minimized or maximized, however when the positioning is set to absolute, the image stays in the same position while the header keeps moving. Thus I tried setting the position to relative in order to accomplish the effect I wanted, but as before, my header began expanding from its original height of 40 pixels to the height of the image which is 110 pixels. Basically, when the positioning is set to either relative or static, it's like the image has to fit inside of the header instead of simply overlapping it. Does anyone have any idea what I'm doing wrong? Thanks,

Enigmatic

[SuzyUK]

I want the image to stay positioned relative to the header as the web site is minimized or maximized,

You need to have a relatively (or absolutely) positioned div to contain ~ act as the containing block for ~ all your absolutely positioned images. See the definition of containing block [w3.org]

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static'

In this case relative is the tool for the job I reckon ;)

Example:
If you make a relatively positioned container div inside your header div and give it an explicit width of say 500px then center it as required. Then center the 300px wide <img> inside it as normal... you then have "gap" of 100px on either side of the logo. the two photos can then be absolutely positioned top:0; left: 0; and top: 0; right: 0; and will sit on top of the gaps. but they will still move along with their relatively positioned containing block as the screen gets narrower because they are contained by it.

I've created what I think is the scenario similar to you're after.. although I've used divs instead of images and used round numbers to exaggerate the gaps, but that's just a slight change to the maths depending on where you would actually like them to sit. You can put class names onto the images and just position them the same way, or put them inside a div structure similar to this if that's easier. The relevant bits are commented.

<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#header {
position: absolute;
top: 40px;
left: 0;
width: 100%;
background:#222;
text-align: center; /* IE5+ to center pic container*/
height: 40px;
}

#piccontainer {
margin: 0 auto; /* compliant center */
background: #eee;
width: 500px; /* wide enough to contain all images */
position: relative; /* the key - to make it a containing block for absolutely positioned descendants */
}

/****** divs below this are pseudo images *******/
.pic {
width: 90px;
height: 110px;
background: #fcc;
position: absolute;
top: -35px; /* this can be 0, positive or negative to move photos up/down */
}

.one {left: 0;} /* the the left side again it doesn't have to be 0 */
.two {right: 0;} /* to the right side it also doesn't have to zero */

.mainlogo {
height: 40px;
width: 300px;
margin: 0 auto; /* to center the main image */
background: #fcf;
}

</style>
</head>
<body>
<div id="header">
<div id="piccontainer">
<div class="mainlogo">this is main image</div>
<div class="pic one">photo one</div>
<div class="pic two">photo two</div>
</div>
</div>

You're not doing anything wrong btw.. it just takes a minute to grasp the part that

position: relative;

plays in this CSS-P game ;)

Suzy

[Enigmatic]

Thanks SuzyUK! Your explanation was tremendous and your help is most appreciated. I couldn't have done it without you. Thanks again,

Enigmatic

[Enigmatic]

Sorry to restart a closed session, but I just realized I still have a problem. My header looks perfect in IE 6.0, but in Netscape 7.1, Opera 7.2 and FireFox 0.8, the header is much further down on the page than I wanted. I tried messing around with a few variables to see where my error lies, but I haven't had any luck. Can anyone tell me what in the following code is incorrect that isn't allowing Netscape, Opera or FireFox to correctly display the header? Thanks,

Enigmatic

body {
margin:0px;
padding:0px;
font-family:arial, verdana, helvetica, sans-serif;
font-weight: normal;
color:#E7E7E7;
background:url(Brown-Texture.jpg);
}
#Header {
margin:45px 0px 10px 0px;
padding:0px 0px 0px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:42px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:#E7E7E7;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:40px;
background:url(Textured-Background.jpg);
z-index:1;
position: absolute;
left: 0;
width: 100%;
text-align: center; /* IE5+ to center pic container*/

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See [glish.com...] for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:40px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:40px;}

#piccontainer {
margin: 0 auto; /* compliant center */
background:url(Textured-Background.jpg);
width: 580px; /* wide enough to contain all images */
position: relative; /* the key - to make it a containing block for absolutely positioned descendants */
}
.pic {
width: 90px;
height: 110px;
background: #333333;
border: 1px solid black;
position: absolute;
top: -35px; /* this can be 0, positive or negative to move photos up/down */
}
.one {left: 0;} /* the the left side again it doesn't have to be 0 */
.two {right: 0;} /* to the right side it also doesn't have to zero */

.mainlogo {
height: 40px;
width: 400px;
margin: 0 auto; /* to center the main image */
background: #E7E7E7;
}

[SuzyUK]

I'm not sure but I think it could be the mixing of margins and absolute positioning co-ordinates in the #header css..

you have :
margin: 45px 0px 10px 0px;
position: absolute;
left: 0;

try:
margin: 0px 0px 10px 0px;
position: absolute;
left: 0;
top: 45px;

Suzy