[CSS]Problème de positionnement avec div

Version imprimable

Hello

je voudrais faire un bandeau au dessus d'un tableau avec à gauche un mini menu recherche et à droite 2 raccourcis.

Pour cela j'utilise les div (pas de tableau) et les span imbriqués.
Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div> <div class="recherche"> Recherche : <input type="text" name="recherche" maxlength="" size="20" value=""/> <input type="submit" value="Go" onclick="" class="button" /> </div> <div class="liens"> <span class="liens"><a href="MaListeAbonnement.html" class="liens">Mes thèmes</a></span> <span class="liens"><a href="#" class="liens" onclick="selectAll()">Tout</a></span>/ <span><a href="#" class="liens" onclick="unselectAll()">Aucun</a></span> </div> </div>
et mes css associés :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 div.liens { float:right; right:0px; display:inline; } div.recherche { float:left; left:0px; display:inline; } span.liens { right:0px; text-align: right; } span.recherche { left:0px; text-align: left; }
Le souci est que mes div restent désespéremment à gauche....
Si je supprime le display:inline dans mes div.xxx, le positionnement se fait bien mais mon bandeau est sur 2 lignes....

j'ai essayé de remplacer mes div par des span, de jouer sur les tailles des div avec des %, ..., ça change rien.

bref, j'ai l'impression que le fait d'utiliser le param display=inline dans les div supprime toute autre manipulation

Quelqu'un aurait-il des lumières à ce sujet ?

PS : j'ai aussi
Code:

1 2 3 span { display: inline; }

24/10/2005, 15h04
Tueur_a_gage

les paramètres float dans les css sont issus de mes derniers tests, c'est pas terrible non plus....

déjà remplace comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
.liens { 
   float:right; 
   right:0px; 
   display:inline; 
} 
 
.recherche { 
   float:left; 
   left:0px; 
   display:inline;

24/10/2005, 17h31
Tueur_a_gage

heu j'ai du mal à saisir l'intérêt ? surtout que j'ai span.liens, div.liens, a:link.liens, du coup je ne peux pas gérer séparemment...

bon j'ai essayer qd même, mais le résultat est le même, pas d'alignement à droite, voir pire, tout se mélange....
24/10/2005, 19h59
francis m

excuse j'ai été trop vite, ce n'est pas dans mes habitudes de mettre des classes spécifiques à des divs

j'ai re-regardé et je ne comprends pas : ai essayé chez moi et ton formulaire (j'aurais quand-même mis les balises <form> se trouve bien à gauche, tes liens se trouvent bien à droite

es-tu sûr de bien appeler la bonne page css ? et qu'elle est dans le bon chemin ?

je t'envoie une copie d'écran et le code des pages que j'ai créées si tu ne me crois pas... (les pages créées = la tienne avec les balises html head link et body en plus)
25/10/2005, 09h11
Tueur_a_gage

Effectivement, j'ai refait l'essai dans une page vierge, le pb vient d'ailleurs.... Je cherche et je tiens au courant.

Le pb est récurrent et semble bien venir d'une incompatibilité entre le display et le float.

Avec ce code ci-dessous, le bandeau recherche/lien ne se trouve pas sur la même ligne... le float des liens me les place bien à droite mais sur la ligne suivante, il se retrouve aligné avec ma balise div suivante, d'où un joyeux bordel dans ma page....

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {
	border: 1px dotted #ff0000;	
}
 
div.liens {
	float:right;
	margin-right: 2px;
	right:0px;
	display:inline;
}
 
div.recherche {
	margin-right: 2px;
	left:0px;
	display:inline;
}
 
span.liens {
	margin-left: 15px;
	margin-right: 5px;
}
 
span.recherche {
	margin-left: 15px;
	margin-right: 5px;
}
</style>
</head>
<body>
<div class="form">
	<form name="form1" method="post" action="">
		<div>
			<div class="recherche"> Recherche :
				<input type="text" name="recherche" maxlength="" size="20" value=""/>
				<input type="submit" value="Go" onclick="" class="button" />
			</div>
			<div class="liens"> <span class="liens"><a href="MaListeAbonnement.html" class="liens">Mes thèmes</a></span> <span class="liens"><a href="#" class="liens" onclick="selectAll()">Tout</a></span>/ <span><a href="#" class="liens" onclick="unselectAll()">Aucun</a></span> </div>
		</div>
		<div> essai</div>
		<div> essai</div>
		<div> essai</div>
		<div> essai</div>
	</form>
</div>
</body>
</html>

Salut,

Si tu dois afficher un tableau utilise les <table> sinon les listes (vu ton dernier exemple).

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {
   border: 1px dotted #ff0000;   
}
#recherche {
	float:left;
	left:0px; 
}	
ul {
	margin: 0px;
	padding: 0px;
	float:right;
   	right:0px; 
}
li {
	display: inline;
}
</style>
</head>
<body>
   <form name="form1" method="post" action="">
	<div id="recherche">
	Recherche :
            <input type="text" name="recherche" maxlength="" size="20" value=""/>
            <input type="submit" value="Go" onclick="" class="button" />
	</div>
         <ul>
		<li><a href="MaListeAbonnement.html" class="liens">Mes thèmes</a></li>
		<li><a href="#" class="liens" onclick="selectAll()">Tout</a></li>
		<li><a href="#" class="liens" onclick="unselectAll()">Aucun</a>
	</ul>
   </form>
</body>
</html>

25/10/2005, 18h16
Tueur_a_gage

bonne idée que les li, je n'y avais pas pensé....

par contre, j'ai toujours un pb de décalage d'une ligne pour mon bandeau.... argh ça me saoul....
25/10/2005, 18h58
franculo_caoulene

8O Aucun décalage sous Firefox et IE6
25/10/2005, 20h19
Tueur_a_gage

pas avec ce que tu m'a envoyé, mais une fois intégré dans le reste... la vérité est ailleurs.....
25/10/2005, 23h48
franculo_caoulene

un bout de code?