www.webdeveloper.com
Results 1 to 4 of 4

Thread: Centering text - why doesn't this work?

  1. #1
    Join Date
    Nov 2002
    Location
    Morden, MB, Canada
    Posts
    42

    Centering text - why doesn't this work?

    Hi all. I'm frustrated, because the simplest chuck of code I've written in years won't work. Any idea why? Here's the page in its entirety:

    <html>
    <body topmargin="0" leftmargin="0">
    <table cellspacing=0 cellpadding=0 border=0 style="table-layout:fixed" width=800 align=center>
    <p align="center">Info For Members</p>
    </table>
    </body>
    <html>

    I need the style setting in the table tag for future code on the page, as well as the centered 800px table, but for some reason the "Info For Members" line is not centered (it is left-justified). However, if I do THIS:

    <html>
    <body topmargin="0" leftmargin="0">
    <table cellspacing=0 cellpadding=0 border=0 style="table-layout:fixed" width=800 align=center>
    <p align="center">Info For Members</p>
    <p align="center">Line 2</p>
    </table>
    </body>
    <html>

    Then "Info For Members" is still not centered, but the new line "Line 2" is centered.

    I'm stumped, hopefully I'm just missing something really really obvious and one of you will catch it. Thanks for your help!

    TBor

  2. #2
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    Firstly I'd suggest you use a full doctype etc. This is so real browsers will know how to interpret what you tell them.
    Secondly, as I just wrote in your other thread, you need to use css for layout.
    Thirdly, this is the code that should actually do what you want:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    body {
    text-align: center;
    }
    #main {
    margin: auto;
    text-align: left;
    width: 800px;
    }
    .center {
    text-align: center;
    }
    -->
    </style>
    </head>
    <body>
    <div id="main">
    <p class="center">Info For Members</p>
    <p class="center">Line 2</p>
    </div>
    </body>
    </html>
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

  3. #3
    Join Date
    Nov 2002
    Location
    Morden, MB, Canada
    Posts
    42
    Thanks Dave! That seems to work for me.

    Out of curiousity, why didn't my original code work?

    TBor

  4. #4
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    Well a table should contain rows and columns, rather than straight paragraphs.... The paras would need to be in a table cell.

    e.g. (reusing the code of your original sample)
    <html>
    <body topmargin="0" leftmargin="0">
    <table cellspacing=0 cellpadding=0 border=0 style="table-layout:fixed" width=800 align=center>
    <tr>
    <td>
    <p align="center">Info For Members</p>
    <p align="center">Line 2</p>
    </td>
    </tr>
    </table>
    </body>
    <html>
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles