[CSS]Problème de positionnement avec div

**Tueur_a_gage** · 24/10/2005, 15h03

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 :

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

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 :

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

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

1
2
3
span {
   display: inline;
}

**Tueur_a_gage** · 24/10/2005, 15h04

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

**francis m** · 24/10/2005, 17h22

déjà remplace comme suit :

Code :

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

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

**Tueur_a_gage** · 24/10/2005, 17h31

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

**francis m** · 24/10/2005, 19h59

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)

**Tueur_a_gage** · 25/10/2005, 09h11

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

**Tueur_a_gage** · 25/10/2005, 09h39

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 :

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

**franculo_caoulene** · 25/10/2005, 12h27

Salut,

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

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