AbbyShotDev Posted May 30, 2011 Share Posted May 30, 2011 I was wondering if someone could take a quick look at my css and code for the page www.abbyshot.com/index.php trying to get this page centered with the margin-left 10% and margin-rigth 10% but this doesn't seem to do it right.. I need to make this site look better with different resolutions... any quick tips? here is a quick look at the css: html, body { margin:0; padding:0; width:100%; height:100%; text-align:left; } #background{ position:fixed; z-index:1; width:100%; background-attachment:fixed; background-position:center; height:100%; overflow:inherit; } #scroller { position:absolute; width:100%; height:100%; top:0; left:0; margin-left:11%; margin-right:10%; overflow:visible; z-index:1; width:50em; text-align:left; } #content { /* padding:5px 300px 20px 200px; */ } #fixed { position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px; } #header { width:990px; /*padding-left:20px;*/ } #header table { padding-left:15px; background-image:url("furniture/topBlack.jpg"); width:100%; } #header table td { padding:3px; } #headerNav { float:right; text-align:right; width:716px; margin-right:40px; margin-top:16px; border:1px solid white; } #headerSearchForm { width:260px; height:40px; float:right; } #header form { background-image:url("furniture/bg_searchBox.gif"); height:40px; width:260px; } #header form select { margin-top:7px; margin-right:10px; width:230px; /* margin-right:58px; */ } #header form input { margin-top:7px; margin-right:58px; } #mainContent { width:990px; height:275px; /*background-image:url(furniture/mainbg_homePicture.jpg);*/ background-image:url(furniture/homepics/Squall_model.jpg); /*padding-left:20px;*/ padding-top:20px; overflow:hidden; } #mainContentMenu { width:138px; height:165px; line-height:0; } #mainContentMenu2 { width:138px; height:139px; line-height:100%; visibility:hidden; } #mainContentTestSlider { width:990px; height:275px; /*background-image:url(furniture/mainbg_homePicture.jpg);*/ /*padding-left:20px;*/ padding-top:20px; overflow:hidden; } #mainContentMenuTestSlider { width:138px; height:165px; line-height:0; } #middleRow { background-image: url(furniture/bg_silver.jpg); width:980px; height:174px; padding-left:10px; padding-top:10px; } Thanks for any help, Bennie Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/ Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 just another note: its been hard to get this page to do what I want. the scroller CSS property seems to really want to add scrollers to the bottom and rgith, but it gives prboelsm with IE, so its setup how it is too look ok.. but I think this scroller is messsing ity up from allowing me to center. Or maybe I should center somehow in the PHP or the parent CSS im not sure.. Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222330 Share on other sites More sharing options...
cssfreakie Posted May 30, 2011 Share Posted May 30, 2011 as far as i can see, your page is centered. So that seems the problem is solved. just checked in ie789 and firefox 4. to center a block. give it a width and use margin:0 auto; on it. although i must say, your mark-up is pretty over complicated. In other words this could be done much easier. First of all, don't use tables for layout purposes, it's chaotic and redundant. Second, if you would just take a div as wrapper (as a container around all your content and a width of for instance 960px; than use margin:0 auto on it you #wrapper{width:960px; margin:0 auto;} in html ... <body> <div id="wrapper"> your content inside here. </div> </body> ... Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222341 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 Ok, I am going to try and wrapping my whole page in a new div = wrapper.. I will test this and get back to you .. I just need to re-butt your one comment though, the page is not centered.. If you go to 1400x900 res it is off to the left, and if you bring it down to 1074x 798 then it is off to the right.. it doesn't automatically center Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222357 Share on other sites More sharing options...
cssfreakie Posted May 30, 2011 Share Posted May 30, 2011 .. I just need to re-butt your one comment though, the page is not centered.. If you go to 1400x900 res it is off to the left, and if you bring it down to 1074x 798 then it is off to the right.. it doesn't automatically center That's because your not yet using margin:0 auto; but 10 percent. Note though, you might need to adjust quite some stuff, since you have loads of positionings other than static not to mention quite some extra margin around various elements. SO i recommend you test out the margin: 0 auto (+ a width) in a sterile environment to see how it works. after that adjust your page. And if i were you, skip the tables, and learn to use floats, and clears. Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222367 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 OK thanks for the advice.. I am not trying to use tables really.. but my php does post out a few tables, maybe your talking about the tables I have throughout my page? <div align="center"> <table width="200" border="0" cellpadding="0" cellspacing="0"> I dont think this should have much effect on my oversite CSS design? I have heading wrappers.. And I have used liquid layouts before.. using div's.. and im not too up on float though... Im sure this is another part of div's ... I have been fooling around with the properties of my style sheet alot. And i think you are right.. there are alot of overridding properties that are taking away contorl from my page.. I put in margin: 0 auto; under my scroller property and everything went to the left! hahah I will update u with more.. I am experienminign and it keeps going to the left if I dont use marigin-left margin-right... of course my style sheet is at www.abbyshot.com/style.css and this is the php code that calls it: <body bgcolor="#000000"> <div> <img id="background" src="images/background3.jpg" alt="" title="" /> </div> <div id="scroller"> <div id="content"> <? require ("include/header_display_home.php"); ?> <div id="mainContent"> <div id="mainContentMenu"> <? require ("include/side_nav.php"); ?> </div> </div> <div id="middleRow"> <table style="margin-left:8px"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222376 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 more info on my page too: we use 2 style sheets.. one for ALL THE OTHER PAGES.. thats at http://www.abbyshot.com/styles_inside.css this is for all pages other then index.. I have played around with the formatiggn of this CSS and it is proving to be tasking LOL Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222384 Share on other sites More sharing options...
cssfreakie Posted May 30, 2011 Share Posted May 30, 2011 as said, try this out in a sterile environment and not on a redundant page. (not to insult, but this could have been done much smoother, right now you have loads of properties that overwrite each other) not using floats is your choice, i just don't see why someone would not use them. Can you give 1 valid reason ? Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222387 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 Nope I can't.. just that Im not too familiar on how to position my FLoating boxes? I am not use to floating.. So I should be making everything float? Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222390 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 I will try and mess around with this in a new project website.. But the project (abbyshot) i am coming into, has this site made by a programmer from 3 years ago.. and they want to me to edit the code, not create much thats new... again thanks for anyhelp anyone Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222393 Share on other sites More sharing options...
cssfreakie Posted May 30, 2011 Share Posted May 30, 2011 Nope I can't.. just that Im not too familiar on how to position my FLoating boxes? I am not use to floating.. So I should be making everything float? here is a great tutorial: http://css.maxdesign.com.au/floatutorial/ even if you won't use it on this project if your earning your money with this kind of stuff. you need to know this. For now, wrapping it all in a div with a fixed width and set margin to it as stated above. you propapy have tp remove some margin properties you have now. (like the 10% ones) Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222398 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 note: the page was originally setup to be align to the left.. I edited the CSS pages and made it jump out from the left and also fixed the background image... But to make it truly center I will learn (from your posts) and experiment some more, then get back to you.. thanks Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222414 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 When I put #wrapper{width:960px; margin:0 auto;} in the CSS and then put a DIV id=wrapper in front of: </head> <body bgcolor="#000000"> <div> <img id="background" src="images/background3.jpg" alt="" title="" /> </div> <div id="scroller"> <div id="content"> <? require ("include/header_display_home.php"); ?> <div id="mainContent"> <div id="mainContentMenu"> right here: body> </div> <div =wraspper> all it did was turned off my background on the left and messed up the page a bit lol this page is a mess, i wish it would just center.. wehn i remove the marin-lefts it goes rigth back to the left side too Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222442 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 when I put in: That's because your not yet using margin:0 auto; but 10 percent. when I put in margin:0 auto; onto my #scroller css property , it just shifts the page back to the left alignment Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222445 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 Yup, it goes straight back to the left side... hmmm.. maybe now if i wrrapper it... Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222449 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 Hm.. So can anyone be more specific? What do you guys think I have to remove? To make this page center? Becuause buddy, its alot hard then it seems: CSS: html, body { margin:0 auto; padding:0; width:100%; height:100%; } #background{ position:fixed; z-index:1; width:100%; background-attachment:fixed; background-position:center; height:100%; overflow:inherit; } #wrapper{ width:990px; margin:0 auto; } #scroller { position:absolute; width:100%; height:100%; top:0; left:0; margin-left:11%; margin-right:10%; overflow:visible; z-index:1; width:50em; text-align:left; } #content { /* padding:5px 300px 20px 200px; */ } #fixed { position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px; } #header { width:990px; /*padding-left:20px;*/ } Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222513 Share on other sites More sharing options...
AbbyShotDev Posted May 30, 2011 Author Share Posted May 30, 2011 what should I remove from this code, to make it center? And yes, when I remove the margin-left and margin-right and just put margin: 0 Auto; It just Goes to the LEFT Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222516 Share on other sites More sharing options...
cssfreakie Posted May 30, 2011 Share Posted May 30, 2011 Becuause buddy, its alot hard then it seems: it's not!! If you would have just tested this with the advice given above you would have known. #scroller{ height: 100%; margin-left: auto; /* changed */ margin-right: auto; /* changed */ overflow: visible; position: relative; /* changed */ text-align: left; width: 1000px; /* changed */ z-index: 1; } So to sum it up, to center you need: a fixed width, margin 0 auto. and that only works when the object is part of the normal flow so that's why we use position relative.... And yes, when I remove the margin-left and margin-right and just put margin: 0 Auto; It just Goes to the LEFT besides from the use of the capslock to point out you missed something yourself. the element had a position of Absolute. YOU set it to LEFT! So no wonder it moves to the left. Please if you are going to take up in fixing these kind of websites buy a manual for css, look up positioning, floats clears overflow and never use inherit as property. Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1222526 Share on other sites More sharing options...
crmamx Posted May 31, 2011 Share Posted May 31, 2011 I had the same problem and what cssfreakie is telling you works. If you would like to see some good examples of the box model, float and positioning look here: http://bayarearcsociety.com/tutorial/css_tutorial1.php Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223093 Share on other sites More sharing options...
Zane Posted May 31, 2011 Share Posted May 31, 2011 in order for margin: 0 auto to work, the width must be specifically set using a unit not a percentage; which is what cssfreakie just did in the above code. Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223113 Share on other sites More sharing options...
crmamx Posted May 31, 2011 Share Posted May 31, 2011 in order for margin: 0 auto to work, the width must be specifically set using a unit not a percentage; which is what cssfreakie just did in the above code. But that only works if you live in Cherokee County.... Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223172 Share on other sites More sharing options...
cssfreakie Posted May 31, 2011 Share Posted May 31, 2011 he pm'ed me that it worked. Too bad that Solved Button is not that clear for everybody Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223187 Share on other sites More sharing options...
Zane Posted May 31, 2011 Share Posted May 31, 2011 But that only works if you live in Cherokee County.... he pm'ed me that it worked. Cherokee County FTW Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223193 Share on other sites More sharing options...
crmamx Posted May 31, 2011 Share Posted May 31, 2011 Cherokee County FTW FTW>> I lived in Murphy for several years. Rib Country rules!!! Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223212 Share on other sites More sharing options...
Zane Posted June 1, 2011 Share Posted June 1, 2011 I always wondered when I'd run into someone from this shithole. Yeah, I used to work at Rib Country in '05. .. regardless of it being cool to run into someone so close... within 7 years of phpfreak-ship, this has nothing to do with centering a DIV. Quote Link to comment https://forums.phpfreaks.com/topic/237866-centering-page-with-css/#findComment-1223318 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.