?
Solved

Centering table for sending as html mail

Posted on 2006-04-27
4
Medium Priority
?
180 Views
Last Modified: 2010-04-09
HI,

I'v this code below wich should be centered (vertical & horizontal) without using any javascript or other scripting languages.
Because it's ment to be sent by mail (newsletter).
I'v already tried diff. technics like using div's and css, but without any results. (maybe i'm doing it wrong??!)

I would appreciate some help plz

thx in advanced,


G.
-------------------------------------------------This is what i'v tried till now-----------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

</head>
<style type="text/css">
body {background-color:#1f0e00; margin-top:0; }
.stylebodytext2Titel {
      color:#1F0E00;
      font-weight: bold;
      font-style: normal;
      font-size: 12px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-indent: 0px;
      margin-left: 10px;
      padding-left: 0px;
      text-align: left;
      padding-top: 2px;
      margin-top: 10px;
}
.styleDiv {
      top:50%;
}

.stylebodytext1 {
      color:#FFFFFF;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
}
.stylebodytext2 {
      color:#1F0E00;
      font-weight: normal;
      font-style: normal;
      font-size: 10px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-indent: 0px;
      margin-left: 10px;
      padding-left: 0px;
      text-align: left;
      margin-right: 10px;
}
.stylebodytext3 {
      color:#FFFFFF;
      font-weight: bold;
      text-decoration: underline;
}
.styleTable {
      
}


.stylebodytext2Link {
      color:#1F0E00;
      font-weight: bold;
      font-style: normal;
      font-size: 10px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-indent: 0px;
      margin-left: 0px;
      padding-left: 0px;
      text-align: left;
      text-decoration: underline;
}
</style>
<body  bgcolor="FFFFFF">
<div align="center" class="styleDiv">
  <table width="508" border="0" cellpadding="0" cellspacing="0">
    <tr >
      <td colspan="7"><img src="paginaTop.jpg" alt="head" width="508" height="142" /></td>
    </tr>
    <tr >
      <td width="7" bgcolor="#FFFFFF" height="120">&nbsp;</td>
      <td><img src="menu.jpg" alt="pic" width="494" height="317" /></td>
      <td width="7" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
      <tr ><td colspan="3" height="7" bgcolor="#FFFFFF" ></td></tr>
      
    <tr >
      <td width="7" bgcolor="#FFFFFF" height="120">&nbsp;</td>
      <td bgcolor="#DCE0E1" valign="top" width="494"><p class="stylebodytext2Titel">some text</td>
      <td width="7" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <td colspan="7"><img src="sloganBottom2.jpg" alt="bottom" width="508" height="20" /></td>
    </tr>
    </tr>
    <td colspan="7"><img src="NieuwsBottom.jpg" alt="bottom" /></td>
    </tr>
  </table>
</div>
</body>
</html>
0
Comment
Question by:GipsyKing
  • 2
  • 2
4 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16569508
First a sidenote: For mail you should try to use inline styles (style="styles") rather than style blocks (<style></style>) for better results.

To center your table try using:
<body style="background:white;">
  <div style="text-align:center;">
    <table style="text-align:left;" ...etc.. >

-r-
0
 
LVL 17

Accepted Solution

by:
gops1 earned 750 total points
ID: 16588415
Since your doctype is a strict one it will not allow you to do all kinds of tricks.

You can change your doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and then experiment it will work.

With the above doctype the code below will do the job for you.

<table cellpadding="0" cellspacing="0" border="1" style="width:100%;height:100%">
      <tr height="100%">
            <td valign="middle" align="center">
                    <table width="508" border="0" cellpadding="0" cellspacing="0">

                        <tr >
                          <td width="7" bgcolor="#FFFFFF" height="120">&nbsp;</td>
                          <td><img src="menu.jpg" alt="pic" width="494" height="317" /></td>
                          <td width="7" bgcolor="#FFFFFF">&nbsp;</td>
                        </tr>
                         <tr ><td colspan="3" height="7" bgcolor="#FFFFFF" ></td></tr>

                        <tr >
                          <td width="7" bgcolor="#FFFFFF" height="120">&nbsp;</td>
                          <td bgcolor="#DCE0E1" valign="top" width="494"><p class="stylebodytext2Titel">some text</td>
                          <td width="7" bgcolor="#FFFFFF">&nbsp;</td>
                        </tr>
                        <td colspan="7"><img src="sloganBottom2.jpg" alt="bottom" width="508" height="20" /></td>
                        </tr>
                        </tr>
                        <td colspan="7"><img src="NieuwsBottom.jpg" alt="bottom" /></td>
                        </tr>
                    </table>
            </td>
      </tr>
</table>
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16589449
@gops1,

Then it is easier to just use a <center> tag when you use that doctype.

-r-
0
 
LVL 17

Expert Comment

by:gops1
ID: 16592387
Yes
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question