28116 sujets

CSS et mise en forme, CSS3

Positionnement d'un bouton

Salut,

Je suis en train de faire un nouveau site pour aider les élèves dans l'apprentissage des langues vivantes.

J'utilise CSS pour permettre à chaque élève de choisir son style (c'est plus amusant). Tout allait bien, mais je rencontre un problème. J'ai besoin de centrer un bouton qui se trouve dans une table, exemple:
<table class="tbl_form' width="500">
<tr><td><input type="Button" value="Valider" class="btn_valid" /></td></tr>
</table>


Ici, le bouton est par défaut aligné à gauche. Si j'essaye:
.btn_valid {
text-align:center;
}


C'est le texte à l'intérieur du bouton qui devient centré, mais pas le bouton lui-même. Si j'utilise:

.btn_valid {
position:relative;
left:50%;
}


Le bouton se déplace, mais il se retrouve trop à droite, car la position 50% est relative au bord gauche du bouton...

Existe-t-il une solution plus propre? Je peux utiliser les proprietés after et before de CSS, mais IE sera incapable de l'iterpreter. Je peux utiliser <td align="center">, mais ce n'est plus du CSS. En effet, ça sera une solution, pas c'est pas très galant... Si jamais après je décide de faire des alignements à gauche, faudrait réecrire toutes les pages.

Bref, j'ai besoin de l'aide.

Merci
Modifié par Digimag (17 Sep 2005 - 17:16)
Bonjour,

Essaye de mettre ta class btn_valid sur ton <tr>
<table class="tbl_form' width="500">
  <tr class="btn_valid">
    <td>
      <input type="Button" value="Valider"  />
    </td>
  </tr>
</table>


JP
Merci pour ta réponse tibrus,

Effectivement j'aurais pu le mettre sur la balise <tr> ou <td>, mais certaines proprietées ne seront plus applicables. Je cherche vraiment une solution de le faire dans la partie CSS, pas ailleurs. Voici quelques extraits de ma feuille CSS:
.tbl_form
{
border-style:solid;
border-width:1px;
border-color:black;
/* border-collapse:collapse; */
}

.tbl_form td
{
padding:1px;
border-style:dotted;
border-width:1px;
border-color:black;
}

.btn_valid
{
color:black;
border-style:ridge;
border-width:2px;
border-color:blue;
}

.btn_valid:hover
{
color:red;
border-style:outset;
}

.btn_valid:active
{
color:green;
padding-left:4px;
padding-right:2px;
padding-top:4px;
padding-bottom:2px;
border-style:inset;
}


La table utilise la classe tbl_form, le bouton btn_valid.

Il est tout à fait possible qu'aucune autre façon de procéder n'existe, mais le fait de pouvoir mettre l'attribut left:50% me laisse ésperer de trouver une solution.
Alors en essayant comme cela

<table class="tbl_form' width="500">
  <tr class="centrer">
    <td><input type="Button" value="Valider" class="btn_valid" /></td>
  </tr>
</table>

.centrer {text-align: center;}

Et biensur en retirant les éventuelles options que tu as mis dans btn_valid pour aligner le bouton

JP
Modifié par tibrus (17 Sep 2005 - 21:34)
Bonjour,

Si tu souhaites tout gérer au niveau de la classe du bouton lui-même, il te faut par exemple utiliser la technique des marges négatives, et donc forcer la taille de ton bouton (on a rien sans rien).

Tu lui donnes donc une taille de disons 80px et tu lui appliques une marge à gauche de -40px (la moitié), à ajouter à ton positionnement "relative" et ton "left:50%".

OK ?
Bien le bonjour,

Alors voila le petit test du matin que je viens de faire
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Essai</title>
</head>
<body>
<table class="tbl_form" width="500">
	<tr class="centrer">
		<td><input type="Button" value="Valider" class="btn_valid" /></td>
	</tr>
</table>
</body>
</html>

style.css
/* mise en page globale */

