Web Site Background color

Question

I have created a website with DWT's and I want all of the site pages to be a white background. The templates are set up for auto margins to keep them centered on the screen. I want to have different background colors for the areas outside of the page when using different templates.

When I changed the background color it changes the page also. How do I work around this.

---

DET

Answer 1

C'mon, Doc, you've been here before. You know that we can't answer display/appearance questions without a link to the page(s) in question. Give us a link so that we can see the markup for the specific elements, and the CSS that is currently applied to them. Thanks.

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 2

Put a style block in the head section after the link to the external stylesheet and change the background color in it not the stylesheet. That's the cascade part of cascading stylesheets. Make sure you have an editable region in the head section to put that style block in.

---

Free Expression Web Tutorials
For an Expression Web forum with without the posting issues try expressionwebforum.com

Answer 3

Cheryl, if all DocTaylor wants is the "page" to always have a white background - by which I assume is meant the centered container that has all the web contents - then that can be set to a white background in the main CSS file.  It's the area around that that (body background) that varies per DWT - at least that's how I read the post.

(DocTaylor: this is why a link to your page is requested - then we wouldn't be guessing what you meant to say.)

Answer 4

Sorry about that link. Fingers to fast.

Here you go..

www.psmtest.org

---

DET

Answer 5

You're going to have a hard time controlling the page background color since you have used postioning, containers separated by spaces (where the body background color will show through), and floats without clears in the right places which results in all sorts of containers that don't expand to hold their contents.  Putting a background color on the containers will only fill as much as they think they contain.  You have nothing that contains your header, footer, right and left columns, and center, which is what I assume you want to be on a white background.  Even your "#container" doesn't contain what you might think it does.  You need to clear floats after the floated contents inside the container.  Even the page body doesn't think it contains everything in the page.

Use IE or Firefox's developer tools and look at where the container outlines show up when you select them.

Once you've got that straightened out, give the white background color to the container that actually contains your entire page contents, and the body the color you want around the sides.

Answer 6

Kathy, the solution is still the same whatever element he wants to have a different background color the over ride needs to go on the individual page.

In the external stylesheet whatever he wants the default to be for the body or ID or whatever.

body {background-color: red;}

#container {background-color: white;}

In page:

<style type="text/css">
body {background-color: blue;}
</style>

If he want the container to have a different color the he'd use

#container {background-color: yellow;}

Instead of the body element. That's why I didn't specify a particular element just to use the cascade in Cascading Style Sheets to over ride on any particular page what is assigned in the external stylesheet.

---

Free Expression Web Tutorials
For an Expression Web forum with without the posting issues try expressionwebforum.com

Answer 7

FWIW, it appears that all of that absolute positioning is actually generated by AllWebMenu, as well as TONS of markup and tables.

That said, you're right about the mishmash of containership relationships making it difficult to determine exactly what is the background to what. For example, according to View Source Chart (confirmed by referring to the View Generated Source markup), the "#container" div is only a wrapper for "left_col," which is only a wrapper for div "awmAnchor-POS1," which actually contains everything from there down to, and including, the footer div. (In the source code, the three </div></div></div> closing tags just before </body> are closing #awmAnchor-POS1, #left_col, and #container, respectively.)

In other words, the containership hierarchy for the actual content of the page (everything below the "Sanderson Field..." menu, div "facnav") begins with the AllWebMenu generated sidebar menu, and everything else is wrapped by it. The #container div contains nothing but #left_col, which in turn contains nothing but #awmAnchor-POS1, which contains everything else. Most importantly, as noted, there is NO comprehensive wrapper, container, whatever, within the body element to apply styling to. Therefore, while it is possible to locally change the <body> background color using page-local (embedded) CSS, it is not possible to target anything which will achieve the OP's objective.

The page, in short, is a bloody mess that needs to be restructured before any attempt is made to apply background colors to its elements. Oh, and for such a pedestrian menu, I would also ditch that godawful AllWebMenu-generated garbage. There are any number of pure CSS menus which would produce the same result, with a LOT less markup, no layout tables, and no absolute positioning if they're indeed single-level menus, as it appears.

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 8

Cheryl,

He said he's using different DWTs (not that the example linked to has a DWT with a colored background, unless white) with the different body backgrounds.  That would already be taken care of in the DWTs' CSS files.  It was changing the center page contents to a white background that was the question (not having it be the template background color), and if there is a CSS file shared for all the pages and a common container for the page content, it could take of that with no individual page styling.  Even if each DWT had its own CSS sheet with no additional shared CSS sheet for all the pages, there is no on-page styling required to set a background color for the page container used with that DWT.

(As it turns out, from the link, there is no element he can background color that contains the entire page contents, so that's not an option until that's cleaned up.)

Answer 9

Interesting, he has marked an answer, even though it is absolutely impossible to add anything to an embedded style block that will style that page the way he wants it, given the page's current structure. There exists no container which can be targeted to produce the effect he describes.

<<shrug>>

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 10

Also interesting that he doesn't NEED to put it in the page, as I already explained, if he is using a DWT with a container for the page.  All he needs is to put the white background in the CSS file for that element - once he fixes the template to actually *have* a container he can add the background color to.

Sigh. 

Answer 11

The OP should just throw up a WordPress site and go home early.

Answer 12

Sorry for any confusion on my part.. I incorporated an number of your statements into getting this problem fixed. Including expanding the "Container"  as suggested and working with the "style" as suggested. I appreciate your help.

---

DET

Answer 13

I took a look at your published page.  You now have:

<link href="aa_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
.auto-style1 {
	text-align: right;
}
</style>
body {
	background-color:#729FC6;}

</head>

Wrong syntax, and that's why the styles aren't applied and are showing up in the page itself as text. (You must learn the basic syntax for HTML before designing a site.) If you've already fixed that in your local copy, that's great.   But *always* preview in local browsers before publishing. Errors like this show up.

Answer 14

Heh, heh... yeah, I noticed that auto-style appearing at the top of the page now. Furthermore, I checked the current source code again, and contrary to his assertion that he's "fixed" the page, he still does not have any encompassing container to which he can apply styling to accomplish his stated objective. And, down there below div "facnav," he still has that really goofy containership stack I described above, with everything from there down to and including the footer being actually contained by that left sidebar menu div "awmAnchor-POS1."

Since he hasn't corrected those clear, and accurately described, issues with his markup, one might get the impression that he doesn't know enough about HTML and CSS to make the necessary corrections, even when they're spelled out explicitly. Just sayin'...

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.