Organisation table

Sujet résolu

16 octobre 2020 à 12:29:28

Bonjour j'ai une signature mail à effectuer et j'ai eu un cadre que j'ai placer en background de mon tableau et je tape donc par dessus, j'ai une cellule <td> qui est beaucoup trop grande pour le texte que j'utilise j'aimerais la limiter en largeur pour que le bord de droite soit collé à mon texte j'applique directement les styles dans les balises même si ce n'est pas conseillé je ne sais pas comment fonctionne les signatures je suis donc contraint d'utiliser cette méthode pouvez vous m'aider svp ?

Lamecarlate

16 octobre 2020 à 13:01:02

Bonjour,

Manque de précisions

Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

Un descriptif clair et précis du problème
La tentative actuelle de résolution que vous avez effectué : notamment le code HTML coloré à l'aide du bouton </>
Le résultat attendu et le résultat actuel
Toutes pistes de recherches pouvant aider à la résolution

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Shonen17

16 octobre 2020 à 14:39:41

Effectivement ce n'est pas très précis, mais pour guider tout de même sur les signatures de mail, tu peux (dois) mettre le style inline, tu n'as pas le choix, sachant que de manière générale tu ne peux pas loader de fichiers externes (tel que CSS).

Ensuite, la largeur max conseillée si tu fais dev maison, c'est du 600px de large, donc tu mets ça dans ta balise principale englobante et tu ne seras plus embêté.

Exemple d'une signature mail effectuée y'a longtemps. Sur celle-ci on dépasse les 600px mais dans l'esprit...

https://jsfiddle.net/we8aqb2g/

Max student

16 octobre 2020 à 14:57:21

désolé pour le manque de précision,

voici ma signature, j'ai représenté ma cellule en bleu et j'aimerais donc coller la bordure bleu à mon texte , j'ai essayer de plusieurs façons je n'ai malheureusement pas réussie

[MAJ] je pense avoir trouvé la solution à mon problème avec un {
table-layout: fixed; width: 150px;

en tout cas au visuel ca y est si vous avez des meilleurs solutions n'hésitez pas !

-
Edité par Max student 16 octobre 2020 à 15:06:07

Shonen17

16 octobre 2020 à 15:07:16

C'est un peu mieux, mais avec tout ton code, posté sur ce forum grace au bouton </>, ça serait encore mieux, comme ça on pourra simuler pour te guider !

Par exemple mon code ressemblerait à ça :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8">
	<title>Nom random</title>
</head>
<body>
	<table style="border:none; text-align:left; font-family:Verdana, sans-serif;" cellpadding="0" cellspacing="0">
		<tr>
			<td rowspan="2" style="background-color:#fff; padding:15px;" valign="center" width="300">
				<p style="text-align:center;"><img src="https://source.unsplash.com/random/394x180" alt="Logo random" width="280"/></p>
			</td>

			<td  rowspan="2" style="background-image:url(https://source.unsplash.com/random/34x250); background-size:cover;line-height:1px;" valign="center" width=""><img src="https://source.unsplash.com/random/34x250" height="100%" style="padding:0;margin:0;"/></td>

			<td colspan="3" valign="center" style="background-color:#004662; color:#fff; padding:15px 25px 0 25px;" width="300">
				<p style="font-family:Verdana, sans-serif; color:#fff; font-size:14px;"><b style="font-size:20px; font-weight:bold; border-bottom:3px solid #cbd200;">Prénom NOM</b></p>
				<p style="font-family:Verdana, sans-serif; color:#fff; font-size:14px;">Métier exercé<br/>
					<b style="font-size:20px; font-weight:bold;">Numéro de téléphone</b>
				</p>
				<p style="padding:0 13px 0 0; font-family:Verdana, sans-serif; color:#fff; font-size:16px;">Adresse précise, ville<br/>
			</td>
		</tr>
		<tr>
			<td valign="center" style="background-color:#004662; padding:0 3px 25px 25px;" width="30">
				<a href="https://source.unsplash.com/random/30x30"><img src="https://source.unsplash.com/random/30x30" alt="reseau 1"/></a>
			</td>
			<td valign="center" style="background-color:#004662; padding:0 3px 25px 3px;" width="30">
				<a href="https://source.unsplash.com/random/30x30"><img src="https://source.unsplash.com/random/30x30" alt="reseau 2"/></a>
			</td>
			<td valign="center" style="background-color:#004662; padding:0 25px 25px 3px;" width="240">
				<a href="https://google.fr" style="color:#fff; text-decoration:none;"><b>www.siteinternet.fr</b></a>
			</td>
		</tr>
	</table>
</body>
</html>

EDIT : tant mieux si tu as trouvé

-
Edité par Shonen17 16 octobre 2020 à 15:07:47