Bonjour,
J'ai remarque un probleme que je n'arrive pas a comprendre dans mon CSS, lorsque je fais:
et que je mets un float:left sur le lien et un float:right sur l'image et l'input, tout fonctionne bien (a part que l'image est a gauche de l'input et non a droite). Mais lorsque je fais:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <div id="tete_down"> <a id="bouton_menu" href="#">Menu</a> <input type="text" name="rechercher" id="rechercher" value="rechercher" /><a href="#"> <img src="./images/recherche.jpg" alt="icone recherche" id="img_rechercher" /></a> </div>
avec:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <div id="tete_down"> <span class="align_left"> <a id="bouton_menu" href="#">Menu</a> </span> <span class="align_right"> <input type="text" name="rechercher" id="rechercher" value="rechercher" /><a href="#"> <img src="./images/recherche.jpg" alt="icone recherche" id="img_rechercher" /></a> </span> </div>
Monn input et mon image ne sont plus ni colles, ni alignes, et j'ai des bugs d'alignement qui apparaissent sur les balises suivantes...
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52 #tete_down { height: 18px; width: 798px; margin: auto; padding: 1px; border: 1px solid black; background-color: rgba(11,24,193,1); } #tete_down .align_left { float: left; clear: left; } #tete_down .align_left a#bouton_menu { color: rgba(255,255,255,1); font-weight: bold; text-decoration: none; } #tete_down .align_left #bouton_menu:hover { color: rgba(255,255,255,1); text-decoration: underline; font-weight: bold; } #tete_down .align_right { float: right; clear:right; } #tete_down #rechercher { height: 18px; font-size:12px; padding:0; margin:0; border:0; } #tete_down #img_rechercher { height: 18px; width: 18px; margin:0; border:0; }
Pourquoi ces balises span dégradent mon design ? Comment les utiliser correctement ?
Merci beaucoup pour l'aide !
Partager