I think you also asked about the empty space below the page contents, how to get rid of it. What you could do is cut off a chunk from the background stripe, where the gradient has ended and there is only one colour, and then give the body the same colour as the background colour.

Sorry, I must not be explaining it correctly.
I like the stripes on both sides, but they should only go out about 1/2 of the distance between the foreground and the edges of the browser. ... those on the example image at http://www.somaluxury.net/dev/images/example_02.jpg on the left side are perfect, but on the right side extend too far.

The actual page also extends too far down below the footer and too far to the right (there is a horizontal scroll bar at the bottom of the page that I cannot get to remove) here at http://www.somaluxury.net/dev/index.htm
You'll see a couple differences than the example image and the example image is what I am trying to accomplish.

(Inger, I did try the narrow image you suggested and the page still extended far too the right of the browser and far down below the footer. These problems may all be interelated?

Thank you.

Hmmm, I'll look into it...

I wonder if the files I have attached could be a start for you. Never mind the weird borders, they are just there to show the different divs that are on top of each other and can be deleted.

You will have one problem with the main image. It has a fixed width, but that can't be given to the content div, because if you do, it will pop out to the right on small screens. You could try the stretch code thart I posted earlier, but the image might then become out of proportions.

Another thing, to make less code, you could define one kind of 'textbox' with a class for heading and another one for text and reuse it for all the different products. Just a hint.

Your css menu_menu file is an HTML file, not a css file.

Mike

Yeah, I saw that too but forgot to mention it...

But Mike, do you have a better solution for Jayjay's main image than what I posted above, with the strech code?

These were very helpful, thank you. This fixed the height issue I was having.
And, per Mike's suggestion, I removed the menu_menu.css file as it was unnecessary.

Fixed site along with borders is at http://www.somaluxury.net/dev2



Yes, that does make the image proportions unsightly. I've tried a bunch of different widths but cannot figure out how in the heck does one do this? Is this due to having, in effect, 2 backgrounds (the inner and the outer)?



I do have various entries in the .css file like this:

.text1 {
font-size: 1.3em;
font-weight: bold;
}

Is that what you mean, or is it something different?

Regarding the main image:

You said you wanted to have the background cover the whole width.
Then you wanted to have the bit of the background with the blue lines in it stretching so that the entire background on either side of the main content would be 50-50 with and without the blue lines. In order to achieve that, also the content container needs to grow or shrink according to the screen size. That is where the problem with the image lies. On a large screen it will not cover the width of the container, on a small screen it will be too wide and stick out to the right, thus messing up the design.

If you would accept a flexible background width just for the blue background without those lines, and a fixed width for the one with, then the content container also could be set at a fixed width (= that of the image). In such a scenario a horizontal scrollbar would appear if the screen is too small, but the design would not be ruined.

I'll get back to your other question, being in the middle of a different commitment right now...

Once more to your image:

There is one way you could get the image to cover the whole width of the content container, and it takes some editing in Photoshop or similar. We used to do this 15 or so years ago when I started out with web design.

You have to cut the image in two, preferrably where it kind of whites out. Then the right part has to be made as wide as the whole image by adding pixels to the left side of it, also whitish. The left bit also has to have some faded out bit on the right side.
You let the right part of the image float right and the left part float left, and the left part also has to have a z-index set higher than the right part. The two parts will kind of slide in and out.

I'm sure you understand the principle, and you should be able to write the markup for it. If not, I'll have a go some time tomorrow. It's 02.30 in the morning where I am, and my mind is kind of 'blurred'.

I will give this a try, although the z-index portion totally loses me. FWIW, I did fine a site that appears to be doing what I'd like to do, although their code is way, way above my pay-grade... http://www.spamontage.com/lagunabeach/

I'll play with this for the next couple days and see if I can figure it out. Thank you!