Need help for a layout

Hello,

need help because I no longer see what's wrong

here is the layout at this time :
http://www.http://marcsaffar.com/espagne/emailing-espagne-dec11-2.html

It should looks like pretty near this :
http://marcsaffar.com/espagne/emailing-espagne-dec11.html

Thanks for helping

Marc

roshodgekiss roshodgekiss, 5 years ago

Hi Marc, good to hear from you here! It turned out that the design was broken because width="650" had been applied to a lot of cells that were meant to be much narrower than this. In addition, the body of the email was a lot more complex than necessary, so the easiest thing to do was to place the content in a nested table instead of trying to match up columns when using a single table for your layout.

After performing a few tweaks to cover these points, the code looks like this:
[code]<!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=UTF-8" />
<title>Plongez en Espagne, en famille ou entre amis</title>
</head>
<body bgcolor="#E8F0F6" style="margin: 0; padding: 0;">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center"  style=' color: #000000; font-size: 11px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;'><br />
      Si ce message s'affiche mal
      <webversion>visualisez-le dans votre navigateur</webversion>
      <br />
      <unsubscribe>Cliquez sur ce lien pour vous d&eacute;sinscrire imm&eacute;diatement.<br />
        <br />
      </unsubscribe></td>
  </tr>
  <tr>
    <td align="center" ><!-- Save for Web Slices (boletin_frances_161111-01.jpg) -->
     
      <table id="Tableau_01" width="650" cellpadding="0" cellspacing="0" bgcolor="white" >
        <tr>
          <td width="128"  height="85" rowspan="2" valign="top"><a href="http://www.estacionesnauticas.info/" target="_blank"><img src="images/boletin_frances_161111-01_01.gif" border="0" width="128" height="85" style=" display: block;" alt="Estaciones Nauticas www.estacionesnauticas.info " /></a></td>
          <td colspan="3"  height="85"><img src="images/boletin_frances_161111-01_02.gif" border="0" width="522" height="23" style=" display: block;" alt="" /></td>
        </tr>
        <tr>
          <td width="315"  height="259" rowspan="3"><img src="images/boletin_frances_161111-01_03.gif" border="0" width="315" height="259" style=" display: block;" alt="Plongez en Espagne, en famille ou entre amis, laissez la brise caresser votre visage, la lumière éclairer vos yeux, et vivez des expériences inoubliables !" /></td>
          <td width="196"  height="259" rowspan="2"><a href="http://www.spain.info" target="_blank"><img src="images/boletin_frances_161111-01_04.gif" border="0" width="196" height="118" style=" display: block;" alt="espagne, j'en ai besoin - www.spain.info" /></a></td>
          <td width="11"  height="259" rowspan="3"><img src="images/boletin_frances_161111-01_05.gif" border="0" width="11" height="259" style=" display: block;" alt="" /></td>
        </tr>
        <tr>
          <td rowspan="2"  height="197" valign="top"><img src="images/boletin_frances_161111-01_06.gif" border="0" width="128" height="197" style=" display: block;" alt="" /></td>
        </tr>
        <tr>
          <td  height="141"><img src="images/boletin_frances_161111-01_07.gif" border="0" width="196" height="141" style=" display: block;" alt="" /></td>
        </tr>
        <tr>
          <td colspan="4" valign="top" bgcolor="#FFF"><table width="650" border="0" cellspacing="0" cellpadding="10">
              <tr>
                <td valign="top"><img src="images/boletin_frances_161111-01_08.jpg" border="0" width="271" height="571" style=" display: block;" alt="" /><a href="http://twitter.com/EstacnsNauticas" target="_blank"><img src="images/boletin_frances_161111-01_14.jpg" border="0" width="271" height="128" style=" display: block;" alt="" /></a></td>
                <td width="337" valign="top"><table  border="0" cellspacing="0" cellpadding="0" width="337">
                    <tr>
                      <td bgcolor="#FFFFFF" style='font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' align="center"><p><span style='font-size: 30px; font-weight:bold;'>Plongée sous-marine<br />
                          </span><span>Voile</span><span style='font-size: 20px; font-weight:bold;'> Windsurf </span><span style='font-size: 22px; font-weight:bold;'> Catamaran </span><span style='font-size: 18px;'> Kayak</span><span style='font-size: 25px;'> Location de bateaux<br />
                          </span><span style='font-size: 30px; font-weight:bold;'>Ski-bus</span><span style='font-size: 16px; font-weight:bold;'> Pêche </span> <span style='font-size: 24px; '>Surf</span><span style='font-size: 25px;'><br />
                          Plongée avec masque et tuba</span><span style='font-size: 30px; font-weight:bold;'> Parasailing</span> <span style='font-size: 23px;font-weight:bold;'>Ski nautique</span><span style='font-size: 23px;font-weight:bold;'> Jet Ski </span><span style='font-size: 20px;'> Croisières </span><span style='font-size: 30px;font-weight:bold;'> Kitesurf </span>N'avez-vous jamais testé votre habileté dans un sport ou une activité aquatique en Espagne ?</p></td>
                    </tr>
                    <tr>
                      <td bgcolor="#FFFFFF" style='font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;' align="left"><span style="font-size:12px;">Vous pouvez faire tout ce que vous aimez dans les Stations Nautiques. Votre satisfaction est garantie. Sports aquatiques et activités sont


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
marcsaffar, 5 years ago

Hello Rosanne,

Thanks for your help.
What I did first was to slice a whole image with Photoshop
then exported it and replaced some cells with "real" text to get a better ratio image/text.
At this point I messed up my layout.

So I sliced again in Photoshop with a more simple pattern and asked Photoshop
to write td and img width and height.

It works properly now and I could put my text where I wanted.
But this method stills use colspan and rowspan
and I will remember your advice to use nested table instead.

Have a nice day !

Marc

roshodgekiss roshodgekiss, 5 years ago

Thanks Marc - good to know the email newsletter worked out, it was a fun one to work on. All the best with your campaigns!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free