28172 sujets

CSS et mise en forme, CSS3

Interligne entre texte et image

Bonjour à tous,

Je rencontre un problème quant à l'interligne entre deux attributs, texte (h1) et image.
En fait je souhaiterais afficher une image (qui représente une ligne de un pixel de hauteur) sous un titre H1. N'y a t'il pas d'autres solutions que de modifier le "line-height" de l'attribut H1 ? Cela m'obligerait à faire des sauts de ligne BR avant le titre H1 pour le séparer du texte précédent. Quel serait la méthode ?

J'ai un peu tout essayé :
- line-height au niveau du H1, P, IMG
- padding à 0, etc.

Je bloque sur un problème si simple...
Un espace non controllé sépare mon titre H1 de mon IMG... Comment faire ?

Voici mon code :

<h1 style="line-height:1px" >Mon Titre</h1>
<p style="line-height:1px;" >
      <img src="images/hr.png" alt="" />
</p>


Merci d'avance.
Modifié par wolf85kunst (07 Jan 2011 - 16:01)
Salut,

J'ai un peu de mal à comprendre ce que tu veux.
Tu expliques que tu souhaites avoir ton image en dessous de ton titre H1, et dans ton cas tu a un espace entre l'image et le titre...

L'espace que tu as est-il quantifiable?
Et surtout quel rendu veux-tu avoir: la ligne qui colle les caractères au dessous du titre, ou la ligne qui colle le bloc <H1>?
Modérateur
Bonjour wolf85kunst,

Serait-il possible de nous montrer avec une image le rendu final que tu souhaites obtenir? Si c'est pour faire une bordure sous le titre, tu t'y prends de la mauvaise façon. Avec un exemple concret, on pourrait te proposer une solution fonctionnelle plus adaptée.
Bonsoir à tous, merci pour vos réponses.

Voici un screenshot pour une meilleure représentation du problème :

upload/33053-CaptureAls.PNG

Dans l'exemple mon titre H1 est "Compétences informatiques".
La ligne horizontale grise de 1 pixel est une image.
Le "line-height" de H1 est de 1 pixel, celui de l'image (la ligne horizontale) entouré de la balise "P", également.

Seulement, comme vous pouvez le constatez il y a un écart non voulu au dessus et en dessous de la ligne ( "compétences informatiques" - Ligne (IMG) - "Système et réseaux" ).

Je souhaiterai qu'il n'y pas d'écart (interligne à 0 entre le titre H1 et l'IMG).
Le "line-height" de H1 à 0 "semble" fonctionner pour le contenu précédent le texte, mais pas entre H1 et l'image (ligne).

Où est mon erreur ? Quelle est la meilleure méthode pour faire ce que je souhaite faire ?

J’espère que c'est un peu plus clair Smiley smile

Merci de votre patience.
Modérateur
Bonjour,

Le plus simple est de faire comme ceci, uniquement en CSS :


h1 {
margin:0 0 10px 0;
padding:0 0 2px 0;
border-bottom:1px solid #B5B5B5;
}


Tu peux ensuite jouer avec le padding pour modifier la distance de la ligne.
Bonjour,

Merci Tony pour ta réponse. Mais cette idée ne me séduit pas.

En effet, je préfère avoir une ligne (l'image) que je peux réutiliser à ma sauce et qui ne dépend pas de la largeur du texte, une ligne indépendante.

Avez-vous d'autre idée pour diminuer l'interligne entre la ligne et mon titre H1 ?

Merci.
Tu peux essayer cela:


<!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>test</title>
	<style>
		h1{
		margin:0px;
		padding:0px;
		}
		p{
		margin:0px;
		padding:0px;
		margin-top:0px;
		}
		img{
		padding:0px;
		margin:0px;
		}
		
	</style>
</head>

<body> 
<h1>Mon Titre</h1> 
<p><img src="ligne.jpg" alt="" /></p>
</body> 
</html>



Dans le cas ci-dessus, tout ce qui a attrait aux marges et padding sont à zéro.
Jouer avec le line-height n'est pour ma part pas la bonne solution.

Si dans avec ce qu'il y a ci-dessus, cela ne te convient pas (toujours trop d'espace)

tu peux essayer de mettre l'image en position relative, tu pourra alors la décaler du flux normal (un peu plus vers le haut ou vers le bas)


		img{
		padding:0px;
		margin:0px;
		position: relative;
		top : -8px; /* un valeur négative, et l'image remonte*/
		}


ou alors, utiliser des marges négatives, mais j'ai aucune idée des impacts sur la compatibilité avec les autres navigateur, ni leur rendu


		p{
		margin:0px;
		padding:0px;
		margin-top:-5px;
                margin-bottom:-5px;
		}
Sujet clos
Aller à