.class & atributs

Bonjour,

Je cherche à rendre un DIV flottant sur le reste de la page. Il s'agit d'un zoom sur une photo qui s'ouvre dans un DIV au passage de la souris.

Le problème est que lors de l'ouverture de ce DIV Zoom, cela déplace les photos qui se trouve à coté.

Voici mon css :

.zoom {
height:auto;
margin:auto;

}
.zoom p {
text-align:fixed;
}
.zoom img {
width:50px;
height:50px;
}
.zoom img:hover {
width:200px;
height:200px;
}

Code récupéré, et je ne comprend pas ce que son ces "sous-classe" .zoom p ; .zoom img ... etc.

Merci beaucoup de votre aide et bonne année !

Bonjour,

reedbedroom a écrit :
Code récupéré, et je ne comprend pas ce que son ces "sous-classe" .zoom p ; .zoom img ... etc.

Il va falloir se documenter un peu pour comprendre ce que tu fais alors ^^

.zoom sélectionne les éléments html ayant la classe "zoom".

.zoom p sélectionne les paragraphes dans les éléments html ayant la classe "zoom".

.zoom img sélectionne les images dans les éléments html ayant la classe "zoom".

.zoom img:hover sélectionne les images lors du survol de la souris dans les éléments html ayant la classe "zoom".

Ok je me doutais un peu que c'était quelque chose comme ça mais je n'ai trouvé aucuns exemples semblable sur les sites CSS.

Et as tu la solution pour que les image OVER restent au dessus des autres sans les déplacer ?

Voici la page sur laquelle je travaille --> www.iwebu.com/fjpmedia/index.php?page=portfolio.php

Je pense que ma question sera plus claire en ayant la page sous les yeux.

Cordialement

Bonjour,

Tout d'abord, je ne peux te conseiller qu'une chose c'est d'apprendre les bases du html et CSS car ton site à une structure vraiment catastrophique. Sans reprendre et nettoyer ton code, tu n'arrivera jamais à avoir un rendu correct sur tous les navigateurs. Tu as deux doctypes dans ton document, deux balises html, body, head... Il faut déjà que tu corrige toutes ces aberrations html...

Si tu veux pouvoir gérer un empilement sans décalé tes éléments, il faut sortir ton image du flux donc utiliser un positionnement absolu.

Il faut donc que chacune de tes images se trouvent dans un <div> positionné en relatif (permet d'avoir un référentiel de positionnement pour tes images). Puis lors du survol de l'image tu place cette dernière en absolu. Elle ne décalera donc plus les autres images.
Modifié par Spacedementia (10 Jan 2011 - 19:06)