DizzyDan Posted September 28, 2010 Share Posted September 28, 2010 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 Link to comment Share on other sites More sharing options...
chibineku Posted September 28, 2010 Share Posted September 28, 2010 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 28, 2010 Share Posted September 28, 2010 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. Link to comment Share on other sites More sharing options...
DizzyDan Posted September 28, 2010 Author Share Posted September 28, 2010 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! Link to comment Share on other sites More sharing options...
thescientist Posted September 28, 2010 Share Posted September 28, 2010 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? Link to comment Share on other sites More sharing options...
ShadowMage Posted September 28, 2010 Share Posted September 28, 2010 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. Link to comment Share on other sites More sharing options...
Mark H Posted September 28, 2010 Share Posted September 28, 2010 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 28, 2010 Share Posted September 28, 2010 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. Link to comment Share on other sites More sharing options...
DizzyDan Posted September 28, 2010 Author Share Posted September 28, 2010 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 28, 2010 Share Posted September 28, 2010 sounds good. overall though, good job though for your first attempt. Link to comment Share on other sites More sharing options...
DizzyDan Posted September 29, 2010 Author Share Posted September 29, 2010 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 Link to comment Share on other sites More sharing options...
ShadowMage Posted September 29, 2010 Share Posted September 29, 2010 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.