Aligner une image et un texte [Résolu]

etiennegaloup · 17/11/2011, 22h09

Bonjour,

je débute en css et j'éprouve quelques difficultés pour mettre en place en en-tête de ma page une image suivi d'un titre h1 centré verticalement par rapport à l'image. J'aimerais que le titre soit légèrement décalé de l'image et pas collé tout contre.
J'ai lu plusieurs solutions pour faire ce que je souhaite faire.
La première sur le site de Pascale Lambert: Aligner une image à gauche du texte
Elle consiste à appliquer à le style suivant à l'image et à définir le texte de la même taille que l'image.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p class="flotte">
 <img src="images/new.png" alt="Nouveau !" />
</p>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.flotte {
float:left;
}

Comment puis-je faire pour que la taille du texte soit automatiquement la même que celle de l'image ?

L'autre solution a été proposé par Bisûnûrs sur ce forum:
Aligner texte et image

Hors ici, le texte n'est pas mis en forme. Pour ma part, je souhaite utiliser une balise h1.
En appliquant cette solution avec mon titre h1, ce dernier est mis à la ligne.

Comment puis-je faire ?

Merci d'avance
Etienne

NoSmoking · 17/11/2011, 22h33

Bonsoir,
il te faut mettre ton image dans la balise H1 et appliquer à celle ci une margin-right en plus du vertical-alignexemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
h1 img {
  vertical-align : middle;
  margin-right : 10px;
}
</style>
</head>
<body>
<h1><img src="http://www.developpez.net/template/images/logo.gif">www.developpez.net</h1>
</body>
</html>

Le retour à la ligne s'explique par le fait que les éléments H1 sont des éléments de type block

etiennegaloup · 17/11/2011, 23h21

Bonsoir,

merci beaucoup pour la réponse.
Ca marche super bien. C'était si simple au final.

Comment puis-je faire pour appliquer le style suivant au texte du titre h1 ?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.TexteEnTete
{
    font-size: 200%;
    font-weight: normal;
    font-style: italic;
    text-align: right;
    padding-right: 2%;
    background: #008689;
    color: #FFFFFF;
}

Merci d'avance
Etienne

NoSmoking · 18/11/2011, 22h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="TexteEnTete"><img src="http://www.developpez.net/template/images/logo.gif">www.developpez.net</h1>

http://css.developpez.com/faq/?page=...html#css_class

etiennegaloup · 19/11/2011, 00h53

Bonjour,

merci pour la réponse.
J'avais effectivement procédé ainsi.
Le hic, c'est que j'aimerais que mon texte soit aligné à droite et que l'image reste à gauche. Dans ce cas, je ne peux pas définir l'attribut text-align à la valeur right, sinon l'image ne reste pas à gauche.
Il faudrait donc que je puisse juste appliquer la class juste au texte.

Je ne sais pas trop comment faire. En utilisant un span peut-être ? Ou en englobant pas l'image dans la balise h1 ? Je ne sais pas trop à dire vrai.

Merci d'avance pour votre aide.
Etienne

NoSmoking · 19/11/2011, 08h27

je vois au moins 2 méthodes
- mettre ton image en backgroud
- mettre l'ensemble dans une DIV avec l'image en flottant, un peu comme tu l'avais approché au départ

exemple avec les 2 méthodes:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
/* methode #1 */
.TexteEnTete{
  color: #FFFFFF;
  font-size: 200%;
  font-weight: normal;
  font-style: italic;
 
  text-align: right;
  padding-right: 2%;
 
  vertical-align : middle;
  line-height : 90px;
 
  background: #008689;
  background-image : url(http://www.developpez.net/template/images/logo.gif);
  background-repeat : no-repeat;
}
/* methode #2 */
.autreEnTete{
  color: #FFFFFF;
  font-size: 200%;
  font-weight: normal;
  font-style: italic;
 
  text-align: right;
  padding-right: 2%;
 
  vertical-align : middle;
  line-height : 90px;
 
  background: #008689;
}
#bandeau img {
  float : left;
}
 
</style>
</head>
<body>
  <h1 class="TexteEnTete">www.developpez.net</h1>
  <div id="bandeau">
    <img src="http://www.developpez.net/template/images/logo.gif">
    <h1 class="autreEnTete">www.developpez.net</h1>
  </div>
</body>
</html>

la 2éme méthode te permettant de mettre un lien éventuelle sur l'image

etiennegaloup · 19/11/2011, 10h41

Bonjour,

merci pour la réponse.
Donc si je comprends bien, avec la deuxième méthode, il faut que je fixe la taille de la ligne avec l'attribut line-height, de sorte que le texte soit de la même hauteur que l'image, n'est-ce pas ?

Une dernière question sur la syntaxe:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#bandeau img {
  float : left;
}

Cela signifie-t-il que ce style ne s'appliquera qu'aux balises images incluses dans un div dont l'id est bandeau ?
Ou s'applique-t-il à toutes les balises img ?

Merci d'avance,
Etienne

NoSmoking · 19/11/2011, 11h11

Citation:

il faut que je fixe la taille de la ligne avec l'attribut line-height, de sorte que le texte soit de la même hauteur que l'image, n'est-ce pas ?

tout à fait...

Citation:

Cela signifie-t-il que ce style ne s'appliquera qu'aux balises images incluses dans un div dont l'id est bandeau ?

Exact...

Citation:

Ou s'applique-t-il à toutes les balises img ?

En aucun cas, il aurait fallu mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img{
  float : left;
}

etiennegaloup · 19/11/2011, 11h57

Merci beaucoup pour toutes ses réponses.

A bientôt
Etienne

18/11/2011, 22h29	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Code : Sélectionner tout - Visualiser dans une fenêtre à part <h1 class="TexteEnTete"><img src="http://www.developpez.net/template/images/logo.gif">www.developpez.net</h1> http://css.developpez.com/faq/?page=...html#css_class
	00

19/11/2011, 00h53	#5
etiennegaloup Membre régulier Inscription : juillet 2004 Messages : 276 Détails du profil Informations forums : Inscription : juillet 2004 Messages : 276 Points : 73 Points : 73	Bonjour, merci pour la réponse. J'avais effectivement procédé ainsi. Le hic, c'est que j'aimerais que mon texte soit aligné à droite et que l'image reste à gauche. Dans ce cas, je ne peux pas définir l'attribut text-align à la valeur right, sinon l'image ne reste pas à gauche. Il faudrait donc que je puisse juste appliquer la class juste au texte. Je ne sais pas trop comment faire. En utilisant un span peut-être ? Ou en englobant pas l'image dans la balise h1 ? Je ne sais pas trop à dire vrai. Merci d'avance pour votre aide. Etienne
	00

19/11/2011, 11h57	#9
etiennegaloup Membre régulier Inscription : juillet 2004 Messages : 276 Détails du profil Informations forums : Inscription : juillet 2004 Messages : 276 Points : 73 Points : 73	Merci beaucoup pour toutes ses réponses. A bientôt Etienne
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email