Width of display
- 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.
Alle Antworten
- 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- Als Antwort vorgeschlagenVeignMVPMittwoch, 1. Juli 2009 16:03
- 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. - Thanks, Chris. I'll give it a shot.
- 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.
- 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?
- Not sure I understand why the background image would extend the width of the screen if I have it inside the container????
- 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 - 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.
