padding-left à l'intérieur d'un tableau
Je suis en train de construire un bulletin d'information que j'ai conçu pour être envoyé par e-mail. J'ai maintenant le problème est que le texte n'a pas d'espace pour les images autour d'elle et je voudrais changer la background-color
du champ de texte en gris comme:
Si je suis en lui donnant un nouveau td
est tout le code ne fonctionne plus pourriez-vous m'aider s'il vous plaît.
Voici le code complet jsfiddle
<table width="600*" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><br>
<td width="201" valign="top" >
<img src="images/angebot1.jpg" style="display: block;" border="0" width="201" height="394"/><br />
<br />
</td>
<td width="291" valign="top">
<img src="images/angebotbild1.jpg" style="display: block;" border="0" width="335" height="150"/>
<div style="margin-top: 3px;"></div>
<font color="#778da7" face="Trebuchet, Arial, Verdana, Helvetica, sans-serif" size="2" style="font-size: 12px"> the text </font><br><br>
<a href="#" alt="Book now" target="_blank" style="color:#cc1f2f; font-weight:bold; text-decoration:none;float:left"><img src="images/button.jpg" width="335" height="60" style="display:block;" border="0" /></a>
</td>
</tr>
</table>
Je voudrais vous recommandons de changer ce travail sans une table. Il n'y aucune raison que cela doit être dans une table.
la raison en est que googlemail cant lire div boîtes ou souvent de l'ignorer. chaque fois que im faire avec des div boîtes il a montré a éclaté dans googlemail
Pour déplacer le texte avec
Je suis en désaccord, les Tables sont encore tout à fait pratique courante pour les e-mails
L'OP n'a pas d'état, il a été conçu pour un e-mail jusqu'à ce que les commentaires. Lire mon commentaire sous "Nasapc123" réponse.
la raison en est que googlemail cant lire div boîtes ou souvent de l'ignorer. chaque fois que im faire avec des div boîtes il a montré a éclaté dans googlemail
Pour déplacer le texte avec
padding-left
vous pouviez faire passer le texte dans un div et jeu de div avec style="padding-left: 10px;"
ou ce que vous voulez qu'il soit.Je suis en désaccord, les Tables sont encore tout à fait pratique courante pour les e-mails
L'OP n'a pas d'état, il a été conçu pour un e-mail jusqu'à ce que les commentaires. Lire mon commentaire sous "Nasapc123" réponse.
OriginalL'auteur | 2013-12-19
Vous devez vous connecter pour publier un commentaire.
Permet d'avoir un peu de regarder cela.
Même pour un tableau de mise en page de son assez mauvais, mais il nous suffit de travailler avec ce que nous avons.
Rembourrage Texte:
Pour compléter le texte nous aurons besoin de l'envelopper dans un
div
. Cela est dû à des images et donc d'être dans la même<td>
.Donc le texte à la ligne dans:
Changer le fond d':
De nouveau comme il y a des images dans le même
<td>
qui pourraient causer des problèmes, mais si les images sont alors visibles à l'arrière-plan va s'asseoir derrière eux. Il devrait donc être aussi simple que la mise à la<td>
de fond comme:J'ai ajouté une démo pour vous de regarder. Avec les images qu'il devrait s'asseoir correctement si non, vous devrez assurez-vous que la hauteur et la largeur sont corrects pour arrêter la couleur de fond d'apparaître sous les images.
DÉMO
Se débarrasser de l'espace supplémentaire:
L'espace supplémentaire est cause par la gauche
<td>
contenant<br /><br />
de prendre cette distance et ce sera très bien. Comme c'est un tableau<td>
dans le même<tr>
auront la même hauteur, le changement affecte les autres.Avant:
Après:
DÉMO
Parce que c'est comment grand les deux
<td>
s'sont. Si vous mettez un fond dans l'une à côté, vous y verrez la même taille. Afin de modifier la hauteur.j'ai mis à jour le jsfiddle le seul problème que j'ai est la couleur sous les photos , il devrait y avoir une coupure. jsfiddle.net/9Psun/2 n'est pas possible de le réparer ?
Mise à jour de ma réponse, il a été
<br>
la cause.il y a encore un peu de couleur , même si je supprime le <br>. désolée si je suis un
OriginalL'auteur Ruddy
Vous pouvez placer l'étiquette de police au sein de la div.
Puis ajouter un padding-left et set display: inline-block.
Aussi la couleur d'arrière-plan peut être appliqué à la td, comme le reste de la partie sera couverte par les images.
Grâce
Oui, la couleur est due à des balises br dans le td, où il y a deux images, et les paragraphes. Suffit d'enlever toutes les br(4 occurrences), puis une couleur supplémentaire au bas de la page aller loin.
OriginalL'auteur Pallavi
Je suggère ce n'est pas fait avec une table, les tables sont maladroit, et ne doit jamais être utilisé pour la mise en page sur le principe. Vous pouvez utiliser des divs flottants, comme c'est indiqué dans mon exemple de code ci-dessous, vous permettant d'ajouter tout rembourrage vous le souhaitez, et tout simplement la mise à jour de la largeur de la div englobante pour tenir compte de cela. Vous devriez utiliser des tableaux pour les données devant être compilés, et rarement utilisés dans la mise en page, sauf s'il est expressément demandé à la CSS de ne pas être en mesure de style.
Ce n'est pas correct, l'OP déjà dit dans les commentaires c'est pour les e-mails. Si le tableau est la chose correcte à utiliser en raison de différents clients de messagerie affichage
div's
et d'autres HTML différemment. Les Tables sont la meilleure façon de s'assurer de la mise en page est correcte.Mes excuses pour ce que, je dois avoir manqué, où il a déclaré que c'était pour les e-mails.
OriginalL'auteur JaanRaadik
Ici est la solution dont vous avez besoin , il va travailler sur outlook trop 🙂
OriginalL'auteur suraj rawat