28172 sujets

CSS et mise en forme, CSS3

Background Image ne s'affiche pas!

Bonjour, j'aurais besoin d'aide concernant une image en arrière plan qui ne s'affiche pas.

Mon code xhtml :

<a href="menu.php"><div class="bouton_informations"></div></a>


Le CSS associé :


.bouton_informations{
float: right;
margin-top:8px;
background-image: url(images/bouton_informations.png);
width:90px;
height:25px;
}

.bouton_informations:hover{
float: right;
margin-top:8px;
background-image: url(images/bouton_informations_hover.png);
width:90px;
height:25px;
}


Au passage de la souris, je souhaitais aussi qu'une autre image s'affiche, cependant cela ne marche pas non plus.

Merci de votre aide! Smiley smile
J'aurais souhaité affiché en lien l'image en fait, y' a il une autre solution que de placer une div ?
Salut Darked,

Il n'y a pas de raison que ton code, tel que tu nous l'as donné, ne fonctionne pas. Il faut chercher ailleurs :
1) le chemin d'accès aux images (images/bouton_informations.png) est peut-être mauvais
2) d'autres propriétés CSS sur ta page entrent peut-être en conflit avec celles que tu nous as données (et sans voir la totalité de ton code on ne peut pas t'aider...).

a écrit :
J'aurais souhaité affiché en lien l'image en fait, y' a il une autre solution que de placer une div ?
L'utilisation d'une div n'est pas mauvaise en soi. Ce que voulait dire BeliG, c'est que tu ne dois pas mettre une <div> dans un <a>, mais plutôt l'inverse.

Une dernière chose : les styles pour le survol (:hover) ne doivent spécifier que les différences avec le style normal. Il est donc inutile d'y répéter float, margin, width et height puisque ils ne changent pas.
Modifié par marcv (09 Apr 2009 - 10:02)
Un élément de type bloc ne peut être contenu dans en élément de type en-ligne (Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne). Tu peux par contre utiliser la balise <span>.

Au passage, la pseudo-classe :hover ne fonctionne que sur le <a> sous IE6.

Apparement tu veux juste faire un rollover là ? Alors pourquoi ne pas faire tout simplement :
<a href="menu.php" class="bouton_informations">Lien</a>
a.bouton_informations {
display:block;
background:transparent url(images/bouton_informations.png) no-repeat;
width:90px;
height:25px; }

a.bouton_informations:hover {
background-image:url(images/bouton_informations_hover.png); }

Je pourrais voir cette image ? Je pense avoir d'autres remarques à te faire.
Ok, pour réaliser cet effet tu n'as absolument pas besoin d'image. Smiley langue 

<a href="#" class="bouton_informations">+ informations</a>
a.bouton_informations {
display:block; /*pour pouvoir fixer une largeur et une hauteur*/
width:90px; /*largeur du bouton*/
height:25px; /*hauteur du bouton*/
line-height:25px; /*centrage vertical*/
text-align:center; /*centrage horizontal*/
color:#333; /*couleur du lien au repos*/
background-color:green; /*couleur d'arrière-plan (à remplacer)*/}

a.bouton_informations:hover {
color:#fff; /*couleur du lien au survol*/}

Modifié par BeliG (09 Apr 2009 - 10:51)
Sujet clos
Aller à