Transition d'image: problème affichage

[thaom melcrudak]

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

[thaom melcrudak]

petit up

[demeter1]

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>

[thaom melcrudak]

Ç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

[Chacha]

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 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