niche Posted September 15, 2010 Share Posted September 15, 2010 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? Link to comment Share on other sites More sharing options...
ShadowMage Posted September 15, 2010 Share Posted September 15, 2010 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. Link to comment Share on other sites More sharing options...
niche Posted September 15, 2010 Author Share Posted September 15, 2010 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 More sharing options...
dsonesuk Posted September 15, 2010 Share Posted September 15, 2010 why not use a outer container, with margin: 0pt auto; width: 890px; and just zero the left margin on the div that pushed it away from the left edge. Link to comment Share on other sites More sharing options...
niche Posted September 15, 2010 Author Share Posted September 15, 2010 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 More sharing options...
dsonesuk Posted September 15, 2010 Share Posted September 15, 2010 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 More sharing options...
dsonesuk Posted September 15, 2010 Share Posted September 15, 2010 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 More sharing options...
niche Posted September 15, 2010 Author Share Posted September 15, 2010 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 More sharing options...
dsonesuk Posted September 15, 2010 Share Posted September 15, 2010 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 More sharing options...
niche Posted September 16, 2010 Author Share Posted September 16, 2010 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 More sharing options...
dsonesuk Posted September 16, 2010 Share Posted September 16, 2010 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. Link to comment Share on other sites More sharing options...
niche Posted September 16, 2010 Author Share Posted September 16, 2010 I wasn't thinking id when I typed style. Thanks for pointing that out.Niche Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.