28220 sujets

CSS et mise en forme, CSS3

Images réactive, c'est bien mais pourquoi ?

Bonjour,
J'ai lu l'article sur les images réactives, et il y a quelques choses que j'ai du mal a m'éxpliqué,

Code CSS :
a.image { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 100px; /* largeur de l'image réactive */
     height: 100px; /* hauteur de l'image réactive */
     background-image: url(image1.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(image2.gif); /* source de l'image d'arrivée */
     }

1/ Pourquoi il faut mettre la déclaration "a.image" en block ? ¿
2/ Peut être parceque c'est une balise en ligne ? ¿
3/ Pour la méthode avec préchargement intégré, sa me parait bizarre
#lien { /* "lien" sera notre conteneur, ici la balise div */
sa ne peux pas être une balise <div ....="lien"></div> mais id ?
4/ je ne comprend pas le raisonnement du tuto et l'exemple chez moi ne
marche pas (FF)

    #lien a:hover {	/* masquage de l'image1 au survol */
    background: transparent none;
     }

je ne me l'explique pas le masquage d'image ?
Merci
C'est simple, une balise A est de type inline, donc il faut le transformer en type bloc pour lui affecter un fond.

un DIV ne gère pas le :hover ( du moins sous IE Smiley lol ).

a.image signifie un selecteur affecté à un code HTML type :
<a href="..." class="image">...</a>

le "background: transparent" c'est juste pour supprimer le background.

Il existe des cas ou on a affecté un fond dans A et qu'on veux le supprimer dans le A:HOVER. C'est ton choix, rien ne t'en n'empêche.
Modifié par anthony (22 Mar 2005 - 12:50)
Administrateur
Sans vouloir être désagréable, je trouve que tu poses énormément de questions alors qu'il te manque cruellement les bases minimales de connaissances en CSS.

Connaître les éléments bloc et en-ligne, ainsi que leurs comportements et spécificités est un minimum à connaître... et c'est pourquoi tu trouveras un article à ce sujet dans la rubrique "Bases et indispensables".

Plutôt que de te ruer sur des tutoriels qui sont encore trop complexes pour toi, il vaudrait mieux (re)voir ces bases qui te font défaut.

Pour l'explication théorique du tutoriel : les deux images sont affichées dès le départ l'une au dessus de l'autre. En survolant le lien, celle qui se trouve au dessus devient transparente... et laisse donc apparaître celle en dessous.
Modifié par Raphael (22 Mar 2005 - 12:54)
Administrateur
xartotal a écrit :
par contre je ne comprend pas pourkoi ? les balises iline ne peuvent pas avoir de fond ?

Un élément sans dimension peut-il avoir un fond ?
En fait, en pratique (et en bidouillant avec les padding et les line-height), un élément en-ligne peut avoir un fond. Mais il est préférable de le passer en block.
Sujet clos
Aller à