espace entre cellule

espace entre cellule - HTML/CSS - Programmation

Marsh Posté le 09-01-2018 à 13:13:31    

Bonjour,
 
Je suis débutant et vient de finir une newsletter.
Je l'ai fait dans dreamweaver. Malgré la fait que j'aie bien mis border, cellpadding et cellspacing à zéro, mon résultat s'affiche
dans les navigateurs avec des espaces entre les cellules, ce qui n'est pas le cas avec le prévisualisation dans le soft.
 
Quelqu'un peut-il me sauver la mise?
 
Voici un bout de mon code si besoin.....
 
body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<table border="0" cellpadding="0" cellspacing="0" width="650" height="1000">
  <tr>
    <td width="650" height="17" ><img src="images/emailing_01.jpg" width="650" height="17"/></td>
  </tr>
  <tr>
    <td width="650" height="32">
   <table width="650" height="32" border="0" cellpadding="0" cellspacing="0">
    <tr>  
     <td width="20" height="32"><img src="images/emailing_02.jpg" width="20" height="32"/> </td>
     <td width="401" height="32" bgcolor="#000000" align="center" valign="middle"><span style="font-family: 'Minion Pro', 'Minion Pro Bold', 'Minion Pro Bold Cond', 'Minion Pro Bold Cond Italic', 'Minion Pro Bold Italic', 'Minion Pro Italic', 'Minion Pro Medium', 'Minion Pro Medium Italic', 'Minion Pro Semibold', 'Minion Pro Semibold Italic', Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'; font-size: 30px; text-align: center; color: #FFFFFF";  > AU THEATRE OCEAN NORD </span> </td>
     <td width="229" height="32"><img src="images/emailing_04.jpg" width="229" height="32"/></td>
    </tr>
  </table>
   
   </td>
  </tr>
  <tr>
    <td width="650" height="62" ><img src="images/emailing_05.jpg" width="650" height="62"/></td>
  </tr>

Reply

Marsh Posté le 09-01-2018 à 13:13:31   

Reply

Marsh Posté le 09-01-2018 à 13:58:42    

Oh la la, que c'est laid. Sors de ton code HTML toute la partie mise en forme pour la mettre dans un fichier CSS :o Je fais référence à tes attributs width, height, bgcolor, align, style...
Et si tu as la possibilité, laisse tomber Dreamweaver qui est une merde finie, pour preuve, le code que tu as posté...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 09-01-2018 à 14:01:48    

d'accord.
tu pourrais juste me guider un peu pour le css?

Reply

Marsh Posté le 09-01-2018 à 14:11:52    

Cela étant, le code que j'ai poste, je l'ai écrit de mes blanches mains en partant d'un tuto de tuto.com... ce n'est pas dream qui me l'a pondu...

Reply

Marsh Posté le 09-01-2018 à 14:33:56    

Alors c'est encore plus triste :( On a l'impression que ton code date de la fin des années 90 :o
Va sur alsacreation ou sur openClassroom pour te former au HTML5 et au CSS :  
https://www.alsacreations.com/tutoriels/
https://openclassrooms.com/courses/ [...] l5-et-css3


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 09-01-2018 à 14:50:58    

Ok je vais faire cela.
Ce qui est triste c'est de trouver un tuto (payant cela dit en passant) pour apprendre à faire une simple newsletter et d'apparemment se retrouver avec un code obsolète

Reply

Marsh Posté le 09-01-2018 à 14:59:25    

et cela étant, j'ai trouvé le problème.
Il s'agit des cellules textes. La typographie étant trop grande, et malgré le fait que les dimensions de la cellule soient fixées, elles se sont adaptés au caractère trop grand et provoque ce décalage entre les lignes. Voilà pour ceux qui font des trucs des années 90 ;-)

Reply

Marsh Posté le 09-01-2018 à 15:08:02    

et aussi ajouter ceci aux images :  
style="display:block; width=650px; height=17px; border:none "

Reply

Marsh Posté le 09-01-2018 à 18:01:14    

Sérieux, tu payes pour un tuto sur du HTML/CSS  :pt1cable: T'avais fait des recherches sur Google avant ?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 12-01-2018 à 08:39:52    

Code :
  1. <span style="font-family: 'Minion Pro', 'Minion Pro Bold', 'Minion Pro Bold Cond', 'Minion Pro Bold Cond Italic', 'Minion Pro Bold Italic', 'Minion Pro Italic', 'Minion Pro Medium', 'Minion Pro Medium Italic', 'Minion Pro Semibold', 'Minion Pro Semibold Italic', Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'; font-size: 30px; text-align: center; color: #FFFFFF";  > AU THEATRE OCEAN NORD </span>


explique moi ce que tu cherches à faire avec autant de polices, aux attributs différents (italiques, gras...)


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 12-01-2018 à 08:39:52   

Reply

Marsh Posté le 14-01-2018 à 23:50:14    

J'ai voulu te refair eune version propre sur JSFiddle, mais le code est vraiment trop crade, j'abandonne :(
(et... une table dans une table? :??:)

 

C'aurait donné un début de CSS un peu du genre:

 

body {
  margin = 0;
}

 

table {
  border: 0;
  border-spacing : 0;
  width= 650px;
  height = 1000px;
}

 

table tr td
{
  padding= 0;
}

 

Mais c'est nawak, t'as des variation de tailles de cellule pour quasi chaque ligne  :pt1cable: Passe-toi des tableaux et organise tout avec des div, avec l'aide éventuelle de bootstrap...


Message édité par potemkin le 14-01-2018 à 23:50:45
Reply

Marsh Posté le 15-01-2018 à 14:22:59    

C'est vrai, j'avais oublié la mise en page par tableau, old school depuis fin des années 90 :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed