Jump to content
DizzyDan

Centering Page Content

Recommended Posts

I have read on this topic on this forum and many other reference site and what not. It came to the fact that i really need to address my exact probelm.Ok, I have developed this site for my band.http://www.newyorkrocknroll.comWe needed something ASAP, we just got a licensing deal one of our songs, which is being used as the theme song to the "Inside the PGA Tour" TV Program. Since that launched we had some high traffic demand for our band but noowhere to send them. So, i know a little bit about web design. After paging through a book or two and just plain researching online i created that site.The problem at hand is centering the page. I can get it centered on my monitor but when viewed on different sized monitors the content doesnt center correctly. Its either a little to much left or a little to much right. I have tried many methods that i have read about, none of which seem to work. I'm not sure what information you need from me in order to help my situation but if anyone could help that would be greatly appreciated.Thank you,-Dan

Share this post


Link to post
Share on other sites

If your page has a width set, in %, px or whatever, then you can give it margin: 0 auto; to center it. Apply this to either the body or a containing element. It's with setting a width - most pages don't look good edge to edge.

Share this post


Link to post
Share on other sites

not bad for a first try. The easiest way to center a page is to put all your content in one div container and give it a large enough width to hold your content and then give it margin: 0px auto; Unfortunately, you have based the entire layout on using absolute positioning which takes all those elements out of the normal flow of the document and thus can't be centered as such. Typically positioning is not used to structure a web document from the ground up, rather the box model (margins, padding's, etc) and float is used to position elements on a page.

Edited by thescientist

Share this post


Link to post
Share on other sites

I would like to thank you both very much for helping me out and even more so for having such a quick reply.So, I would have to remove the absolute positioning and substitute it by using margin or padding to position the div's on the page?I ran into a problem trying this before. It left me unable to stack divs ontop of each other or if I were to add a div to the page it would move another ones current postion to a different spot. This got frustraiting which is why I went with the absolute positioning. I would like for that not to happen in order for ease of positioning or adding div without affecting the current ones.But for the sake of centering the page I will, if there is no other way.Thanks agian!

Share this post


Link to post
Share on other sites

div's are naturally block level elements by default, and should automatically start on a new "line". Do you happen to have any of that old code available?

Share this post


Link to post
Share on other sites

You might be able to apply a "band-aid" to your site by wrapping everything in a div with position: relative;

<body>   <div id='wrapper'>	  <!-- All of your content -->   </div></body>

#wrapper {   position: relative;   width: 1000px; /*or whatever you need*/   margin: 0px auto; /*To center it*/}

The position: relative creates a container to which absolutely positioned elements are placed in relation to, so if it is centered, then all of your content should (theoretically) be centered.Note, however, that I do agree with thescientist on using box model styles (padding, margin, display, float, etc.) to create layouts.

Share this post


Link to post
Share on other sites

I would also agree that the box model is best for the main layout. But once you have the basic layout, you can then add additions using a position: relative or position: absolute in order to overlay.Mark.

Share this post


Link to post
Share on other sites
You might be able to apply a "band-aid" to your site by wrapping everything in a div with position: relative;
<body>   <div id='wrapper'>	  <!-- All of your content -->   </div></body>

#wrapper {   position: relative;   width: 1000px; /*or whatever you need*/   margin: 0px auto; /*To center it*/}

The position: relative creates a container to which absolutely positioned elements are placed in relation to, so if it is centered, then all of your content should (theoretically) be centered.Note, however, that I do agree with thescientist on using box model styles (padding, margin, display, float, etc.) to create layouts.

Yup, I just tried out it in firebug and that should work. just take out the margins on the centered div, and add in shadowmage's suggestion.

Share this post


Link to post
Share on other sites

Great!Thank you very much. I will try it out 1st thing when I get home. I greatly appreciate all the help, and I will next look into creating the box model style layout for our new web layout. For now we need something and that centering issue was really bugging me. I will let you know how it works out when i get home.

Share this post


Link to post
Share on other sites

sounds good. overall though, good job though for your first attempt.

Share this post


Link to post
Share on other sites

Wow, Thank you all so much I cant tell you how much this little problem bothered me. It's like FINALLY! Thank you for the 'good job' as well I did put a lot of time into this site, although I do feel much work is needed. Content for multiple pages is being worked on and im sure that I will have more questions to come! Any constructive critisizem you have for the layout or functionality of the site would be great too! All in all, thank you so much for all of your concerns and quick responses I had not expected to fix this problem today. I hope I will be able repay the favor and help others on this forum like you have all helped me. Soon enough!Regards,- Dan

Share this post


Link to post
Share on other sites
Content for multiple pages is being worked on and im sure that I will have more questions to come! Any constructive critisizem you have for the layout or functionality of the site would be great too!
Try creating these other pages using the box model instead of positioning. I think you'll find that your pages will look better across different browsers as well as being easier to maintain. And if you're not already, consider using a Strict DTD on your pages. This, along with validating your code, will ensure better cross-browser compatibility as well.Getting into these habits early will make it easier for you in the long run. And, of course, if you do have questions, all you need to do is ask. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...