Centering CSS

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tequilamala
    New Member
    • Aug 2007
    • 15
    #1

    Centering CSS

    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:

    Code:
    <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>
    Tags: None
    • AricC
      Recognized Expert Top Contributor
      • Oct 2006
      • 1885
      #2
      Here's a link:

      center

        Comment

        • tequilamala
          New Member
          • Aug 2007
          • 15
          #3
          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:

          Code:
          <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>

            Comment

            • dandyliondancer
              New Member
              • Jun 2008
              • 12
              #4
              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.

                Comment

                Previous template Next
                Working...