Results 1 to 6 of 6

Thread: Center Allignment for a tableless design

  1. #1
    Join Date
    Oct 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Center Allignment for a tableless design

    Hi everybody,

    I am very new to this forum. I am now trying the tableless design using DIV and CSS. I have got sucess a little bit to make a design as such but my problem is I can't make the design come center of the IE or any other browser.

    I want to make my design(tableless) centered Alligned

    Regards
    Subha

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    See Centring using CSS, by David Dorward.

    Mike

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Code:
    <style type="text/css">
    <!--
    body {
          margin: 0 auto;
          width: 600px;
          text-align: left;
    }
    // -->
    </style>

    where width = the width you want your stuff is.
    text-align is there to ensure that all of your text is aligned on the left

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by pissa
    text-align is there to ensure that all of your text is aligned on the left
    The text-align property is there because you included it, but you don't understand why. If you read the article I cited in my post, you'd realise why the text-align property with a value of left might be used when attempting to centre block-level content, and that it's not necessary with the code you posted.

    If you'd also paid attention the last time you posted something like this, you would have hopefully heeded my advice to omit the comment declarations inside style (and script) elements, and not to suggest pixel dimensions.

    Mike

  5. #5
    Join Date
    Oct 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default The center allignment at browser (IE, Firefox)

    Thanks for the replies. I want the whole tableless page design should come at the center position of the browser. like the code we use for normal html layout like

    <html>
    <head>
    <title>welcome</title>
    </head>
    <body>
    <table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>

    <body>
    </html>


    I have used diff n types of CSSs like

    #menu {
    position: absolute;
    height: 114px;
    width: 143px;
    left: 0px;
    top: 0px;
    }


    and divs

    <div id="menu"> <img src="images/seo-home.gif">&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/seo-about-on.gif',1)"><img src="images/seo-about.gif" alt="About SEO-Manchester" name="about" width="31" height="114" border="0"></a>
    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/seo-contact-on.gif',1)"><img src="images/seo-contact.gif" alt="Contact SEO-Manchester" name="contact" width="32" height="114" border="0"></a>&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services','','images/manchester-seo-on.gif',1)"><img src="images/manchester-seo-services.gif" alt="SEO-Services" name="services" width="31" height="114" border="0"></a>&nbsp;
    </div>


    I want to allign the design at the center of the browser

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    #wrapper {
        margin: 0 auto;
        width: ??em;
    }
    Replace the question marks (?) with an appropriate value. You could use pixels, but em length values are preferable because they are proportional to font size. Likely values are somewhere between 30em and 50em.

    HTML Code:
    <body>
        <div id="wrapper">
            <!-- document content goes here -->
        </div>
    </body>
    Mike

Bookmarks

Posting Permissions

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