color of background

how can i change the color of the background around my page but not change the color surrounding my items and sideboxes? I want my site to stay the same but when someone has a higher screen resolution and there is space on the left and right of my page I want to add a color to that space...

http://www.airtightsecurityplus.com/security_equipment

stylesheet
http://www.airtightsecurityplus.com/...tylesheet1.css

thanks

body {
width: 1000px;
margin: 0;
font-family: arial,verdana, helvetica, sans-serif;
font-weight: normal;
font-size: 75%;
background-color: #ffffff;
}

my stylesheet is already set to that, I am trying to add a color to the outside of the webpage that is visible with a higher screen resolution but does not color the background of the page itself.

You have done some strange editing that makes it impossible to control the page in the normal way.
You need to delete the
width: 1000px;
from the body {} rule so that the body can expand to fill larger monitors. Until you do that, no background-color will show.

You have somehow terminated the #mainWrapper div that is supposed to enclose your entire page after the header, and then enclosed the rest of the page in a series of five nested <font> tags. Delete those font tags and the </div> that prematurely closes your mainWrapper; then your #mainWrapper width setting of 960px will apply to the whole page.

How did you get those font tags there, anyway? And why?```html

slater555:

my stylesheet is already set to that, I am trying to add a color to the outside of the webpage that is visible with a higher screen resolution but does not color the background of the page itself.

I know it's already set to that. It's currently white, which is what ffffff is. I highlighted it in red to show you what to change.

I will work on those font tags, but if i change the #ffffff to a color then it fills in all the spaces between my products and around my boxes, I only want to add color to the space around my page. and my page looks all screwed up at higher screen resolutions if I make it to fit the page for higher screen resolutions.

What is showing white is the HTML container of the entire window - the body is only 1000px wide and hidden by the contents, no matter the window width.

slater555, you are trying to make a lot of changes to your site without enough knowledge, and breaking a lot of things in the process, causing yourself and us a lot of wasted time. You need to go study CSS more before continuing your work. https://www.w3schools.com is a good place to start, or there are thousands of sites that will help you understand various aspects of CSS and HTML.
Read my post 4 in detail to see some of the things to fix. When the mainWrapper properly encloses the page, a background-color for it will take care of all of the contents.

slater555:

I will work on those font tags, but if i change the #ffffff to a color then it fills in all the spaces between my products and around my boxes, I only want to add color to the space around my page. and my page looks all screwed up at higher screen resolutions if I make it to fit the page for higher screen resolutions.

Read Glenn's post. He explained why that is happening. The middle part is handled by #mainWrapper. The part outside of that is handled by body.

One thing that may clear up a lot of your problems is to delete all of the <font> tags you have added. There are at least two dozen between header and footer, all built incorrectly, and all completely unnecessary. You should not use <font> tags at all, as there are better, more modern ways of setting font characteristics.

You can see an example of how it should work by looking at my site:

http://www.rescoccc.com

It is very similar in structure and layout to yours. In fact, yours looks like it started as the same template family - the Pure series from 12leaves.

actually mine is a bask_black
those font tags i added as part of the ez-pages mod ( i do need to give value to the text) and to the dropdown menu mod (i also need to give those values)

can i eliminate them and somehow give them values in the stylesheet.css as they do need some kind of color tag due to the almost dark background and size to control them???

I think you can control the colors in your stylesheet by editing this section:

#nav_bar_content{
float: left;
list-style-type: none;
height: 46px;
line-height: 4em;
}
#nav_bar_content li{
float: left;
height: 46px;
line-height: 4em;
vertical-align: middle;
}
#nav_bar_content li:hover, #item_active {

}

will i need to add color tags to

#nav_bar_content li{
float: left;
height: 46px;
line-height: 4em;
vertical-align: middle;
}

to control the colors i want, and what about the   I am using for spacing

and your header is sort of very similar to mine, i will check that out

You might be able to control the color by changing this:

#nav_bar_content li:hover, #item_active {
}

To something like this:

#nav_bar_content ul li a {
color: #xxxxxx;
}
#item_active {
}

Change the x's to the color of your choice.

And you still need to remove width: 1000px; from your body section as Glenn suggested.

if i remove that my page get weird in larger screen resolution i could change it to say 75em would that work?

also I am having to load each page into stylesheet to get them centered. I understand if you just want to give up on me. I certainly do not want to ruin anyones day

slater555:

if i remove that my page get weird in larger screen resolution i could change it to say 75em would that work?

There shouldn't be a width designation in the body at all. That's controlled in mainWrapper. When you say gets weird in larger screen resolution, specifically what do you mean?

Re-reading Glenn's post I see that he notes this:

Delete those font tags and the </div> that prematurely closes your mainWrapper; then your #mainWrapper width setting of 960px will apply to the whole page.

The prematurely closed mainWrapper is likely what's causing the problem when you remove the width designation from the body. The problem is that I'm not knowledgeable enough to figure out which </div> it is that needs to be removed.

well if the screen resolution is 1280 x 720 or higher then my site gets all spread out but my logo doesn't change size there just gets to be a lot of blank space between my logo and the login section.
and my center column banners don't fill the center column cause they stay the same size but the left and right columns spread out to the end of the screen which is a problem if the viewer had a large screen. what size is your screen, if it is 17 inches or bigger and you set your screen resolution to 1280 x 720 i can take the 1000px off long enough for you to see and then i will change it back while i try to figure it out. If you want to see first hand what i mean.

sorry but i been using html since the internet was brand new back in the 80's and basic language before that, I got a bit of a grip on php and css but i seem to write stuff that conflicts with other stuff. let me know if you want me to change it so you can see. also if it is easier you can call me at 800-369-4779 or 240-671-4342