Width of display

Wed, 01 Jul 2009 15:42:09 Z

I recently did my first conversion of a web template to a DWT. Seems to have worked fine (with possibly some bloat I'll remove) except for one problem. The page heading and menu display across the entire screen instead of just the chosen width of the container. I have tried unsuccessfully to resize it. Seems I'm in the middle of the forest and not seeing the trees?? Could someone spot something I'm overlooking? The site is: http://www.taylor-computers.com/test/
Thanks in advance for your help.

Width of display

Wed, 01 Jul 2009 16:03:25 Z

In your CSS stylesheet change this:

#header {
	width: 778px;
	margin: 0px;
	padding: 1em;
	height: 90px;
	color: #254360;
	clear: none;
	text-align: center;
}

To This:

#header {
	width: 778px;
	margin: 0px auto;
	padding: 1em;
	height: 90px;
	color: #254360;
	clear: none;
	text-align: center;
}

Adding the Margin of Auto causes the container (with a width) to center.

What I would do is give your width and centering on the Container and not the individual blocks within the container. Let the individual blocks (like the header) be full width to the container its within. This will allow you to change the overall width by changing a single value (width on the Container).

--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help

Get a Complete Website Analysis by Veign

Width of display

Wed, 01 Jul 2009 16:09:50 Z

You are missing the styling that will center the page heading: set the left and right margin to auto.

The menu is already centered. (Notice the "margin: 0px auto;" in its styling.)

The stripes "across the whole screen" is just the background image you have for the body.

Width of display

Wed, 01 Jul 2009 17:36:09 Z

Thanks, Chris. I'll give it a shot.

Width of display

Wed, 01 Jul 2009 17:37:18 Z

Thank you, Kathy. I'll make the changes you suggested along with Chris'. Should be able to make this work now, thanks to both of you.

Width of display

Thu, 02 Jul 2009 00:51:39 Z

I made this change, and the header still extends across the entire screen, not just the width of the container. Where else would I have make a change?

Width of display

Thu, 02 Jul 2009 00:52:35 Z

Not sure I understand why the background image would extend the width of the screen if I have it inside the container????

Width of display

Thu, 02 Jul 2009 00:55:33 Z

You didn't make the change I mentioned. The CSS is the exact same. The image spans the width of the page because you have it applied to the BODY tag.

--
Chris Hanscom - Microsoft MVP
Resource Center | Veign's Blog | Web Development Help

Get a Complete Website Analysis by Veign

Width of display

Thu, 02 Jul 2009 01:05:50 Z

If you made changes, you didn't publish them. The page you linked to above hasn't changed.

The stripe that extends across the page is your page background image. It won't change unless you no longer apply that to the body. The header itself still doesn't have the left and right auto margins needed to center it.