Jump to content

Centering page on a wide screen


niche
 Share

Recommended Posts

I need to display a vertical filler box in the left and right margin of this script: http://www.lincolnsrealdeals.com/temp1.html so the page is centered on regular screens (without the filler boxes displayed) and so the page is centered on wide screens (with the filler boxes displayed).I can image how to do this using positioning. How do I insert the fillers using float in the http://www.lincolnsrealdeals.com/temp1.html script?

Edited by niche
Link to comment
Share on other sites

Depends on what these "filler boxes" are. You could just set a repeating background on the body and have a content div with margin: 0px auto; set on it. Then if the screen size is less than or equal to the content width, the "fillers" wouldn't be visible.EDIT: If you have images, though, it might be a little more complicated.

Edited by ShadowMage
Link to comment
Share on other sites

I went with this background image: http://www.lincolnsrealdeals.com/temp1.html. Obviously, I need something for the divs to push against.Suppose I had an image called vertstrip.jpg how would I insert it into just my left margin space so my divs could push against it AND how do I get vertstrip.jpg to reduce in width as someone adjusts their screen to a smaller size (keeping my content centered)?Script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><script type="text/javascript" src="bop2.js"></script><style type="text/css">body{font-family:arial;}a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}a.three:visited {color:blue;}a.three:hover {color:red;}span:hover {color:red;}select {color:blue;}div.one {color:blue;font-size:175%;min-width:275px;float:left;overflow:visible;}div.oneb {color:blue;font-size:175%;min-width:175px;float:left;overflow:visible;}div.one4 {color:blue;font-size:175%;min-width:375px;float:left;overflow:visible;}.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}.links2 {margin: 18px 0 0 -12px;}div.one2 {visibility:hidden;min-width:200px;}  div.one3 {visibility:hidden;min-width:200px;position:absolute;left:317px;top:32px;}  body {background-image:url('vertstrip2.jpg');background-position:center;background-repeat: repeat-y;background-attachment:scroll;}</style></head><body><div style="clear:both;margin-bottom:20px;"></div><div onmouseover="showmenu('all')" onmouseout="hidemenu('all')"><div style="margin-left:200px;"><div class="one"><span>View All Bops</span></div><div class="one2" id="all"> <div class="oneb links"><a class="three" href="newest1st.php">Newest First</a></div><div class="oneb links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div><div class="oneb links colr"><a class="three" href="newest1st.php">Most Money Off</a></div></div> </div></div></body></html>

Link to comment
Share on other sites

I know its not right, but am I thinking about this right?: http://www.lincolnsrealdeals.com/temp1.html How should the outer class read? I'm not understanding your recommendation as well as I need to.

Link to comment
Share on other sites

use exactly what had before with background image in the bodywith

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><script type="text/javascript" src="bop2.js"></script><style type="text/css">body{font-family:arial;}a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}a.three:visited {color:blue;}a.three:hover {color:red;}span:hover {color:red;}select {color:blue;}div.one {color:blue;font-size:175%;min-width:275px;float:left;overflow:visible;}div.oneb {color:blue;font-size:175%;min-width:175px;float:left;overflow:visible;}div.one4 {color:blue;font-size:175%;min-width:375px;float:left;overflow:visible;}.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}.links2 {margin: 18px 0 0 -12px;}div.one2 {visibility:hidden;min-width:200px;}  div.one3 {visibility:hidden;min-width:200px;position:absolute;left:317px;top:32px;}  body {background-image:url('vertstrip2.jpg');background-position:center;background-repeat: repeat-y;background-attachment:scroll;}</style></head><body><div style="width:890px; margin: 0 auto;"> <!-- start --><div style="clear:both;margin-bottom:20px;"></div><div onmouseover="showmenu('all')" onmouseout="hidemenu('all')"><!-- <div style="margin-left:200px;"> replace with below --><div style="margin-left:0;"> <!-- replacement --><div class="one"><span>View All Bops</span></div><div class="one2" id="all"> <div class="oneb links"><a class="three" href="newest1st.php">Newest First</a></div><div class="oneb links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div><div class="oneb links colr"><a class="three" href="newest1st.php">Most Money Off</a></div></div> </div></div></div><!-- end --></body></html>

Link to comment
Share on other sites

or if using this plain image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><script type="text/javascript" src="bop2.js"></script><style type="text/css">body{font-family:arial;}a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}a.three:visited {color:blue;}a.three:hover {color:red;}span:hover {color:red;}select {color:blue;}div.one {color:blue;font-size:175%;min-width:275px;float:left;overflow:visible;}div.oneb {color:blue;font-size:175%;min-width:175px;float:left;overflow:visible;}div.one4 {color:blue;font-size:175%;min-width:375px;float:left;overflow:visible;}.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}.links2 {margin: 18px 0 0 -12px;}div.one2 {visibility:hidden;min-width:200px;}  div.one3 {visibility:hidden;min-width:200px;position:absolute;left:317px;top:32px;} #wrapper{background: url(http://www.lincolnsrealdeals.com/vertblue.jpg); overflow:hidden;} #outer{margin:0pt auto;width: 890px;background-color:#FFFFFF;overflow:hidden;min-height:400px; /*optional*/}</style></head><body><div id="wrapper"><div id="outer"><div style="clear:both;margin-bottom:20px;"></div><div onmouseover="showmenu('all')" onmouseout="hidemenu('all')"><div style="margin-left:0px;"><div class="one"><span>View All Bops</span></div><div class="one2" id="all"> <div class="oneb links"><a class="three" href="newest1st.php">Newest First</a></div><div class="oneb links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div><div class="oneb links colr"><a class="three" href="newest1st.php">Most Money Off</a></div></div> </div></div></div></div></body></html>

Link to comment
Share on other sites

Great work! Thank-you.I have several questions. I don't understand this line from your first script: <div style="width:890px; margin: 0 auto;">. I don't understand why reducing the width moves the div to the right? also, why does changing to margin: 100 auto; moves the div to the left? Both movements are the opposite I expected. What am I missing? And, what's the reason for <div style="margin-left:0;">? changing the values don't seem to have an effect and deleting it doesn't produce a change.

Link to comment
Share on other sites

with your first background image, the middle white area was 910px wide, setting the width of the container to 890px, gave a 10px distance from the edge of the white background, once you use margin: 0 auto to center the containing outer div.the div with margin-left: 200px; set the text 200px from the left edge, now that we were using a centred div container, we no longer needed it to be set away from the edge of the outer container by 200px, so i set it to 0.margin: 0 auto; 0 = top and bottom, auto means add maximum margin left right of equal width to centre element.your original code had some missing closing tags, and this might be why you are getting strange results, the reason the div moved right might be related to the div with margin-left:200px;

Link to comment
Share on other sites

Again thanks for the explaination on margin: 0 auto;. Understanding the use of that property allowed me to understand. Also thanks to ShadowMage. You got me started and dsonesuk got me finished.Niche

Link to comment
Share on other sites

below was your main problemis it class, is it a id, is there a style outer, NO! its super....naa, just incorrect!outer{margin:0pt auto;width: 890px;}</style></head><body><div style="outer">I think I've mention before about validation, if i remember rightly.

Edited by dsonesuk
Link to comment
Share on other sites

I wasn't thinking id when I typed style. Thanks for pointing that out.Niche

Edited by niche
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...