How can I stop the image "spilling over" the edge?

[kelvyn]

I want to make an image 1280wide*100
In the middle 800 will be the actual logo, I want the edges to continue WITHIN the viewport bounded by the edge of the "main" centre bit, but instead, it "pushes over" the top.
( body { margin: 2%; ] } )
I can't make a 3 section thing with two "repeating" sections either side, because the logo doesn't work like that. Am I making sense? Probably not!
To put it another way, I want to main or header wrapper to sit "on top" of the logo, so that when the screen is narrower than the logo, the logo doesn't "break" the layout.

Anyway, I've been looking here, with no luck.

[gjh42]

If I understand correctly:
You want a header/logo that will fit any window from 800 to 1280px wide seamlessly, with the middle 800 being the actual logo.

Try a background-image at 1280x100 with the center 800 blank to minimize file size,
in
#headerWrapper {
background-image: url(...);
background-position: top center;
}

Then make your logo at 800x100.

That should allow the header width to float as the background will not push on its boundaries but will be anchored to the center.

[Sermonzone]

Interested to know if Glenn's solution works. Seems counter-intuituve to me. Often wrong on that though.

The background image of 1280x100 will center on an 800x600 screen size so that there is an 'extra' 240 px on each side? What does that do to the scroll bar?

If it works though, yippee.

[gjh42]

Bruce -

I tested this on a standalone HTML page, and it does work as the reference said it would.

The background image doesn't affect the size of the fluid width header, and anchors in the center. When the window is sized down to less than the logo width, a scrollbar appears.

There is a behavioral oddity which may be due to the pure CSS vs the single table in template_default: when sized down to where the logo won't all fit, the logo keeps its left margin and goes off the right edge of the window and over the edge of the header, while the header keeps fluidly shrinking to keep to 98% of the window as I specified. Scrolling to the right reveals the logo tight to the right edge of the window and the header with a big margin. So the logo and header/background decouple at that point. My guess is that won't happen in a ZC environment.

[Sermonzone]

Glenn,

Thanks for the feedback. I will say more as I experiment with this new info.

Kelvyn - did your problem get fixed with this?

[gjh42]

On further testing, there is a potential fix for the decoupling issue. It is reportedly not supported by IE yet, but works in FF.

Add the property min-width: xxxpx; to the header CSS, and it won't shrink below that. Make xxx big enough to contain the logo + margins, and all will be well (in FF anyway....;)

[gjh42]

Update: min-width does work in IE6 as well as FF. The w3schools reference (copy printed two months ago) seems to be out of date (the most recent versions it mentions are IE4, FF1 and Netscape 6.)