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
Partager