Transition d'image: problème affichage

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

Résolu Transition d'image: problème affichage

Message par thaom melcrudak le Jeu 3 Juil 2014 - 0:17

Bonsoir,

j'aimerais placer côte à côte 3 images qui dévoilent chacune un texte , cependant je n'arrive pas à les placer une à la suite de l'autre avec le code dont je dispose, elles se superposent lorsque je post le message. Évidemment je change le nom des <div class= pour chaque image et je répète le CSS. Voici donc le html et le css en question :

Code:
<div class="monBloc">
  <div class="blocVolet"></div>
  Un peu de contenu (caché par le blocVolet (qui peut contenir du texte))
</div>

Code:
/* Bloc principal */
.monBloc {
  position: relative; /* important ! */
  overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
  width: 250px; /* largeur du bloc */
  height: 150px; /* hauteur du bloc */
  background: red; /* couleur de fond */
}

/* Bloc de recouvrement */
.blocVolet {
  position: absolute; /* positionnement absolu (important) */
  top: 0; /* (important) */
  left: 0; /* (important) */
  width: 250px; /* largeur du bloc (identique au bloc principal) */
  height: 150px; /* hauteur du bloc (identique au bloc principal) */
  background-image: url();
  /* réglage de la transition */
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

merci de votre aide SadSmile

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition d'image: problème affichage

Message par thaom melcrudak le Jeu 3 Juil 2014 - 23:42

petit up Smile

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition d'image: problème affichage

Message par demeter1 le Jeu 3 Juil 2014 - 23:47

et en faisant un tableau à 3 colonnes ?????

Code:
<table style="width: 100%; border-collapse:collapse;">
   <tr>
      <td>contenu 1</td>
      <td>contenu 2</td>
      <td>contenu 3</td>
   </tr>
</table>

demeter1
+ Hyperactif +

Masculin
Messages : 8227
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition d'image: problème affichage

Message par thaom melcrudak le Ven 4 Juil 2014 - 1:43

Ça fonctionne, merci! Avoir sur que c'était aussi simple...xD C'est gentil à vous, je vais garder ce sujet ouvert encore quelques heures histoire de ne pas en ouvrir un nouveau si jamais j'ai d'autres questions en lien avec ceci Wink

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition d'image: problème affichage

Message par Chacha le Ven 11 Juil 2014 - 10:09

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 50956
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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