Rechercher : dans
Par :

Css 2 images pour le même background en hover

Dernière réponse le 8 fév 2009 à 22:18:07 Bramz, le 4 fév 2009 à 14:04:18 
 Signaler ce message aux modérateurs

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??

http://e-uapv.univ-avignon.fr/mod/resource/view.php?id=52861­

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

Configuration: Windows XP
Firefox 2.0.0.20

Meilleures réponses pour « Css 2 images pour le même background en hover » dans :
[Photofiltre]Réaliser un assemblage de 2 images VoirPhotofiltre est un logiciel de retouche d'image. Cette astuce fonctionne aussi bien avec Photofiltre qu'avec Photofiltre Studio Dans ce cas précis, Photofiltre va permettre d'assembler un collage c'est-à-dire de coller une deuxième image (en...
Création d'image Système (Ghost) VoirCréer une image (ghost) de partition 1 - Intérêt 2 - Pré-requis 2.1 - Explication 2.2 - Opportunités des partitions 2.3 - Mise à jour des images 2.3.1 - Image incrémentale : intéressant mais dangereux ! 2.3.2 - Image incrémentale et...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...

1

NookZ, le 4 fév 2009 à 14:08:23

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

Répondre à NookZ

2

Bramz, le 4 fév 2009 à 16:33:54

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

Répondre à Bramz

3

 Bramz, le 8 fév 2009 à 22:18:07

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-to­p:5px;
padding-right:10px;padding-left:10px;padding-bottom:1px;back­ground-color:#90bade }

#here{background-color:#2586D7;border-bottom:1px solid;
padding-top:5px;
padding-right:10px;padding-left:10px;padding-bottom:1px;marg­in-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;
}

Répondre à Bramz