Ajouter une icone à droite d'une balise h1

**zerros** · 13/12/2012, 17h08

Bonjour,

Je voudrai ajouter une icône à droite d'un titre h1.
Le code d'origine est le suivant:

Code html :

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

1
2
3
<h1>Mon titre</h1>
<div id="add"><img src="img/add.pnng" /></div>
<hr />

Mon H1 prends toute la largeur de la div dans laquelle il est. Du coup, j'ai commencé par limiter sa taille en y mettant:

Code :

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

1
2
3
4
5
#main > #content > #page h1 {
	width: 50%;
	font-size: 14px;
	font-weight: bold;
}

Ensuite j'ai ajouté mon image avec l'id "add":

Code :

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

1
2
3
4
5
#add {
	float: right;
	cursor: pointer;
	margin-right: 10px;
}

Du coup mon image est bien à droite, mais en bas de mon hr. Si je mets float=left dans mon h1, impeccable, mon image est bien à droite, mais mon hr se retrouve sur la même lige que mon titre et va du milieu de la page jusqu'à mon image.

Comment puis-je faire pour mettre mon image à droite de mon titre et garder mon hr en dessous ?

J'espère que vous pourrez m'aider.

**NoSmoking** · 13/12/2012, 18h52

Bonjour,
tu peux mettre ton IMG en float:left à l'intérieur de ton H1

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
h1{
  height:50px;
  line-height:50px;
  border:1px solid #DDD;
}
h1 img{
  float:right;
  vertical-align:top;
}
</style>
</head>
<body>
<h1><img src="http://club.developpez.com/webdesign/Developpez.com/Outils/Web/LogoHTML.gif">Developpez.com</h1>
<hr>
</body>
</html>

**zerros** · 14/12/2012, 09h48

impeccccc. merci beaucoup !! ça me rendait fou. le height et le line-height m'a beaucoup aidé

Ajouter une icone à droite d'une balise h1

CSS

Vue hybride

Discussions similaires

Partager

Partager