I'm going to, for right now, eliminate that 2nd background so I can get this site up and running, and then work on that enhancement once the site is up.

I changed the CSS file to remove that 2nd background but the horizontal bar is still there. The commented out items are what I removed, and added a height: 100%; to the #wrapper. I also changed the content to a specific width as well.

#wrapper {
/* width: 85%; */
width: 100%;
height: 100%;
/* min-width: 1000px; */
/* background-image:url('../images/bckgrnd_inner.png'); */
margin: auto;
}

#content {
/* width: 85%; */
height: 100%;
/* min-width: 958px; */
width: 959px;
margin: auto;
color: white;
border: 5px solid pink;

I put the large pink border around the content to see where it goes, and for some reason it does not go to the bottom of the page. I can specify a specific px height instead of height: 100%; ... is that a better option to do? I don't want it to appear wrong with some varying window heights on others' computers.

I've put the updated version at http://www.somaluxury.net/dev3


Thank you.

Hi,

I don't know what tools you are using when previewing a site under development, but I would strongly recommend that you install Firefox and then an addon called web developer toolbar. With that installed, you can preview in various screen resolutions. There is also a button 'Outline' and if you click it and choose outline block level elements, you will see that your divs for most of the content go far beyond the width of it's container. That is why you have the horizontal scrollbar.

The site you were referring to has a fixed width content container (that large image) and a flexible background. (I haven't checked if there are two backgrounds on top of each other, but that doesn't count. If there are two, then the 'inner' one also has a fixed width). If you are going that way, there is no need to tinker with Photoshop, other than perhaps resize your main image so that it gets a bit wider (about 1000px or so). But it's not so important if you leave it as is, you just have to set the width of the content container to the same.

I'll get back to the solution for the vertical scrollbar and what I said about reusing code. I'm just so very busy right now...

I had promised to get back to you, and I had some time this morning and played around with your site. You can see the result here: www.eikweb.com/test .

I reused as much as possible of your code, but I got rid of the massive width that caused sideways scrolling. The superfluous height had been dealt with earlier.

What caused too much width and height was your use of positioning like 'top: -1110' and 'left: 300'. They are not the same as margin-top and margin-left, which are much better to use. I have changed your positioning accordingly in most cases.

I made some other changes too, in order to simplify the code. Instead of a new div for each and every product, line and button, I created a '.textbox' holding the header, the product description, button and line in it with 'generic' divs that can be reused for each product.

The head section has had the height increased a bit so that the letter y doesn't partly disappear behind the navigation.

Also the Follow_us image was changed into a div with the image as the background for easier positioning of the small icons. You could think of doing the same with the 'bath' image.

You said you didn't know what z-index is. Take a look at the code for the image bottom left where I have used it. It is for placing an element on top of something else. Also that image has been put into the footer but moved up so that it doesn't affect the other contents of the footer.

Good luck with your site!

Thank you very much, Inger!



I was able to fix the width issue by inserting a width: <x>px; element to each div statement in the CSS file today. That seems like way too messy of code but at least I was able to make that work. Your suggestion of the Firefox utility to see the DIV sections was extremely helpful.



I am going to study the use of margin-top and margin-left as well as float to understand how this works. It looks much cleaner that way. These 3 commands have been confusing to me but I am sure your example will help.



I will do just that.



I will play with and study your version on this to learn this better. Again, I thank you very much for your kind helpfulness.

You're welcome! I see you have already got something sorted.