Des boutons de mêmes grandeurs

ytzmi -  
 Utilisateur anonyme -
Bonjour,
j'ai monté mon script css pour faire de "jolis" boutons.

j'ai fait des essais, sur une page blanche où il n'avait que mes boutons.
contente, tous mes boutons avaient la même grandeur.

du coup, je recopie mon script sur ma page index qui est déjà "pleine" et là, mes boutons prennent la grandeur du lien inscrit et cela ne fait pas beau...

où est mon erreur, j'ai beau chercher, je ne trouve pas.

dois-je inscrire le script ici ? pour que vous puissiez m'aider ?

merci




1 réponse

Réponse 1 / 1
Utilisateur anonyme
 
Bonjour. Oui, donne-nous ton code css (ce qui n'est pas un script par ailleurs) en utilisant la balise 
<code css></ code>
(sans l'espace après le slash).
0
ytzmi
 
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
0
Ysabe_l Messages postés 12717 Date d'inscription   Statut Contributeur Dernière intervention   277
 
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 ;)
0
ytzmi
 
bon sang ! que je suis abrutie... A force de regarder, je ne vois plus rien ! quelle couillon je suis !
merci grand merci.
0
Utilisateur anonyme
 
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.
0
ytzmi
 
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
0

Discussions similaires

Le bon coin, pas de bouton "acheter" mais "faire une offre"
HYPERSENSIBLE -
matouvegas -

21 réponses
Plus de bouton naviguer vers sur Google Maps
bidounet84 -
Pascal -

32 réponses
Leboncoin faire une offre inferieur au rix d'achat
matt_5861 -
Droopy-76 -

5 réponses
[Steam] le bouton acheter n'est pas là pour SMB
Joanne04 -
joanne04 -

4 réponses
[Souris] Bouton latéral ne fonctionne plus
DARK_ECNELIS -
AgentMulder -

1 réponse