Discussion :

[thierryG]

Bonjour
Je souhaite faire des boutons l'un à côté de l'autre
J'ai donc écrit ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="cadre600px">
		<div class="boutons">
			<div class="bouton" style="width:50%">
				<?php printf("<a href=\"#\" onClick=\"evaluation.scmd.value='%d'; evaluation.submit();\">%s</a>\n",SCMD_MODIF,"Valider");?>
			</div>
			<div class="bouton" style="float:none;">
				<a href="#">Annuler</a>
			</div>
		</div>
	</div>

avec le css suivant

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
 
.cadre600px
{
	width:600px;
}
.boutons
{
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
	float:none;
	clear:both;
	width:100%;
	display:block;
}
.bouton
{
	text-align:center;
	float:left;
 
	margin:0px;
	margin-top:5px;
	margin-left:2px;
	margin-right:2px;
	display:block;
}
.bouton a, .bouton a:visited
{
	background-color:#00CC00;
	border:#33CC00 outset thin;
	text-decoration:none;
	text-align:center;
	width:100%;
	display:block;
}
.bouton a:hover
{
	border:#33CC00 inset thin;
}

et voici ce que j'obtiens voir l'image jointe PBDiv.jpg

Comment se fait-il que le premier bouton soit décalé alors qu'ils devraient être alignés. De plus je n'arrive pas à créer un espace de 4 pixels entre les boutons.

merci

[Erwan31]

Bonjour,
que de complications.
Tu n'as pas d'espace entre tes boutons puisqu'un des bouton fait 100% de large.
En principe ce code devrait suffire (avec les propriétés raccourcis)

Code :

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

1
2
3
4
5
 
<div class="boutons">
    <a href="#"><?php printf("<a href=\"#\" onClick=\"evaluation.scmd.value='%d'; evaluation.submit();\">%s</a>\n",SCMD_MODIF,"Valider");?></a>
    <a href="#">Annuler</a>
</div>

Le bout de CSS ciblé

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
 
.boutons
{
        overflow:hidden;
	margin:10px 0;
	float:none;
	clear:both;
}
 
.boutons a
{
	float:left;
	margin:5px 2px 0;
        display:inline; /*bug IE6*/ 
	background:#0C0;
	border:#3C0 outset thin;
	text-align:center;
	text-decoration:none;
 
}
.boutons a:hover {
	border:#33CC00 inset thin;
}

Pourquoi un float:none sur .boutons?

[thierryG]

OK merci pour l'information. J'ai un peu de mal avec les div
J'ai ajouté dans le css de boutons, le paramètre text-align à center mais mes boutons ne sont pas alignés dans le cadre.
Je suis obligé de mettre un un div autour du div boutons? Pourtant a priori le texte qui est à l'intérieur devrait être centré?

[Erwan31]

Bonjour,
pour centrer le bloc boutons, tu dois utiliser des marges latérales auto, le
text-align ne centrera que les éléments inline (span, a..) et non de niveau bloc.
Or le float des tes liens les fait se comporter comme des éléments de niveau bloc.

Code :

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

1
2
3
4
5
6
.boutons
{
        overflow:hidden;
	margin:10px auto;
        width:...px;
}

Essayes avec ça, tout le reste est de trop à mon avis.
Pour centrer ton bloc tu dois le dimensionner.

[thierryG]

bon a priori je croyais avoir pigé le truc et j'ai décidé de l'appliquer à une autre mise en forme
Je veux un intitulé sur une largeur de 200px et à côté un élément de formulaire (input ou select)
L'idée étant d'avoir une présentation genre phpMyAdmin lorsque l'on met à jour plusieurs enregistrement de la base. Eux utilisent des tables.
J'ai donc essayé de mettre le texte dans un div de largeur 200px flotant à gauche le tout encapsulé dans un autre div.

Sauf qu'à la fin de la liste, je veux également placer mes fameux boutons. Et ils se positionnent à gauche de l'ensemble précédent. Je ne veux pas mettre de clear:both, car j'ai également un menu à gauche qui fait que les boutons se placent en dessous de la limite du menu dans ce cas. Pas top

J'ai également essayé de faire un display:inline, mais il est impossible de spécifier une largeur.

Bref je tourne en rond et je perds du temps.
Une petite aide sera vraiment bien venue.

Au pire aller je retourne vers des tables...

Merci