Sign in
Microsoft.com
 
Expression > Forums Home > Expression Studio Forums > Expression Web and SuperPreview > Width of display
Ask a questionAsk a question
Search Forums:
 

Proposed AnswerWidth of display

  • Wednesday, July 01, 2009 3:42 PMpctek Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    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.
     

All Replies

  • Wednesday, July 01, 2009 4:03 PMVeignMVPUsers MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Proposed AnswerHas Code
    Sign In to Vote
    0
    Sign In to Vote
    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
    • Proposed As Answer byVeignMVPWednesday, July 01, 2009 4:03 PM
    •  
     
  • Wednesday, July 01, 2009 4:09 PMKathyW2 Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    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.
     
  • Wednesday, July 01, 2009 5:36 PMpctek Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    Thanks, Chris.  I'll give it a shot.
     
  • Wednesday, July 01, 2009 5:37 PMpctek Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    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.
     
  • Thursday, July 02, 2009 12:51 AMpctek Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    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?
     
  • Thursday, July 02, 2009 12:52 AMpctek Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    Not sure I understand why the background image would extend the width of the screen if I have it inside the container????
     
  • Thursday, July 02, 2009 12:55 AMVeignMVPUsers MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    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
     
  • Thursday, July 02, 2009 1:05 AMKathyW2 Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    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.