body {
margin: 0;
padding: 0;
background: white;
color: black;
font-size: 80%;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, serif;
}

.centrer
{ text-align: center;}

.tbl_form
{
border-style:solid;
border-width:1px;
border-color:black;
/* border-collapse:collapse; */
}

.tbl_form td
{
padding:1px;
border-style:dotted;
border-width:1px;
border-color:black;
}

.btn_valid
{
color:black;
border-style:ridge;
border-width:2px;
border-color:blue;
}

.btn_valid:hover
{
color:red;
border-style:outset;
}

.btn_valid:active
{
color:green;
padding-left:4px;
padding-right:2px;
padding-top:4px;
padding-bottom:2px;
border-style:inset;
}

C'est juste l'affichage d'un bouton dans une table.
Pour moi sous IE cela fonctionne

As-toi d'essayer maintenant

JP
Tibrus,

Merci pour ta participation. Il n'y aucun doute, ta méthode marchera.. Mais je suis trop exigeant, je souhaite que la position soit gerée uniquement au niveau du CSS [i]du bouton[/b]. J'ai bien pu mettre la balise <center>, appliquer le style CSS sur la balise <td>, ou même <tr>, mais la question est comment gérer cette position au niveau du style du bouton. Je sais centrer, mais je cherche une méthode alternative, qui sera meilleure à mon goût.

Nilpohc a écrit :
Si tu souhaites tout gérer au niveau de la classe du bouton lui-même, il te faut par exemple utiliser la technique des marges négatives, et donc forcer la taille de ton bouton (on a rien sans rien).

Tu lui donnes donc une taille de disons 80px et tu lui appliques une marge à gauche de -40px (la moitié), à ajouter à ton positionnement "relative" et ton "left:50%".

OK ?
OK.

Là c'est exactement ce que je cherche. Je crois que je pourrais le faire avec la technique des marges négatives. Excellente idée, Nilpohc. Je t'en remercie. Si on n'avait pas à forcer la taille d'un bouton ça sera encore plus cool, mais déjà c'est très bien.
Bonjour,

C'est amusant: CSS a ouvert un tel espace de créativité qu'on en vient à lui demander tout... et le contraire de ce que CSS sait bien faire dans le cadre des implémentations actuelles Smiley cligne

Digimag a écrit :
la question est comment gérer cette position au niveau du style du bouton. Je sais centrer, mais je cherche une méthode alternative, qui sera meilleure à mon goût.


Un bouton étant un élément en ligne, son centrage évident passe par text-align: center sur son conteneur de niveau bloc (la cellule de tableau)

Un centrage bidouillé aura toutes chances d'être problématique dans un navigateur ou un autre, pour un utilisateur ou un autre. Exemple: un input {display:block; margin: auto;} ne centrera pas dans IE Windows faute d'implémentation... les marges négatives obligent à dimensionner le bouton, et poseront des problèmes de rognage (et donc d'accessibilité) dans certaines combinaisons d'agrandissement des caractères, etc.

C'est sans doute un peu frustrant.
Modifié par Laurent Denis (18 Sep 2005 - 12:50)
D'accord sur le fond Laurent, mais si seul le bouton doit être centré dans la cellule, on ne peut pas faire porter le centrage sur le conteneur, sans quoi tout va être centré. Je pense que tout dépend du cahier des charges de départ, même si - tu as raison - il ne faut pas faire n'importe quoi pour arriver à ses fins.

Smiley smile
Je ne vois pas en quoi mon exemple te "dérange".
Hormis le fait et je l'ai compris aussi que tu veuilles gérer cela au niveau du bouton.
Tu n'appliques la classe "Centrer" que sur l'éléement qui contiendra ton bouton.
Ce qui fait que ton bouton aura ces propriétés et il se possitionnera ensuite dans son conteneur ou tu auras appliqué l'alignement.

Perso, je pense que c'est la plus simple des solutions bienentendu jusqu'a preuve du contraire

JP
Sujet clos
Aller à