Centering CSS - HTML / 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:

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>

Jun 27 '08 #1

Subscribe Post Reply

1271

AricC

1,892

Expert 1GB

Here's a link:

center

Jun 27 '08 #2

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>

Jun 27 '08 #3

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.

Jun 29 '08 #4

Similar topics

centering float left

by: Jeff Thies | last post by:

I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...

HTML / CSS

Centering tumbnails

by: Franois de Dardel | last post by:

http://mapage.noos.fr/dardelf3/tintin/page3bits.html Can I center the series of thumbnails horizontally in the pages _and_ keep the "elastic arrangement" where the number of thumbnails adapts to...

HTML / CSS

Centering Text in a Nested DIV

by: Jonah Bishop | last post by:

I have a puzzling problem with centering text, and I'm hoping that someone here can help me out. First of all, let me state that I am using XHTML 1.0 Strict and CSS for all layout purposes (no...

HTML / CSS

IE centering

by: Ryan W Sims | last post by:

I'm having trouble with centering in IE... http://www.ryanwsims.com/koh/ The image should center over the text. It does in Firebird, but not in IE for some reason. If you look at ...

HTML / CSS

centering a list with CSS

by: Pierre Jelenc | last post by:

Is there a way to center (horizontally) a UL list of unknown width? I can put it in a DIV that's centered with "margin-left: auto; margin-right: auto;" but I then have to specify a width; otherwise...

HTML / CSS

centering two divs

by: red | last post by:

How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...

HTML / CSS

Centering a site

by: Axel Siebenwirth | last post by:

Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site...

HTML / CSS

vert and hor centering text in <div>

by: John Pote | last post by:

1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...

HTML / CSS

Vertical centering without tables

by: Markus Ernst | last post by:

Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...

HTML / CSS

Table data not centering

by: =?Utf-8?B?ZnJhbmt5?= | last post by:

Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA