Css 2 images pour le même background en hover
Résolu
Bramz
-
Bramz Messages postés 29 Statut Membre -
Bramz Messages postés 29 Statut Membre -
Bonjour,
voilà j'ai un TP en conception internet où il faut faire quelque chose de dynamique sur les onglets et il ne me reste qu'un petit problème (voire un gros parce que j'ai beau cherché mais je n'y arrive pas) à résoudre :
a:hover span.lien{background:url(fond.gif) no-repeat;
background:url(fond2.gif) top right no-repeat ;
color:white;
margin-top:-5px;
padding-top:5px;
margin-right:-10px;
padding-right:10px;
margin-left:-10px;
padding-left:10px;
}
Le soucis c'est que je dois mettre 2 images pour un même background. Mais lorsque je fais ce qui est dit dans le TP, la deuxième image de fond est la seule image prise en compte dans mon background. Voilà la question :
Comment faire pour que les 2 images soient prises en compte dans le même back ground??
https://e-uapv2019.univ-avignon.fr
Ce lien vous permettra de comprendre ce que j'essaie de faire, la question du tp où je suis coincé se trouve tout en bas de la page et il me reste le dernier point à faire.
Merci d'avance pour vos réponses
voilà j'ai un TP en conception internet où il faut faire quelque chose de dynamique sur les onglets et il ne me reste qu'un petit problème (voire un gros parce que j'ai beau cherché mais je n'y arrive pas) à résoudre :
a:hover span.lien{background:url(fond.gif) no-repeat;
background:url(fond2.gif) top right no-repeat ;
color:white;
margin-top:-5px;
padding-top:5px;
margin-right:-10px;
padding-right:10px;
margin-left:-10px;
padding-left:10px;
}
Le soucis c'est que je dois mettre 2 images pour un même background. Mais lorsque je fais ce qui est dit dans le TP, la deuxième image de fond est la seule image prise en compte dans mon background. Voilà la question :
Comment faire pour que les 2 images soient prises en compte dans le même back ground??
https://e-uapv2019.univ-avignon.fr
Ce lien vous permettra de comprendre ce que j'essaie de faire, la question du tp où je suis coincé se trouve tout en bas de la page et il me reste le dernier point à faire.
Merci d'avance pour vos réponses
A voir également:
- Css 2 images pour le même background en hover
- Supercopier 2 - Télécharger - Gestion de fichiers
- Avoir 2 comptes whatsapp sur le même téléphone - Guide
- Des images - Guide
- Peut on avoir 2 comptes instagram sur le même téléphone - Guide
- 2 ecran pc - Guide
3 réponses
2 fois la même image ou deux images différentes
Ton lien n'est pas fonctionnel, il faut s'identifier pour y accéder. Tu peux recopier l'énoncé de la question à la place
Ton lien n'est pas fonctionnel, il faut s'identifier pour y accéder. Tu peux recopier l'énoncé de la question à la place
Le probleme c'est que le résultat montré n'est qu'une image, de plus j'ai réussi à obtenir cela en traffiquant les fonds mais je ne peux pas faire ça, ce n'est pas autorisé je pense donc je ne sais pas comment m'y prendre, si cetet manoeuvre est impossible, j'en parlerai au prof merci quand même
C'est bon j'ai trouvé la solution avec un pote voici le style css que l'on a fait pour aboutir au résultat :
nous avons bien les 2 arrondis sur le même onglet merci quand même d'avoir voulu m'aider.
a{
}
#menu ul{padding:1px
;border-bottom: 1px solid blue;
}
li{display:inline;list-style-type:none;margin:0px;padding-top:5px;
padding-right:10px;padding-left:10px;padding-bottom:1px;background-color:#90bade }
#here{background-color:#2586D7;border-bottom:1px solid;
padding-top:5px;
padding-right:10px;padding-left:10px;padding-bottom:1px;margin-right:1px;
}
a:hover{background:url(fond.gif) no-repeat;color:white;
padding-top:5px;margin-left:-10px;padding-left:10px;
}
a:hover span.lien{background:url(fond2.gif) top right no-repeat ;color:white;margin-top:-5px;
padding-top:5px;margin-right:-10px;padding-right:10px;
}
nous avons bien les 2 arrondis sur le même onglet merci quand même d'avoir voulu m'aider.
a{
}
#menu ul{padding:1px
;border-bottom: 1px solid blue;
}
li{display:inline;list-style-type:none;margin:0px;padding-top:5px;
padding-right:10px;padding-left:10px;padding-bottom:1px;background-color:#90bade }
#here{background-color:#2586D7;border-bottom:1px solid;
padding-top:5px;
padding-right:10px;padding-left:10px;padding-bottom:1px;margin-right:1px;
}
a:hover{background:url(fond.gif) no-repeat;color:white;
padding-top:5px;margin-left:-10px;padding-left:10px;
}
a:hover span.lien{background:url(fond2.gif) top right no-repeat ;color:white;margin-top:-5px;
padding-top:5px;margin-right:-10px;padding-right:10px;
}