Des boutons de mêmes grandeurs

ooops ! voilà qui confirme mon ignorance dans ce domaine...

/*construction du bouton*/

.bouton
{
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    position:relative;
    float:left;
    margin:0 8px 0 8px;
    border-radius:7px;
    font-size: 0.85em;
    width:250; /*donne la largeur du bouton sinon en automatique mais pas de marge */
    color:#000;
    font-family: Comic Sans MS, Arial, sans-serif;
}

/*un beau dégradé partant d'une couleur claire à une couleur plus sombre que nous affectons à l'état du bouton initial mais
 également à l'état actif.*/
 
.bouton.bleu, .bouton.bleu:active
 {
 	background: #555;
    background: linear-gradient( #6699FF, #99FFFF);
    background: -webkit-linear-gradient( #6699FF, #99FFFF);
    background: -moz-linear-gradient( #6699FF, #99FFFF);
    background: -ms-linear-gradient( #6699FF, #99FFFF);
    background: -o-linear-gradient( #6699FF, #99FFFF);
    background: linear-gradient( #6699FF, #99FFFF);
}

/*on les ombre */

.bouton.bleu
{
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

.bouton.bleu:hover
{
	background: #555;
    background: -webkit-linear-gradient( #99FFFF, #6699FF);
    background: -moz-linear-gradient( #99FFFF, #6699FF);
    background: -ms-linear-gradient( #99FFFF, #6699FF);
    background: -o-linear-gradient( #99FFFF, #6699FF);
    background: linear-gradient( #99FFFF, #6699FF);
}

.bouton.bleu:active
{
box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}

/*bouton vert*/

 .bouton.vert, .bouton.vert:active
 {
 	background: #91BD09;
    background: linear-gradient( #91BD09, #33CC99);
    background: -webkit-linear-gradient( #91BD09, #33CC99);
    background: -moz-linear-gradient( #91BD09, #33CC99);
    background: -ms-linear-gradient( #91BD09, #33CC99);
    background: -o-linear-gradient( #91BD09, #33CC99);
    background: linear-gradient( #91BD09, #33CC99);
}

/*on les ombre */

.bouton.vert
{
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

.bouton.vert:hover
{
	background: #555;
    background: -webkit-linear-gradient( #33FF99, #66FF66);
    background: -moz-linear-gradient( #33FF99, #66FF66);
    background: -ms-linear-gradient( #33FF99, #66FF66);
    background: -o-linear-gradient( #33FF99, #66FF66);
    background: linear-gradient( #33FF99, #66FF66);
}

.bouton.vert:active
{
box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}

/*bouton marron*/

 .bouton.marron, .bouton.marron:active
 {
    background: #F28F22;
    background: linear-gradient( #F28F22, #FF6633);
    background: -webkit-linear-gradient( #F28F22, #FF6633);
    background: -moz-linear-gradient( #F28F22, #FF6633);
    background: -ms-linear-gradient( #F28F22, #FF6633);
    background: -o-linear-gradient( #F28F22, #FF6633);
    background: linear-gradient( #F28F22, #FF6633);
}

/*on les ombre */

.bouton.marron
{
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

.bouton.marron:hover
{
    background: #555;
    background: -webkit-linear-gradient( #FF9966, #FFCC99);
    background: -moz-linear-gradient( #FF9966, #FFCC99);
    background: -ms-linear-gradient( #FF9966, #FFCC99);
    background: -o-linear-gradient( #FF9966, #FFCC99);
    background: linear-gradient( #FF9966, #FFCC99);
}

.bouton.marron:active
{
box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}

/*bouton violet*/

 .bouton.violet, .bouton.violet:active
 {
    background: #D34F8E;
    background: linear-gradient( #D34F8E, #CC99FF);
    background: -webkit-linear-gradient( #D34F8E, #CC99FF);
    background: -moz-linear-gradient( #D34F8E, #CC99FF);
    background: -ms-linear-gradient( #D34F8E, #CC99FF);
    background: -o-linear-gradient( #D34F8E, #CC99FF);
    background: linear-gradient( #D34F8E, #CC99FF);
}

/*on les ombre */

.bouton.violet
{
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

.bouton.violet:hover
{
    background: #555;
    background: -webkit-linear-gradient( #FFCC99, #FFCCFF);
    background: -moz-linear-gradient( #FFCC99, #FFCCFF);
    background: -ms-linear-gradient( #FFCC99, #FFCCFF);
    background: -o-linear-gradient( #FFCC99, #FFCCFF);
    background: linear-gradient( #FFCC99, #FFCCFF);
}

.bouton.violet:active
{
box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}

dans ma page index, dans "head", j'ai deux appels de css, chacun dans son menu.
<link rel="stylesheet" type="text/css" href="bouton/style.css" />
<link rel="StyleSheet" type="text/css" href="menu/style.css" />


et plus bas dans "body", j'ai mis ceci pour avoir mes boutons.

<br><a href="page1.htm" class="bouton bleu">Le C D B</a>

<br><br><a href="page2.htm" class="bouton vert">Inscription </a>

<br><br><a href="page3.htm" class="bouton marron">Photos</a>

et ces 3 boutons, prennent la grandeur du nom intérieur, hors j'aimerai qu'ils aient tous les 3 la même grandeur.

J'ai dû oublier quelque chose, c'est certain...
ou est-ce le fait qu'il y a un autre code css ?
merci pour votre aide

Salut,


En effet tu as oublié quelque chose

width:250; /*donne la largeur du bouton sinon en automatique mais pas de marge */

Tu as oublié l'unité, (px) après le 250 ;)

bon sang ! que je suis abrutie... A force de regarder, je ne vois plus rien ! quelle couillon je suis !
merci grand merci.

Quelques petites erreurs :
- En HTML5, la balise BR s'écrit

<br />

, l'oublier peut créer des erreurs de lecture de balises par le navigateur.
- tu as effectivement oublié de préciser l'unité du width. Il faut la préciser, peu importe laquelle. De manière générale: en programmation, il ne faut pas d'imprécision.

Pour info :
Tu utilises une assignation multiple de classes :

<balise class="attribut1 attribut2" />

Ce n'est pas faux, mais sache que les anciens IE ne reconnaissent pas cette formulation. Donc il serait peut-être astucieux de trouver un code pour "traduire" ça pour les anciens navigateurs, ou bien de proposer à l'internaute de mettre son navigateur à jour si la page détecte un navigateur obsolète.

Myuline Annatar, merci pour ton commentaire, ok pour les <br />, mais trouver un code pour "traduire" ou demander aux visiteurs de mettre à jour leur navigateur... euh... je ne sais pas faire, ça !
trop contente d'avoir réussi mes petites pages.
ok, apprendre c'est progresser, mais trop débutante pour ça...
certes, je vais chercher sur d'autres pages ou forums, peut-être quelqu'un aura poser cette question, sinon tant pis...
re-merci pour vos réponses