|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 13th, 2003, 12:57 PM
|
|||
|
|||
|
Centering an entire page in CSS?
I have every single component of my web page positioned absolutely with CSS. This is fine for most "standard" resolutions, but on high resolutions it looks really stupid having everything on the left hand side of the page.
Most major websites manage to have their content centered on the page. How can I do this with CSS since I can't just use a <center> as everything is divided into <div class="">?
|
|
#2
May 13th, 2003, 01:27 PM
|
|||
|
|||
|
Here's a not too difficult but kinda ugly solution. Love to see if anyone has a slicker way of doing it...
The basic principal is creating a containing DIV that defaults to the width of the browser, and centerss all content with it. Then, create a "content div" that is the parent of the DIV's that really position your content. The "2nd Level Div" (the one the contains your content" should be positioned relative, and then no values entered. Here's an example you can cut and paste into a text doc and put in your browser to understand. I just wish when you position stuff, containing DIV's got taller ... *shrugs* Code:
<HTML>
<HEAD>
<STYLE TYPE='text/css'>
body { margin:0px; }
#fullPage { border:2px red solid; }
#enclosing { align:center; width:400px; height:auto; border:1px black solid; position:relative }
#somecontent { position:relative; top:0px; left:0px }
#morecontent { background-color:red; top:20px; left:100px; width:76px; height:76px }
</STYLE>
</HEAD>
<BODY>
<DIV ID="fullPage" align='CENTER'>
<DIV ID="enclosing" align='LEFT'>
<!--- Your *actual* page starts here --->
<DIV ID="somecontent">
Hi there! How are you today?
</DIV>
<DIV ID="morecontent">
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
You can even "center the page off-center" by assigning value #enclosing for left pixels ... it will then center that # of pixels off to the right. Just give #enclosing a left value and play with it if you don't understand me. # Erik PS: Above HTML checked & verified in IE5.1/Mac Last edited by ErikSean : May 13th, 2003 at 01:48 PM.
|
|
#3
May 13th, 2003, 01:39 PM
|
|||
|
|||
|
Thanks, I'll give it a shot. It seems that this is indeed an ugly situation, but I'll try to work through it. I wasn't even aware that there was a way to use nested <div> tags.
Thanks for your help, Kevin
|
|
#4
May 13th, 2003, 01:57 PM
|
||||
|
||||
|
Create a conatiner div and set the margins to auto. Sounds like you used set widths?
Code:
<style>
body
{
text-align: center /* required by some versions of IE -- but not proper */
}
#all
{
width: 750px; /* whatever your site width is */
margin-left: auto;
margin-right: auto;
}
</style>
<div id="all"><!-- positioning div centers content -->
<!-- all other content divs -->
</div>
|
|
#5
May 13th, 2003, 02:13 PM
|
|||
|
|||
|
I use set widths about 50% of the time, it just depends on what I'm formatting. Usually just on text and backgrounds.
I'll try what you suggested and will let you know if I have any problems.
|
|
#6
May 13th, 2003, 03:48 PM
|
|||
|
|||
|
ErikSean:
Thanks! After quite a bit of tinkering around, I finally got it to work. Once again thank you, I really appreciate it. Awesome. jharnois: Thanks to you as well. It didn't do quite what I wanted it to do, but I saved it to my code snippet journal and am sure that it will come in very helpful another time. Thanks again, Kevin
|
|
#7
October 29th, 2003, 05:24 AM
|
|||
|
|||
|
centering a page with CSS
ok so ive tried tinkering with nested divs and margins and whatnot and managed to get the page centered. however then i found it was necessary to use relative positioning instead of absolute...fair enough. but the problem then occurs that after placing an image on the page, the position of the "containing block" moves down to the space below the image even though technically the containing block is still the div that contains both images.
so i found that with negative position values I can correct this and get two images on the same horizontal space but this doesnt seem to correspond to what is dictated in the W3C guidelines which makes me worry that it wont be so cross browser compatible. Can anyone shed some light on this situation for me? Thanks, Brian
|
|
#8
October 29th, 2003, 09:03 AM
|
||||
|
||||
|
Quote:
Sadly, I think that's the only way to do it, and there's a problem when you start z-indexing divs. I'm pretty sure to use z-index, you need to use absolute positioning (which is stupid). here's an article about the whole thing... http://www.mezzoblue.com/tests/centered-css/ pretty good stuff.
__________________
new jersey web design
|
|
#9
October 30th, 2003, 07:56 AM
|
|||
|
|||
|
CSS centering the page
yeah that article covers it pretty clearly. thanks for that.
though while reading it, i couldnt help feeling that tables sound more appealing... i got the impression upon reading the W3C CSS2 details that "absolute" refers not to the entire page but to the next ouitermost containing block adn that relative positioning was either meant for position changes or perhaps position relative to the cursor. if this is the case then it seems that more browser compatibility issues are on the way.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Centering an entire page in CSS? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
