Placer un "bloc" derrière un autre

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

Résolu Placer un "bloc" derrière un autre

Message par malice23 le Sam 16 Juin 2012 - 22:15

Bonjour bonjour Smile

Je suis actuellement en guerre contre ma page d'accueil (comme à chaque fois que je souhaite la changer), et je viens demander humblement l'aide des soldats de ForumActifs.

Voici ma situation :
J'ai déjà créé un bloc principal, avec quelques infos. Ce que je souhaite faire, c'est ajouter sur le côté droit de ce bloc les boutons de mes partenaires, à moitié cachés par ce bloc principal, qui se décalent sur la droite pour se montrer au passage de la souris.
J'ai déjà les codes pour faire décaler les boutons, là n'est pas le problème.
Ce que je cherche c'est comme faire passer mon bloc partenaires derrière le bloc principal. J'ai pour le moment un bloc qui passe devant.


J'ai déjà essayé la propriété z-index pour faire passer derrière, impossible de la faire fonctionner.


L'un d'entre vous peut-il m'aider ? Smile

Mon forum de tests.

Edit : Après reflexion, je pense que mon deuxième soucis est du même acabit.
Je cherche à placer un texte derrière l'image qui se décale pour laisser place au vide (pour le moment) mais je ne sais pas comment m'y prendre. Une petite idée ? Very Happy
HTML
Code:
<table cellpadding="0" cellspacing="0" border="none" style="width: 400px; "><tr>
   <td style="max-width:200px; height:60px; white-space: nowrap; overflow:hidden;">
      <img src="http://i.imgur.com/3RLYc.png" id="Staff_Gauche" style="float:center;" align="right" />
   </td>
   <td align="right" style="max-width:200px; height:60px; white-space: nowrap; overflow:hidden;">
      <img src="http://i.imgur.com/cP9S3.png" id="Staff_Droite" style="float:center;" align="left" />
   </td>
</tr></table>

CSS
Code:
#Staff_Droite {
  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#Staff_Droite:hover {
  top: 0px;
  margin-left: 190px;
}

#Staff_Gauche {
  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#Staff_Gauche:hover {
  top: 0px;
  margin-left: -190px;
}

Edit 2 : Désolée, c'est bon, j'ai résolu mon problème toute seule. Juste un problème avec la propriété "position". Il fait mettre "relative" et non "static".
Il me reste tout de même mon second problème : comment mettre un texte derrière mon image ? :


Même si cela paraît évident, ces codes ne sont pas là pour être repris pour vos forums. J'ai mis beaucoup de temps à me renseigner et à faire fonctionner ces codes, alors s'il vous plait, respectez mon travail.


Dernière édition par malice23 le Dim 17 Juin 2012 - 16:35, édité 1 fois

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Placer un "bloc" derrière un autre

Message par NatureSauvage le Dim 17 Juin 2012 - 12:07

Bonjour =)

Donc pour le deuxième problème, avec le texte derrière les images.
Prenons l'exemple de celle de droite, ce sera pareil pour la gauche.
Ligne 6, il faut que tu rajoutes avant l'image :
Code:
<span class="ce_que_tu_veux">Ton texte</span>

Dans le CSS :
Code:
.ce_que_tu_veux {
position: relative;
z-index: 1;
}

#Staff_Droite {
position: relative;
z-index: 2;
margin-left: - largeur_de_ton_span px;

  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

Normalement ça devrait aller. =)

Ou alors, peut-être plus simple :
Tu donnes une id à ton td ligne 5 - pareil mais pas la même id pour l'autre td.
Puis, avant l'image, ligne 6, tu rajoutes un span ainsi :
Code:
<span>Ton texte</span> <img src="http://i.imgur.com/cP9S3.png" id="Staff_Droite" style="float:center;" align="left" />

Dans le CSS :
Code:
#id_du_td span {
display: none;
}

#id_du_td:hover #Staff_Droite {
top: 0px;
  margin-left: 190px;
}

#id_du_td:hover span {
display: inline;
}

Il me semble que c'est correct. =)

NatureSauvage
***

Messages : 164
Inscrit(e) le : 08/04/2012

http://naturesauvage.forumactif.com/
NatureSauvage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un "bloc" derrière un autre

Message par malice23 le Dim 17 Juin 2012 - 16:35

Bonjour =) Merci de votre réponse !!

J'ai essayé ce que vous m'avez proposé, mais ça n'a pas marché. J'ai quand même essayé d'arranger un peu, et je suis finalement arrivée mes fins ♥
Bon, faut dire que j'ai pas mal bidouillé, mais tant que ça marche !
Pour le code HTML :
Code:
<table><tr>
   <td style="max-width:200px; max-height:60px; white-space: nowrap; overflow:hidden;" align="right">
      <div class="slide_D">
         <div class="slide_texte" >Texte à insérer sur la personne</div>
         <img src="http://i.imgur.com/cP9S3.png" style="float:center;" align="right" />
      </div>
   </td>
</tr></table>

Pour le CSS :
Code:
.slide_texte {
position: relative;
z-index: 1;
width: 200px; height: 60px;
font-size: 10px; text-align: center; texte-transform: lowercase; font-family: georgia; font-style: italic;
}

.slide_G img{
position: relative;
z-index: 2;
    margin-top: -60px; 
    top: 0px;
    right: 0px;
    transition: right 1500ms ease-in-out;
      -webkit-transition: right 1500ms ease;
      -moz-transition: right 1500ms ease;
      -ms-transition: right 1500ms ease;
      -o-transition: right 1500ms ease;
}

.slide_G img:hover {
  right: 210px;
}

.slide_D img{
  position: relative;
  z-index: 2;
  margin-top: -60px;
  top: 0px;
  left: 0px;
transition: left 3s ease-in-out;
-webkit-transition: left 1500ms ease;
-moz-transition: left 1500ms ease;
-ms-transition: left 1500ms ease;
-o-transition: left 1500ms ease;
}

.slide_D img:hover {
  left: 210px;
}

En tout cas, merci beaucoup, vous m'avez mise sur la voie Smile
Problème résolu.

malice23
***

Féminin
Messages : 112
Inscrit(e) le : 21/08/2010

http://www.malicetory.monalliance.net
malice23 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