1 reply [Last post]
pseudonymph
pseudonymph's picture
Offline
newbie
georgia
Last seen: 11 years 34 weeks ago
georgia
Joined: 2003-04-01
Posts: 1
Points: 0

HI! please look at my site and tell me how I get this centered on the page Smile Im working with a templete, so I figured out how to move it over, but it will look different in each screen size. I kinda want it to be very similar in each different screen size. thanks!

http://www.digitaldialecte.com/

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 48 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

page positions

Hi Pseudonymph,
There are a few ways to center the content. I have had a play around with one and come up with the result you're after (tested only in ie6 & netscape 7)
The main idea is to firstly remove the absolute positioning and set the left and right margin to auto.
To do this I had to change the structure of your site a little and of course modify the css.
Here is the basic structure of the site notice the order has changes and topbox has been added.

<div id="content">
     <div id="topbox">
          <div id="site-title">  
          </div>
          <div class="date">  
          </div>
     </div>
     <div id="site-graphic">
     </div>
     <div class="logbody"> 
     </div>
     <div id="side">
     </div>
</div>

and here is the CSS that changed.

#content  {
  margin-top:10px; margin-left:auto; margin-right:auto; width:600px;}  
         
#topbox {
    width:410px; float:left;}         
         
.logbody {
 float:left; width:400px; margin:0px 0px 0px 0px; padding:5px;
 background:#cccccc; border:1px solid #666666;}
         
#side    { 
  float:right; width:150px; background:#ffffff; border-left:1px solid #999999;
  font:10px verdana, arial, helvetica, sans-serif; font-weight:normal;
  color:#666666; padding:2px; margin-bottom:20px;}
          
#site-graphic {
  float:right; margin-right:20px; margin-top:20px;
  width:150px; height:150px;}

I hope I haven't left anything out Smile
If you try it out make sure you test it in your target browsers or post it up here again so others can check it out.