1 reply [Last post]
pseudonymph
pseudonymph's picture
User offline. Last seen 8 years 44 weeks ago. Offline
newbie
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
User offline. Last seen 7 hours 14 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2003-03-12
Posts: 3705
Points: 1115

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.

Your question may have already been answered, search and read before you ask.