1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do you properly center a page with CSS???

Discussion in 'CSS' started by Security Camera Warehouse, Jan 1, 2009.

0
Page 1 of 2
  1. #1
    Hello all,

    I am new to this network. After a long struggle with CSS I have finally broke down and come to seek insight and help on a big problem I have been trying to fix.

    I have Googled, and read and studied about CSS position and div control commands but I just cannot seem to get a handle on making my website look the same in all browsers. I know some of these browsers have so called bugs, but I have a testing page, where I made everything almost perfect.

    The big problem is I cannot stop the web-page from loading the site to the right and having a scroll bar on the bottom, just to see the full site when it loads.

    The link is www dot security-camera-warehouse dot com . /testing/
    If there is any expert that can point me in the right direction or do a small audit on this page, then I can start studying the right material. Thanks a bunch

    -Chad B-
     
    Security Camera Warehouse, Jan 1, 2009 IP
  2. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Its the Positions!! Seriously as your design is pretty much straightforward you don't have to apply position:absolute; to place elements in their correct locations.

    Do these:

    [1st] - Remove all the position:absolute; properties from the blocks.

    [2nd] Cover all your code within <body></body> inside a Main Block, like this :

    
<body>
	<div class="main">		<!-- Main Container Starts -->

		<!-- 	All Your Code Goes Here -->

	</div>			<!-- Main Container Ends -->
</body>
    Code (markup):
    [3rd] - Add this CSS style to that 'main' class like this :

    .main { margin:0 auto; width:AsYouWish; }
    Code (markup):
    Doing above steps will bring all your Blocks to the Center of the page, next we position individual Blocks with CSS 'float' property, not 'position' property.

    Do those first and we shall see :)
     
    markupdude, Jan 1, 2009 IP
  3. skywalkerph

    skywalkerph Active Member

    Messages:
    627
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #3
    I already try that code. but it is work only in firefox. it is not working on IE
     
    skywalkerph, Jan 2, 2009 IP
  4. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    @skywalkerph, it does work. Would you be able to show us some demo where it does not work in IE?
     
    markupdude, Jan 2, 2009 IP
  5. Jelleke60

    Jelleke60 Active Member

    Messages:
    129
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #5
    ^^

    It doesn't work like you stated it.

    If you did it exactly like he did, then if you do all lowercase in CSS 'main' then do lowercase in HTML instead of 'Main' like he did.

    Also add height: auto; in the main CSS code.

    And since you only use it once on a page, #main instead of .main would be better. In HTML it becomes <div id="main"> then.

    Hope I helped.
     
    Jelleke60, Jan 2, 2009 IP
    markupdude likes this.
  6. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok u know that is dumb... a child can guess that 'Main' was a typo.

    And is not height:auto by default for a DIV?

    And i agree, the "main" class is better be an ID as its unique per page :)
     
    markupdude, Jan 2, 2009 IP
  7. Jelleke60

    Jelleke60 Active Member

    Messages:
    129
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #7
    ^^I was just pointing it out. When you know nothing about CSS, doesn't matter if you are a child or an adult, you can't know that it was just a typo.

    And in most browsers height: auto; is default, but when you try to debug code, it certainly wouldn't hurt to add it.
     
    Jelleke60, Jan 2, 2009 IP
  8. Security Camera Warehouse

    Security Camera Warehouse Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    hmmmm, thanks for the input....i will try it out for sure and I will let you guys know how it turns out. i am looking to redo the whole site, I just have to make sure I clean up all the bugs first....thx again

    chad b
     
    Security Camera Warehouse, Jan 2, 2009 IP
  9. Security Camera Warehouse

    Security Camera Warehouse Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    yo markupdude......that worked....i got ride of the absolute tags and wrapped all the code in the <div class="main"> tag and it positioned the page in the center.....now i have to figure out how to properly place the items where i want without using tables.....i am not sure how to do it, but i will go through the trial and error process...thx for the help..

    chad b
     
    Security Camera Warehouse, Jan 2, 2009 IP
  10. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Glad you are going in the right direction.

    Now next steps:

    [1] I assume you want to make your website compatible with minimum 1024pixel of browser resolution. Good. For that the maximum width you can have for your page's Main Block is 980 to 990px. At 1024px most browsers will show a horizontal scroll bar.

    [2] Now you have to reduce the width of the header image mainlogo.bmp to your Main Block's width, so that it fits inside it, and does not break the layout. And covert that .bmp image to gif [open in Photoshop->Save for Web-As Gif], the image will become very light-weight with same quality.

    [3] And then put all those smaller blocks inside separate Containers like

    <div class="LeftSidebar"></div>

    <div class="MiddleContent"></div>

    <div class="RightSidebar"></div>

    And apply width as you wish, float:left; paddings, margins for spacing to all of them to place them side-by-side like vertical-columns.

    Play with those CSS properties, ask here, and you should be able to do it yourself... nothing better than doing it yourself.

    But if finally you want me to help in coding the basic structure [free] let me know , might be able to do it in my free time :)
     
    markupdude, Jan 2, 2009 IP
  11. Xabber

    Xabber Active Member

    Messages:
    437
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #11 
    
