Décalage d'une image et d'un titre alors qu'ils ont la même marge

etiennegaloup · 20/11/2011, 21h14

Bonsoir,

je débute en CSS et je rencontre quelques difficultés pour appliquer des marges à une image et un titre H1 alignés verticalement.
J'ai appliqué la même marge haute à l'image et au titre, pourtant l'image est plus bas que le titre. (Voir Screenshot_1.jpg)

Voici le code html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div id="bandeau">
        <img src="http://www.developpez.net/template/images/logo.gif" border="0" alt=""/>
        <h1 class="TexteEnTete">Titre1</h1>
    </div>
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
            <h2>Texte</h2>
        </asp:ContentPlaceHolder>
    </form>
</body>

et le code CSS:

Code css :

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
#bandeau
{
    border-style: none;
    border-width: thin;
    border-color: Black;
}
 
#bandeau img 
{
    float : left;
 
    margin-top: 10px;
    margin-left: 20px;
}
 
#bandeau .TexteEnTete{
  color: #FFFFFF;
  font-size: 200%;
  font-weight: normal;
  font-style: italic;
 
  text-align: right;
  padding-right: 2%;
 
  vertical-align : middle;
  line-height : 90px;
 
  margin-top: 10px;
  margin-left: 275px;
  margin-right: 20px;
 
  background: #008689;
}

Curieusement, si j'ajoute une bordure à l'id bandeau, l'image est correctement alignée par rapport au titre. (Voir Screenshot_2.jpg)

Code css :

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

1
2
3
4
5
6
7
 
#bandeau
{
    border-style: solid;
    border-width: thin;
    border-color: Black;
}

Bref, je ne comprends pas trop l'origine du problème.
D'où ça vient d'après vous ?

Merci d'avance
Etienne

Titum · 21/11/2011, 14h25

Salut,
si tu rajoute

Code :

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

background-color:yellow;

à ton bandeau tu verra que le h1 n'est pas du tout décalé de 10px en haut du div, alors que l'image est bien décalée.

Je pense que le calcul de la marge pour le h1 est pris sur la base du div seulement si celui-ci a une bordure. Sinon c'est pris sur l'élément parent, ici la bordure de page.
Si tu augmente le margin-top du h1 seul, ça décale en effet tout le div.

Je te conseil d'enlever les margin-top de #bandeau img et #bandeau .TexteEnTete et de le placer dans #bandeau et là ça marche.
Par contre lorsque tu appliques une bordure, ça décale dans l'autre sens. Pour éviter ça il faut mettre margin-top à 0 pour le h1.

En clair :

Code :

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
  #bandeau
{
    border-style: none;
    border-width: thin;
    border-color: Black;
	background-color:yellow;
    margin-top: 10px;
}
 
#bandeau img 
{
    float : left;
    margin-left: 20px;
}
#bandeau .TexteEnTete{
  color: #FFFFFF;
  font-size: 200%;
  font-weight: normal;
  font-style: italic;
 
  text-align: right;
  padding-right: 2%;
 
  vertical-align : middle;
  line-height : 90px;
 
  margin-top:0;
  margin-left: 275px;
  margin-right: 20px;
 
  background: #008689;
}

Dis-moi si ça roule

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