Discussion :

[rieppe]

Bonjour,

Je suis un peu débutant en style, donc je voudrais des conseils avisés

Je voudrais faire ca :

Mais j'obtiens ca :

Il s'agit en fait de deux listes qui s'echangent leurs "options" grace aux deux boutons situés au milieu, mais ca c'est un autre problème qui dailleurs ne m'en pose pas ^_^

Et que bien sur mes marges a gauche comme a droite soient les mêmes.
J'ai donc pensé utiliser margin:auto. Comme cela :

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
/* Div contenant tous les autres */
#conteneur {
	border: 1px solid;
	width: 300px;
	text-align: center; /* Pour centrer sous IE */
}
 
/* Div du haut (sorte de titre ) */
#contenuhaut {
	width: 280px;
	font-size: 1em;
}
 
/* Div le plus a droite et le plus a gauche */
#contenubord {
	width: 95px;
	margin-left:auto;
	margin-right:auto;
	float: left;
}
 
/* Div du milieu */
#contenumilieu {
	width: 15px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 35px;
	float: left;
}

Le fait est que les marges ne s'adaptent pas automatiquement comme je voudrais qu'elles le fassent

Mon code html est le suivant à l'endroit en question :

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
<div id="conteneur">
	<div id="contenuhaut">Bla bla</div>
	<div id="contenubord">
		<select class="InputFormSansTaille" style="height:120px; width:90px;" name="ListeBUModificationDispos" multiple>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
	<div id="contenumilieu">
		<button class="InputFormSansTaille" style="width:14px;" onClick="Transferer(document.forms['ModificationInfos'].elements['ListeBUModificationDispos'],document.forms['ModificationInfos'].elements['ListeBUModificationSelect']); return false;">></button><br>
		<button class="InputFormSansTaille" style="width:14px; margin-top:2px;" onClick="Transferer(document.forms['ModificationInfos'].elements['ListeBUModificationSelect'],document.forms['ModificationInfos'].elements['ListeBUModificationDispos']); return false;"><</button>
	</div>
	<div id="contenubord">
		<select class="InputFormSansTaille" style="height:120px; width:90px;" name="ListeBUModificationSelect" multiple>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</div>

[ythierrin]

Hello, j'ai modifié dans le css ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#contenudroite {
	width: 95px;
	margin-left:auto;
	margin-right:30px;
	float: right;
}
#contenugauche {
	width: 95px;
	margin-left:30px;
	margin-right:auto;
	float: left;
}

afin de séparer les div de droite et gauche et j'obtiens un assez bon résultat.

A+

[rieppe]

Salut,

Merci pour ta réponse les bords gauche et droit sont bien centrés comme il faut maintenant.

Par contre celui du milieu s'aligne sur la gauche sans aucune raison apparente.

EDIT: le problème ne se voit que sous FFox.

[Sancho_54]

Je te propose de mettre tes <div> contenubord (les deux) et contenumilieu ds un même div ou tu mes dedans <div align="center">

voila après dis moi si c'est bon

[rieppe]

J'ai testé le <div align="center"></div> contenant mes trois div, mais le problème persiste.

La seule solution que j'ai trouvé est de fixer les tailles des marges left et right du div du milieu, mais ca induit que la mise en page ne sera pas totalement adaptable à toutes les situations.

EDIT: C'est finalement pas très génant je met me sujet en résolu mais si quelqu'un a des idées qu'il en fasse part svp