Centering CSS

tequilamala

I want to center the entire site, incase people have wide screen monitors. I'm suspecting it has something to do with the position being absolute but I dunno. I've been trying everything, so there might be some uneeded script. Heres the code:

Expand|Select|Wrap|Line Numbers

  
<style type="text/css">
 
body {
 
margin-top:0px;

margin-bottom:0px;

margin-left:0px;

height:auto;

text-align:center;
 
}
 
P.wood { 

   text-align: center;

  }
 
div.all{

   margin-left: auto;

   margin-right: auto;

}

</style>
 
</head>

<body  bgcolor="black">
 
<DIV style="text-align:center;position: absolute; top:0px; left:0px; width:113px; height:0px">

<DIV style="position: absolute; top:0px; left:437px; width:100px; height:15px;">

    <table>

      <tr>

           <td><img src="abbadontitle.jpg" alt="About Us Pic" name="aboutus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:30px; left:42px; width:100px; height:15px;">

    <table>

      <tr>

          <td><img src="mikefade4.jpg" alt="Our Services pic" name="ourservices">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:20px; left:375px; width:100px; height:15px;">

    <table>

      <tr>

        <td><img src="movietitle3.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:0px; left:0px; width:00px; height:15px;">

    <table>

      <tr>

        <td><img src="rightfilm.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:0px; left:967px; width:00px; height:15px;">

    <table>

      <tr>

        <td><img src="rightfilm.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:700px; left:0px; width:00px; height:15px;">

    <table>

      <tr>

        <td><img src="bottom.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<div style="position: absolute; top:300px; left:300px; width:0px; height:0px;">

    <table>

      <tr>

        <td><object><param name="allowfullscreen" value="true" >

<param name="allowscriptaccess" value="always" >

<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1">

<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"

 type="application/x-shockwave-flash" 

allowfullscreen="true" allowscriptaccess="always" width="400" height="240">

</embed>

</object>

        </td>

      </tr>

    </table>

  </DIV>

</DIV>
 
</body>

AricC

Here's a link:

center

tequilamala

I added the text-align:center; to the body selector and the margin: 0 auto to the container and it still won't work... i'll add the code:

Expand|Select|Wrap|Line Numbers

  
<head>
 
<style type="text/css">
 
body {

       text-align:center;

       background-color: black;

        }
 
#container {

    margin: 0 auto;   /* align for good browsers */

    text-align: left; /* counter the body center */
 
</style>
 
</head>

<body>
 
<DIV id="container">

<DIV style="position: absolute; top:0px; left:437px; width:100px; height:15px;">

    <table>

      <tr>

           <td><img src="abbadontitle.jpg" alt="About Us Pic" name="aboutus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:30px; left:42px; width:100px; height:15px;">

    <table>

      <tr>

          <td><img src="mikefade4.jpg" alt="Our Services pic" name="ourservices">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:20px; left:375px; width:100px; height:15px;">

    <table>

      <tr>

        <td><img src="movietitle3.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:0px; left:0px; width:00px; height:15px;">

    <table>

      <tr>

        <td><img src="rightfilm.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:0px; left:967px; width:00px; height:15px;">

    <table>

      <tr>

        <td><img src="rightfilm.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<DIV style="position: absolute; top:700px; left:0px; width:00px; height:15px;">

    <table>

      <tr>

        <td><img src="bottom.jpg" alt="Contact Us Pic" name="contactus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<div style="position: absolute; top:300px; left:300px; width:0px; height:0px;">

    <table>

      <tr>

        <td><object><param name="allowfullscreen" value="true" >

<param name="allowscriptaccess" value="always" >

<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1">

<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"

 type="application/x-shockwave-flash" 

allowfullscreen="true" allowscriptaccess="always" width="400" height="240">

</embed>

</object>

        </td>

      </tr>

    </table>

  </DIV>

</DIV>
 
</body>

dandyliondancer

actually it does seem to display correctly for me on IE7 and FF ...
the embeded video is centered at least . . .

one suggestion: if you want your other divs to display in the right or left corner, you should probably FLOAT them there instead of using absolute coordinates. right now they slightly exceed the width of my monitor set at 1024 x 768...

FLOAT will position the tags properly on wide & hi-res screens as well as for the poor sops using 800x600.

Centering CSS

re: Centering CSS

re: Centering CSS

re: Centering CSS

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about