Results 1 to 8 of 8

Thread: <div align="center"> in css

  1. #1
    Join Date
    Apr 2008
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default <div align="center"> in css

    W3 validator states that i shouldn't use <div align="center">
    can you suggest an alternative for centralising the body table

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there biomike,

    you should use the CSS attribute margin:auto;.

    Note that you must also use a full DOCTYPE as IE will not render margin-auto when in Quirks Mode.

    coothead

  3. #3
    Join Date
    Apr 2008
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    can't seem to get it to happen.

    here's some of the code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <link rel="alternate" type="application/rss+xml" title="The Bioenergy Healing Clinic RSS" href="/rsstest.rss">
    <link rel="shortcut icon" href="/images/bioicon2.ico">
    <meta name="robots" content="noodp,noydir">
    <title>Welcome to The Bioenergy Healing Clinic - The Official Website</title>
    <meta name="description" content="Michael Cohen, founder of the Bioenergy Healing Research Foundation is an acknowledged expert in the field of  Bioenergy Healing. His Bioenergy Healing Clinic in London W1 specialises in treating debilitating, difficult and long-term symptoms.">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-language" content="en">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    
     
    
      
    <style type="text/css">
    td {
      vertical-align: top;
    }
    
    .midaline, .specialeffects {
      vertical-align: middle;
    }
    a:hover {
      color: #f60;
      font: bold 10pt arial, helvetica, sans-serif;
    }
    .specialeffects a, .specialeffects a:active, .specialeffects a:visited {
      text-decoration: none;
      color: #fff;
      font: bold 10pt arial, helvetica, sans-serif;
    }
    .specialeffects a:hover {
      
      color: #f60;
    }
    .content input {
      font-family: arial, helvetica, sans-serif;
      font-size: 8pt;
    }
    
    .body{ 
    margin:auto;
    }
    
    <!--
    a {text-decoration: none; }
    -->
    <style>
    
    </style>
    
    </head>
    
    <body bgcolor="#EC4D00" text="#000000" link="#47637A" vlink="#47637A" alink="#EC4D00">
    <font class="content"> 
                    
                    <table style="border: 1px solid #000000; margin-left: 0; margin-right: 0" width="590" height="95" bgcolor="#CCCCCC" background="images/iStock_neuron4.jpg" border="0">
                      <tr>
                        <td width="580" height="91" background="file:///C:/Documents%20and%20Settings/Michael/My%20Documents/bioenergy/artwork/website/bioenergyhealing/images/case_notes_background.jpg" style="margin-left: 0; margin-right: 0">
    
    <font class="content"> 
    
         
    
    
         
      <table border="0" width="600" height="662" bordercolor="#000000">
    <tr>
          <td width="100%" height="656" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC">
            <div align="center">
            <table border="0" width="96%" bordercolor="#CCCCCC" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" height="115">
              <tr>
                <td width="100%" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" height="1" valign="middle" align="center"><font face="Arial"><img border="0" src="images/topplusheader_logo13.jpg" width="966" height="97"></font></td>
              </tr>
    
              <tr>
                <td width="100%" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" valign="middle" align="center" height="45">
              <form method="GET" action="http://www.google.co.uk/search">
        <table style="background-color: #47637A; height: 39px; border: 1px solid #000" width="966">
          <tr>
            <td class="specialeffects" width="708" height="35">
              <a href="index.htm"> home</a>&nbsp;&nbsp;&nbsp;&nbsp;  
              <a href="#">about us</a>&nbsp;&nbsp;&nbsp;&nbsp;  
              <a href="#">treatment</a>&nbsp;&nbsp;&nbsp;&nbsp;  
              <a href="#"> training</a>&nbsp;&nbsp;&nbsp;&nbsp;   
              <a href="#"> research</a>&nbsp;&nbsp;&nbsp;&nbsp;  
              <a href="#"> media room</a>&nbsp;&nbsp;&nbsp;   
              <a href="#">case&nbsp; histories</a>&nbsp;&nbsp;&nbsp;  
              <a href="#"> contact</a>&nbsp;&nbsp;&nbsp;   
              <a href="#"> faq</a>&nbsp;&nbsp;  
              <a href="#"> ...more</a>&nbsp;
            </td>
            <td width="175" class="midaline" height="35"><!-- SiteSearch Google -->
              <input type="hidden" name="sitesearch" value="http://www.bioenergyhealing.org.uk">
              <input type="hidden" name="ie" value="UTF-8"><input type="hidden" name="oe" value="UTF-8">
                <div align="center">
                  <table bgcolor="#47637A">
                    <tr>
                      <td class="content">
                        <input type="text" name="q" size="18" maxlength="255" value="Search our website">
                        <input type="submit" name="btnG" VALUE="Go"> <input type="hidden" name="domains" value="http://www.bioenergyhealing.org.uk">
                      </td>
                    </tr>
                  </table>
                </div>
            </td>
            <td width="61" class="midaline" height="35"><font face="Arial"><img border="1" src="images/nhs_approved3_red.jpg" width="56" height="31"></font>
            </td>
          </tr>
        </table>
      </form>
    
              </td>
              </tr>
    
            </table>
            </div>
          <table border="0" width="100%">
            <tr>
              <td width="22%">
                <p style="margin-top: 0; margin-bottom: 0" align="left"><font face="Arial"><a href="forward.htm"><img border="0" src="images/email_friend2_red3.jpg" width="29" height="19" alt="Send page to friend" title="Send page to friend"></a>
                <a href="index_printer.htm">
                <img border="0" src="images/Printer3.jpg" width="26" height="19" alt="Printer friendly page" title="Printer friendly page"> </a> 
                           <a href="http://visitor.constantcontact.com/d.jsp?m=1102254342793&p=oi"> <img border="0" src="images/newsletter_red4.jpg" width="32" height="19" alt="Subscribe to FREE Newsletter" title="Subscribe to FREE Newsletter">
                </a>
                <a href="rsstest.rss">
                <img border="0" src="images/rss2.jpg" width="23" height="19" alt="RSS Feed" title="RSS Feed">
                </a>
                <img border="0" src="images/sitemap_red3.jpg" width="40" height="19">&nbsp;</font>
              <td width="60%">
                <p align="right" style="margin-top: 0; margin-bottom: 0"></p>
              </td>
              <td width="18%" align="center" class="midaline" >
                <p style="margin-top: 0; margin-bottom: 0"><font face="Arial"><a href="http://translate.google.co.uk/translate?js=y&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;layout=1&amp;eotf=1&amp;u=www.bioenergyhealing.org.uk&amp;sl=en&amp;tl=ga"><img border="0" src="images/irish.jpeg" alt="aistriú go Gaeilge" title="aistriú go Gaeilge" width="22" height="19"></a>
                <a href="http://translate.google.co.uk/translate?js=y&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;layout=1&amp;eotf=1&amp;u=www.bioenergyhealing.org.uk&amp;sl=en&amp;tl=fr"><img border="0" src="images/french.jpeg" alt="Traduire en français" title="Traduire en français" width="28" height="19"></a>
                        <a href="http://translate.google.co.uk/translate?hl=en&sl=en&tl=es&u=http%3A%2F%2Fwww.bioenergyhealing.org.uk%2F"><img border="0" src="images/spanish.jpeg" alt="traducir al español" title="traducir al español" width="24" height="19"></a>
                        <a href="http://translate.google.co.uk/translate?js=y&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;layout=1&amp;eotf=1&amp;u=www.bioenergyhealing.org.uk&amp;sl=en&amp;tl=it"><img border="0" src="images/italian.jpeg" alt="Traduci in Italiano" title="Traduci in Italiano" width="26" height="19"></a>
                        <a href="http://translate.google.co.uk/translate?js=y&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;layout=1&amp;eotf=1&amp;u=www.bioenergyhealing.org.uk&amp;sl=en&amp;tl=ru"><img border="1" src="images/language.jpg" alt="Translate to other language" title="Translate to other language" style="border-style: solid; border-color: #000000" width="23" height="17"></a></font></p>
              </td>
          </table>

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    You don't have a class called "body". Either change the div to have the class body and remove the align center or remove the . from the body in the css. The dot signify's class, # id, and nothing in front that it is an element (a, p, h1, input, td, tr ,table, etc.).

  5. #5
    Join Date
    Apr 2008
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i have removed the . from the body but still not working

  6. #6
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Got a link? or is it the same as site as the other post?

    http://www.bioenergyhealing.org.uk/new_frontpage_1 ?

  7. #7
    Join Date
    Apr 2008
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

  8. #8
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default

    You should probably try to convert your layout to DIVs rather than tables, but for the moment add the style margin: auto; to the main container rather than body. I don't think you have an ID for whatever your container is, I checked and I didn't see any IDs.

    When I say container I mean the first table, i.e.

    <table id="1">
    <table id="2">
    </table>
    <table id="3">
    <table id="4">
    </table>
    </table
    </table>
    1 would be the container. I'm sorry if that is confusing, I don't know how to better explain it.

    If you need anything else ask.
    Tim

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
  •