28111 sujets

CSS et mise en forme, CSS3

Signature e-mail HTML et CSS souci avec bordure gauche DIV

Bonjour à toutes et tous,

Je suis en train de faire non pas un site web, mais une signature de mail en HTML et CSS et je rencontre un problème tout simple, mais qui me bloque.

J'ai un DIV container avec une bordure simplement à gauche et dans ce DIV j'ai mon contenu dans des balises <p></p>

En gros:
Prénom Nom
Fonction
Tel. 06
Logo Linkedin réalisé en HTML CSS directement (pas d'image)

La bordure gauche du DIV container est censé partir de "Prénom Nom" et descendre jusqu'au logo Linkedin, mais Il y a une marge, je pense, qui fait démarrer la bordure juste en dessous de "Nom Prénom" et ce n'est donc pas calé. Je ne vois pas d'où peu provenir le souci et comment faire en sorte que la bordure prenne exactement la hauteur de mon contenu Smiley confus .

upload/1586467648-5963-capturesignaturemail.png

Code HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<body>
<!-- Signature -->
	<div class=Container>	
			<p class=BoldText>DURANT <span class=LightText>DUPONT</span></p>
			<p class=FoncTion>Cosmonaute free-lance</p>
			<p>Tel. 06 ** ** ** **</p>
			<a href="https://www.linkedin.com/in/durantdupont" class=In title="Accéder à mon profil Linkedin">in</a>
	</div>
</body>
</html>


Code CSS :

body{
	padding: 0;
	margin: 0;
}

div.Container{
	border-left: 8px solid #437991;
	padding-left: 15px;
}

p{
	font-family: sans-serif;
	line-height: 8px;
	color: #181A1B;
}

.BoldText, span.LightText{
	font-size: 24px;
}

p.BoldText{
	font-weight: 900;
}

span.LightText{
	font-weight: 200;
}

p.FoncTion{
	color: #437991;
}

a.In{
	background-color: grey;
	width: 20px;
	font-family: sans-serif;
	font-weight: 900;
	color: white;
	text-align: center;
	border-radius: 2px;
	text-decoration: none;
	padding: 3px;
	padding: 2px 4px 2px 4px;
}

a.In:hover{
background-color: #437991;
}


Merci bien à vous pour votre aide Smiley smile
Modifié par Iro (10 Apr 2020 - 19:17)
Rebonjour,

J'ai modifier un peu le code HTML et CSS.

J'ai remplacé le DIV container par une balise <article> plus moderne je pense.

Voici les codes :

HTML :


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Signature mail</title>
</head>

<body>
<!-- Signature -->
	<article>	
			<p class=BoldText>DURANT <span class=LightText>DUPONT</span></p>
			<p class=FoncTion>Cosmonaute free-lance</p>
			<p>Tel. 06 ** ** ** **</p>
			<a href="https://www.linkedin.com/in/durantdupont" class=In title="Accéder à mon profil Linkedin">in</a>
	</article>
</body>

</html>


CSS :


*{
	margin:0;
	padding:0;
}

article{
	border-left: 8px solid #437991;
	padding-left: 15px;
}

p{
	font-family: sans-serif;
	color: #181A1B;
	margin-bottom: 8px;
}

.BoldText, span.LightText{
	font-size: 24px;
}

p.BoldText{
	font-weight: 900;
}

span.LightText{
	font-weight: 200;
}

p.FoncTion{
	color: #437991;
}

a.In{
	background-color: grey;
	width: 20px;
	font-family: sans-serif;
	font-weight: 900;
	color: white;
	text-align: center;
	border-radius: 2px;
	text-decoration: none;
	padding: 3px;
	padding: 2px 4px 2px 4px;
}

a.In:hover{
background-color: #437991;

}



Ce qui nous donne, il y a du mieux, mais il reste une "marge" entre la barre des marques page du navigateur et le texte de la signature, pourquoi la bordure va bien jusqu'en haut et non le texte :

upload/1586527609-5963-signaturemailv2.png

Merci à vous Smiley cligne
Modifié par Iro (10 Apr 2020 - 19:18)
Le haut des caractères ne touche pas le haut de la ligne de texte. Sinon lorsque deux lignes se suivent les caractères se toucheraient aussi. Il est donc normal qu'il y ait cet espace entre le haut des lettres et le haut du body.

Tu peux toujours essayer de réduire line-height sur la ligne NOM PRENOM mais ce sera pas beau.
Sujet clos
Aller à