Image coulissante

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image coulissante

Message par Cramby' le Mar 4 Mar 2014 - 13:50

Bonjour tout le monde !
Je reviens de nouveau vers vous pour un petit problème d'image coulissante laissant apparaitre un texte. Le problème est que le texte est bien présent, mais l'image n'apparait pas, on voit donc juste le texte qui est censé être sous l'image...
Voila le html :
Code:

<table><tr><td><div class="contenant"><div class="contenu">TEXTE DERRIERE L'IMAGE</div><img src="http://img105.imageshack.us/img105/4691/lunaqk2.png"/>
</div></td><td colspan=2><div class="contenant"><div class="contenu">TEXTE DERRIERE L'IMAGE</div><img src="http://img105.imageshack.us/img105/4691/lunaqk2.png"/></div></td></tr></table>
et le css:
Code:

        div.contenant {
            width:200px;  /*largeur du contenant, la meme que celle de l image*/
            height:320px; /*hauteur du contenant, la meme que celle de l image*/
            overflow: hidden;
        }
         div.contenu {
            width: 200px;  /*largeur du contenu, la meme que celle de l image*/
            height: 320px; /*hauteur du contenu, la meme que celle de l image*/
            overflow: auto;  /*pour apparition d une scroll bar si le texte est trop long*/
         }
        .contenant img {
            width:200px; /*largeur de l image*/
            height:320px;  /*hauteur de l image*/
            position: relative;  
           right: 200px; /*ici mettre la hauteur de l image*/
            transition: 0.5s;  /*pour l effet de transition*/
        }
        .contenant:hover img {  /*au survol de la souris sur le bloc*/
            bottom: 640px; /*ici mettre deux fois la hauteur de l image*/
            transition: 0.5s;  /*pour l effet de transition*/
        }

Merci d'avance ! I love you


Dernière édition par Cramby' le Mer 5 Mar 2014 - 13:46, édité 1 fois

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image coulissante

Message par MlleAlys le Mar 4 Mar 2014 - 19:34

effectivement, le positionnement de l'image n'est pas bon ^^
Voilà la façon dont se positionnent les objets sans css : http://i58.servimg.com/u/f58/12/56/43/35/conten10.jpg
Le contenant (en rouge) contient : le contenu et l'image juste en dessous. Puis on limite la taille du contenant, et on fait en sorte que ce qui dépasse n'est plus visible : l'image ne se voit pas. C'est pourquoi on utilise position:relative; dans le css pour la repositionner juste devant le contenu. Ici, on voit qu'il faut la remonter de 320px, c'est à dire mettre dans le css top:-320px; (valeur bien négative pour qu'elle remonte et non pas qu'elle descende Wink). Or dans votre code css, on trouve à la place right: 200px; ce qui décale l'image vers la gauche sans la remonter : elle est toujours invisible !

De même on passage de la souris sur le contenant, le code propose de décaler l'image encore plus vers le haut en changeant top:-320px; par deux fois la taille de l'image, c'est à dire : top:-640px;
On pourrait aussi déplacer l'image vers le bas en revenant à top:0px; plutôt que -640px, ou encore la déplacer vers la gauche ou la droite avec right ou left plutôt que top ^^

Bref, avec le même code html, un css correct pour ce que vous souhaitez pourrait être celui là :
Code:
div.contenant {
    width:200px;/*largeur du contenant, la meme que celle de l image*/
    height:320px;/*hauteur du contenant, la meme que celle de l image*/
    overflow: hidden;
}
div.contenu {
    width: 200px;/*largeur du contenu, la meme que celle de l image*/
    height: 320px;/*hauteur du contenu, la meme que celle de l image*/
    overflow: auto;/*pour apparition d une scroll bar si le texte est trop long*/
}
.contenant img {
    width:200px;/*largeur de l image*/
    height:320px;/*hauteur de l image*/
    position: relative;
    top: -320px;/*ici mettre la hauteur de l image en négatif*/
    transition: 0.5s;/*durée de l effet de transition*/
}
.contenant:hover img {/*au survol de la souris sur le bloc*/
    top: -640px;/*ici mettre deux fois la hauteur de l image en négatif pour un déplacement vers le haut*/
    transition: 0.5s;/*durée de l effet de transition*/
}

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image coulissante

Message par Cramby' le Mar 4 Mar 2014 - 21:37

C'est parfait, ça fonctionne, je vous remercie énormément !! Et merci pour le temps que vous avez sacrifier pour m'expliquer ! I love you

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image coulissante

Message par MlleAlys le Mar 4 Mar 2014 - 21:41

Ahah, c'est loin d'être un sacrifice ! Wink
N'oubliez pas de passer le sujet en résolu résolu en éditant votre premier message ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image coulissante

Message par Cramby' le Mer 5 Mar 2014 - 13:44

Voila qui est fait, encore merci I love you

Cramby'
****

Féminin
Messages : 279
Inscrit(e) le : 27/06/2012

http://amesvagabondes.forumactif.org
Cramby' a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum