[site web] problème affichage de bouton

antic80 Messages postés 4785 Date d'inscription   Statut Contributeur Dernière intervention   -  
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   -
bonjour a tous

voila j'ai un petit soucis avec des boutons que j'ai créer pour un site internet.

ces boutons sont crées avec du css comme ceci

code dans la feuille de style :

a.bouton2:link{
width:150px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-color:red;
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver}

a.bouton2:visited{
width:150px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-color:red;
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver}

a.bouton2:hover{
width:150px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
font-weight:bold;
background-color:red;
background-image:http:/127.0.0.1/spip/img/058.jpg;
padding:5px;
border-style:outset;
border-width:2px;
border-color:silver}

.bouton2{text-align:center;padding:5px;}

voici le code dans la page html

<p class="bouton2">
<a href="toto.html" class="bouton2">Nos services</a>
</p>
<p class="bouton2">
<a href="toto.html" class="bouton2">Nos interventions</a>
</p>
<p class="bouton2">
<a href="toto.html" class="bouton2">Votre sécurité</a>
</p>
<p class="bouton2">
<a href="toto.html" class="bouton2">Nos garanties</a>
</p>
<p class="bouton2">
<a href="toto.html" class="bouton2">Service après vente</a>
</p>
<p class="bouton2">
<a href="toto.html" class="bouton2">Nous contactez / Passez commande</a>
</p>


mon probleme est le suivant quand j'affiche la page pour la 1ere fois il ne m'affiche que les liens si je clique sur un lien il m'affiche alors tous les boutons correctement

pourquoi ???
A voir également:

6 réponses

Réponse 1 / 6
mandolino
 
Salut !!

J'ai quelques remarques à faire sur ton code :

- La balise <a> est de type inline, pour pouvoir la transformer(lui mettre une hauteur et une largeur), il faut utiliser la propriété 
display: block;

- Les propriétés de .bouton2:link et .bouton2:visited sont identiques, à moins que tu les modifies par la suite, cela ne sert pour l'instant à rien.

- Il est préférable d'utiliser un chemin relatif pour tes images, exemple : 
background-image: url(mon_image.jpg);


- Il est inutile de répéter toutes les propriétés de chaque état de la balise <a>, exemple : 
.bouton2:link{
display: block;
width:150px;
height:30px;
text-decoration: none;
color: white;
text-align: center;
font-weight: bold;
background-color: red;
padding: 5px;
border-style: outset;
border-width: 2px;
border-color: silver
}

.bouton2:hover{
color: red;
background-color: white;
}

Cela suffit amplement.

- Ce qui m'a le plus semblé bizarre, est que tu utilises la même classe pour tes balises <a> et <p>, cela me semble illogique, soit tu mets une classe pour chaque type de balise(<p> et <a>) : 
.texte{
}

.bouton2{
}

Et

<p class="texte">
  <a href="toto.html" class="bouton2">Nos services</a>
</p>

Ou encore une seule classe : 
.texte{
}

.texte a:link{
}

Et

<p class="texte">
  <a href="toto.html">Nos services</a>
</p>

Cela me semble plus logique.
Il ya encore d'autres manières de procéder.

@+
0
Réponse 2 / 6
antic80 Messages postés 4785 Date d'inscription   Statut Contributeur Dernière intervention   1 161
 
bonjour mandolino

ce code n'est pas de moi je l'ai pris sur un site qui propose justement la démarche pour créer des boutons css mais je vais essayer ta méthode et te dirais quoi

merci
0
Réponse 3 / 6
antic80 Messages postés 4785 Date d'inscription   Statut Contributeur Dernière intervention   1 161
 
alors voila j'ai essayé ta demarche mais tjs pareil

si on affiche la page il y a juste les liens

en passant sur le lien le bouton apparait et disparait

si on clique sur le lien on arrive a la page souhaité

si on fais précédent tous les boutons sont affichés
0
Réponse 4 / 6
mandolino
 
C'est bizarre ...

Tu es sous quel navigateur ?
Essaies après avoir vider le cache pour voir.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
AlexD
 
Juste un message pas très utile certes, mais juste pour remercier mandolino pour son info "La balise a est de type inline, et pour lui attribuer une taille et une largeur lui affecter => display: block;". Bref problème simple donc une info pas simple à trouver. :) Merci !
0
Réponse 6 / 6
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

As-tu vraiment modifié :
background-image:url(img/058.jpg);
?

0