IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Superpositions de div


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    146
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 146
    Par défaut Superpositions de div
    Bonsoir,

    J'ai un problème que je n'arrive pas à résoudre.

    Voici mon code original :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div class="global">
         <center>
              <img src="img1" />
              <img src="img2" />
              <img src="img3" />
         </center>
    </div>
    Ici, tout marche très bien, c'est simple et beau : les 3 images sont en "triangles" : 2 sont sur une ligne et l'autre sur la ligne au dessous, au milieu de la div, comme ça : (le cadre noir = div class "global") http://i.imgur.com/FcrMK.jpg

    Cependant, j'ai voulu faire un hover avec un effet de fade.
    J'ai suivi ce tutorial : http://bavotasan.com/2009/creating-a...r-fade-effect/

    Cependant, il utilise 1 seul image, et moi, j'en ai 3. Ce qui fait que les 3 images sont superposées.

    Voilà le code :


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="global">
         <center>
              <div style="position: relative;">
                   <img src="img1" style="position: absolute; z-index:4;"/>
                   <img src="img1-hover" style="position: absolute; z-index:3;"/>
              </div>
     
              <div style="position: relative;">
                   <img src="img2" style="position: absolute; z-index:4;"/>
                   <img src="img2-hover" style="position: absolute; z-index:3;"/>
              </div>
     
              <div style="position: relative;">
                   <img src="img3" style="position: absolute; z-index:4;" />
                   <img src="img3-hover" style="position: absolute; z-index:3;" />
              </div>
         </center>
    </div>
    L'effet a l'air de bien marcher mais toutes les images sont superposées les unes sur les autres...
    comment résoudre cela, sachant que je souhaite conserver l'alignement des images ("2 images sont sur une ligne et l'autre sur la ligne au dessous, au milieu de la div, comme ça : (le cadre noir = div class "global") http://i.imgur.com/FcrMK.jpg")

    Merci.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    il semblerait que ton problème relève plus de ton script javascript/jQuery que d'un problème de CSS.

  3. #3
    Inactif  
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    570
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Septembre 2003
    Messages : 570
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    il semblerait que ton problème relève plus de ton script javascript/jQuery que d'un problème de CSS.
    En effet, tu ne fait aucune distinction entre les div contenants chaque couple d'image. donne des id ou des classe et modifie ton javascript en fonction de ça

Discussions similaires

  1. superposition des div
    Par steinfield dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 16/01/2008, 11h27
  2. Superposition de div dans un tableau
    Par fitz182 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 24/10/2007, 22h22
  3. Superposition de div
    Par Ministar dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 11/09/2007, 15h45
  4. Problème de superposition de divs
    Par sylsau dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 21/10/2006, 12h41
  5. [CSS] superposition de div
    Par julien.63 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/06/2006, 15h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo