Simple Design Question for Anyone- Using Margin Images

[Sean Thompson]

I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.

I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.

If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).

Check out the attachment to see what I mean.
Sean

[Webzarus]

Honestly, there's a dozen ways to do what you're asking, but I have to ask .

Why 940px ?

What's your max-width gonna be ? I currently run 1 monitor at 1920px, which means I'll have about 500 px border with absolutely no content in it on each side of the 940.

I have a 47" TV hooked to a laptop, but the display is capable of 2680 px wide.. Meaning this content will be a little strip of content in the middle of display.

So, why 940px ?

[Sean Thompson]

The width of the content doesn't matter, 940, 960, 1000, whatever- I'm just making it for average viewers using normal screen sizes.

What I don't know how to do is use images in my margins(the outer "space" on each side of the main content) to give the appearance of a "full width header/nav/footer". And the key thing here is that I want to use images that don't flex/resize with screen width- as browser size increases, more of the image appears to take up the space. I don't know how to do this but I see it everywhere.

[mlseim]

Show us where you see it ... give us a link.
We can then show you what they did to achieve it.

[Sean Thompson]

I guess I cannot find an example but I know this is used.

Look at these 2 attachment drawings I made and you will see what I mean.

The header image in the margins is what I'm focusing on. On the larger browser, more of it is visible. On the smaller browser, less of it is visible. The main header image obviously stays centered but in the margins we have these "add-ons" that make the header image full width. I'm pretty sure this is not the same as "margin: auto".

[mlseim]

For me, I would need to see where it is used. I can't think of how it would be done.

[Webzarus]

Depending on the background you're going to use for the header, you could:

1. Create a header div at 100% , 0 margin, 0 padding, center the image in the header as a background, hide the overflow...

2. Create a second div for the header the overlays the header div but is the same width as your body content div... Center the background image using hidden overflow ...

As the browser resizes... The divs will fill with the background, and depending on the background image...

I personally don't do fixed with content and fluid headers... There just too many variables, and unless you just running either solid color backgrounds or Gradients... Usually a lot of tweaking to the image needed to get it right.

I opt for a fluid container and just adjust everything based on % to adjust to the thousands of screen sizes.

5-8 years ago, 960 was considered a standard width... ( if you google 960 grid ), but with the advent of 16:9 resolution monitors, using a 960 width as your basis for design ... You might as well use tables for your layout.

[Sean Thompson]

I will try this- I'm pretty sure the "background header" image is going to resize with the browser though? (as in bend/skew itself-this isn't what I want)

But how do you make one header div "overlay" another one?
Thanks for all the replies
SEan

[Webzarus]

I will try this- I'm pretty sure the "background header" image is going to resize with the browser though? (as in bend/skew itself-this isn't what I want)

But how do you make one header div "overlay" another one?
Thanks for all the replies
SEan

How big is your background image ?

I just did a fixed background for a site 2400px wide... Max width on design was 2400px

page content was set to 90% and header background was an image 2200px wide centered overflow hidden ...

The center of the header background is displayed when the browser opens... If the user increases the width of the page... ( tested on my 47" TV ), the header background keeps just getting larger and larger... Staying centered. Until it hits its max-width.

You could create a "class" for the header that sits inside the header div... Probably be easiest and least amount of code. Just remember to either use a reset or make sure to define your margins and padding for everything.

Again, it all depends on the images your using for this.

The one I did was of a sillhouette of a sailboat ... On a small screen... You see the center of the boat... As your screen gets wider... You see the entire ship, the ocean... And the sunset in the background ( if your browser screen is wide enough ).

Doubtful, many users will ever see the sunset... With some creative editing, I was able to make the header background image less than 30k

[Andrew Yurlov]

So what you want is a header that goes from 1 side all the way to the other with an image that is not altered in scale with different browser sizes? And you also want the content to always stay centered at 960px?

As for the header in a header to align it.. I'm using that now. I have one div named header which is just a visual aspect that has width an 100%. Then I just nest another div inside the header named header_align. Then I just center the header_align div and make the background transparent thus all your content in your header is centered.

I'm still not sure this is what you mean but I hope this helped.

EDIT: I would also suggest you use at least 990px for your content width because that used to be the standard for older monitors. I haven't seen a 960px monitor in forever...