28172 sujets

CSS et mise en forme, CSS3

Afficher

Bonjour,

tu peux te servir de cet exemple :
sur l'excellent Css Wizardry

et plutôt qu'afficher une pop-up, tu peux mettre en forme un bloc que tu fais simplement apparaïtre par-dessus ton image au survol.

bonne continuation !
Parce qu'en l'occurrence il se sert de
:after{
	content:attr(title);
}

pour afficher une boite type pop-up ( tooltip, pour infobulle ).

Tu peux - plus simplement - afficher ton attribut titre en blanc sur un fond noir.
Sam Soul a écrit :
Autre chose, le code que tu m'as donné Vincent ne fonctionne pas sous IE

Il devrait fonctionner tel quel sous IE9, et fonctionner aussi sous IE8 avec un correctif html5shiv. Par contre ça risque de pas super bien marcher sur IE7 (à voir).
Sam Soul a écrit :
Non cette technique ne marche pas sous IE 8.

Cf. la partie en gras:
fvsch a écrit :
Il devrait fonctionner (...) aussi sous IE8 avec un correctif html5shiv.

Modifié par fvsch (02 Dec 2011 - 16:57)
Sam Soul a écrit :
EDIT : ok j'ai trouvé ce correctif, mais le rendu n'est pas du tout le même concernant le fond.

C'est le opacity:.5 qui n'est pas supporté par IE8. Soit tu passes par une image de fond en PNG pour avoir un fond translucide, soit tu gardes l'opacité à 1 (100%) dans IE8 et tant pis.

Sam Soul a écrit :
Par contre je rencontre un gros bug sous FF, il y a une marge d'environ 40px qui se crée autour de l'image

C'est pas un bug, c'est un style par défaut pour l'élément FIGURE (en accord avec la spécification HTML5). Tu peux déclarer un margin:0 si tu veux.

Sinon, j'ai fait une version qui n'utilise pas d'éléments HTML5:
http://jsfiddle.net/hecmV/8/
Ça passe tel quel dans IE8 (en dehors du support de l'opacité), et dans IE7 ça marche presque mais le display:inline-block est ignoré (on pourrait éventuellement utiliser float:left à la place, mais ça aura des conséquences...).
Modifié par fvsch (02 Dec 2011 - 17:16)
Sujet clos
Aller à