Balises span qui cassent mon design [Résolu]

[student_php]

Bonjour,

J'ai remarque un probleme que je n'arrive pas a comprendre dans mon CSS, lorsque je fais:

Code :

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>

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 :

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>

avec:

Code :

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;
}

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...

Pourquoi ces balises span dégradent mon design ? Comment les utiliser correctement ?

Merci beaucoup pour l'aide !

[e-fitz]

Bonjour,

span est un élément inline et non pas block c'est pourquoi tu as un comportement étrange (je pense).

Utilise plutot des div quand tu veux mettre des float.

Bonne journée

[student_php]

Bonsoir,

J'ai remplace les span par des div et ca ne change rien au rendu.

Aussi, il me semble qu'on ne peut pas insérer directement du texte, des liens etc directement dans une div (normes W3C).

Merci tout de même pour la réponse !

[e-fitz]

Re bonjour, tu peux mettres directements des img et lien dans tes div cela passe avec un doctype xhtml strict dans le validateur du w3c.

Concernant ton problème, je viens de regarder le code de plus près,
en faite lorsque tu met un conteneur (qu'il soit div ou span) tes deux éléments input et image ne vont plus s'aligner à partir du div tete_down mais du div align_right, comme l'élément input text à un comportement par défaut en vertical-align:bottom alors ils ne sont plus aligné l'un l'autre.

Je ne suis pas sur d'être très clair.

[student_php]

Oui je vois ce que tu veux dire, j'ai procédé autrement, merci pour l'info !