body { 
width: ***px;
margin: auto; }
    Code (markup):
    That's how you center the - fixed width - body, with CSS only!
     
    Xabber, Jan 2, 2009 IP
  12. Security Camera Warehouse

    Security Camera Warehouse Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    hey thank markupdude.....i see you are located in India, I have to say, every Indian person I have met in Jacksonville, Florida seems to know a lot about computers, and programming.....i am newbie for sure....but i am interested in help...there is no way i can let you do it for free....i can pay you for your help...just give me a paypal adress and i can send money....thx again...i am going to work on this tonight..
     
    Security Camera Warehouse, Jan 2, 2009 IP
  13. sampathsl

    sampathsl Guest

    Messages:
    861
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I think setting margin: auto in the main container div is the easiest method to center a page.
     
    sampathsl, Jan 3, 2009 IP
  14. woogley

    woogley Peon

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    just add a proper DOCTYPE to make "margin: o auto" work..

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Code (markup):
     
    woogley, Jan 3, 2009 IP
  15. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Code that would center a DIV

    1)html code:
    <div id=""example>text content here<div>

    2)css code
    #example {margin: 0 auto}
    or
    #example { margin: 0 1px} you can change 1px to any value you would like .
     
    justinlorder, Jan 6, 2009 IP
  16. cupidsorchard

    cupidsorchard Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    i believe the margin auto 0,0 thing is correct. though it has never worked for me. I prefer using a wrapper and div align center the whole mother.
     
    cupidsorchard, Jan 8, 2009 IP
  17. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #17
    This is the proper way to center a page using css. The people above were forgetting to text-align: center; the body and then set the auto margins on a div in the body, which allows the browser to automatically determine the width to the left and right of the browser. Enjoy!
    
<html>
<head>
	<style type="text/css">
		body {
			text-align: center;
		}
		#main {
			margin: 0 auto;
			width: 600px;
		}
	</style>
</head>
<body>
	<div id="main">
		Site content goes here.  Don't forget to change the width of the main div in the css to whatever you want.
	</div>
</body>
</html>
    Code (markup):
     
    crath, Jan 8, 2009 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    crath's example isn't wrong, but so people know:

    text-align: center supports old IE, 5.5 and below, who is too retarded to be able to center with margins. If you have this, usually the next container (#main in crath's example) would have text-align: left added in there so that the whole page doesn't have the text-align centered.

    If there's no doctype or an incorrect doctype (so always copy-pasta from the W3C page, they recommend this instead of trying to type it), then IE6 and 7 will react to the text-align and not the margins.

    For those who can't get margins to work, you MUST give the thingie in question a width (it can be %, em, pt or whatever but there must be something there or the browser just assumes it should be 100% wide like all static blocks are) and it CANNOT be floated (people try to center floats sometimes, doesn't work that way unless you use Paul O'B's trick). Without the width, Justin's example doesn't work at all.

    Security Warehouse guy, markupdude seems to be taking you in the right direction. The secret to positioning stuff on a page is to start out with the defaults and let the document flow do as much work for you as possible. A web page is like a horse- guide it in the direction you want it to go but let it find its own footsteps. Less work, more x-browser compliant : )
     
    Stomme poes, Jan 9, 2009 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    Just to add on to that, you CAN skip width if you give it a max-width - just to clarify. You must use at least max-width OR width, otherwise the default behavior of filling the entire page takes place.

    Crath's example is the best of the lot so far - on something it seems like someone asks at least once a week, which in my mind says something about the majority of tutorials and books on the subject of web design ;)
     
    deathshadow, Jan 9, 2009 IP
  20. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #20
    I tested in body IE and FF and it works fine.

    If they want the contents of the content centered in the area, they just need to text-align:left; the #main, but I didn't worry about stuff that deep because they just wanted to know how to properly center the content on the page.
     
    crath, Jan 9, 2009 IP
Page 1 of 2