Log in

View Full Version : <div align="center"> in css



biomike
12-28-2009, 06:16 PM
W3 validator states that i shouldn't use <div align="center">
can you suggest an alternative for centralising the body table

coothead
12-28-2009, 06:31 PM
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

biomike
12-28-2009, 09:34 PM
can't seem to get it to happen.

here's some of the 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>

bluewalrus
12-28-2009, 09:59 PM
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.).

biomike
12-28-2009, 10:29 PM
i have removed the . from the body but still not working

bluewalrus
12-28-2009, 10:41 PM
Got a link? or is it the same as site as the other post?

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

biomike
12-28-2009, 11:06 PM
its

http://www.bioenergyhealing.org.uk/new_frontpage_2

twQ
12-29-2009, 02:53 AM
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