Sujets similaires

Bonjour !

Intéressée par ce tuto : http://www.css-actif.com/t13510-effet-de-volet-glissant-sur-un-bloc?highlight=volet+coulissant j'ai décidé d'essayer en l'installant pour mes sous-forums.
Jusqu'ici, tout fonctionne, à un détail près : mon volet coulissant est à des kilomètres de là où il devrait être et pas moyen de l'installer où je veux. Le margin le fait tout simplement disparaître, et quand il continue d'apparaître, l'effet coulissant ne fonctionne plus, et l'image ne bouge pas d'un pouce.

Voici la bête : http://i-m-radioactive.forumactif.org/

Et les codes de la bestiole :
CSS :

Code:: * Bloc principal */

.monBloc{
height: 180px;
left: 5px;
overflow: hidden;
position: relative;
top: 5px;
  width: 150px;
margin-left: -6px;
margin-top: -2px;}

/* Bloc de recouvrement */
.blocVolet {
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
height: 180px;
position: absolute;
  left: 0;
  top: 0;
transition: all .3s linear;
width: 150px;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  top: 180px;
}

Description du forum :

Code:: <div class="description">

<div class="descriptext">
   Située entre les chaînes de Svartalfheim et d'Angrboda, celle ville mystique n'ouvre ses portes qu'aux rares ayant quelque chose à raconter et à voir. Surplombant l'ensemble du monde, l'on dit que sa cité fut la plus belle, à l'égal de Muninn et sa jumelle Huginn, jusqu'à la Terrible Chute. Elle est la ville de l'espoir et des rêves, lieux où les hommes et les dieux forgèrent leurs biens les plus précieux.
</div>

</div>

<div class="monBloc">

<div style="background-image:URL('http://i38.servimg.com/u/f38/18/18/49/85/tt10.png');" class="blocVolet">

</div>

</div>

Et au cas où, le template :

Code:: 
  

  
  

<div class="forum">
   <table><tr><td><table><tr><td><div class="derstat2"><span class="forum_icone"><img class="icon" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
   <div class="stats2"> <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span><span class="last">{catrow.forumrow.LAST_POST}</span></div></div></td><td><div class="forumlink2" style="margin-bottom:-15px"><a class="forumlink2" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><br />
   <div style="background-color:grey"><span class="description">{catrow.forumrow.FORUM_DESC}</span></div></td><td><div class="monBloc"><div class="illustest1">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></td></tr></table>
   <div style="margin-left:3px"><div class="sousforum2"><div class="sousforum3"><div class="sousforum2:hover"></div></div></div></div></td><td></td></tr></table>

  <br />
  </div>

Merci beaucoup d'avance ♥

Hello hello Smile

Première petite indication (ou petit indice :p), je te conseille de rajouter une classe en plus ici :

Code:: <div class="monBloc">

<div style="background-image:URL('http://i38.servimg.com/u/f38/18/18/49/85/tt10.png');" class="blocVolet">

</div>

Par exemple comme ceci :

Code:: <div class="monBloc bloc-illu">

<div style="background-image:URL('http://i38.servimg.com/u/f38/18/18/49/85/tt10.png');" class="blocVolet">

</div>

Comme ça dans le CSS tu peux ensuite déplacer l'image avec ceci :

Code:: .bloc-illu {
position: absolute;
right: -100px;
left: auto;
top: -20px;
}

J'ai mis les valeurs au hasard, je précise Wink

Ensuite il y aura un petit problème de z-index ^-^
Il faut que tu mettes à .description un z-index de 1, et à ton titre (+ la zone staff) un z-index de 2 (^-^)

Hey !

Merci pour les indications :3 Je commence à y voir plus clair.
J'ai juste le problème de l'illustration qui s'installe derrière l'endroit où elle est censée aller, donc ma question est : comment régler ça ? XD
Et ensuite pour la "zone staff" j'ai du mal à visualiser où elle est...

Oups, j'ai écrit staff au lieu de stat... >-<

Nye-Hael a écrit:: J'ai juste le problème de l'illustration qui s'installe derrière l'endroit où elle est censée aller, donc ma question est : comment régler ça ? XD

En fait c'est ce que je voulais dire ici :

Nihil a écrit:: Il faut que tu mettes à .description un z-index de 1, et à ton titre (+ la zone stat) un z-index de 2 (^-^)

Dans ton CSS, .description a actuellement un z-index de 0. Il faut mettre 1 à la place.

Le problème c'est que du coup le titre et la zone stat des messages se retrouvent cachées derrières la description. Il faut leur mettre dans le CSS un z-index avec comme valeur 2.

Hm, c'est fait, mais l'illu de ma catégorie reste, eh bien, catégoriquement derrière le fond qu'elle est censée couvrir, et même en lui mettant un z-index de 2 ça ne change rien... owo

Hum, je ne vois pas la modification du CSS sur ton forum actuellement o:, pourrais tu la laisser en place s'il te plait (^-^) ?

Pas de souci !

Code:: /* TEST CATEGORIE DEBUT */

.forumlink2 {
text-align:left;
padding:5px;
font-family:Mistral;
font-size:26px;
background-color:transparent;
color: #e39893!important;
letter-spacing:-1px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
z-index:1;
position:relative;}

.description {
display: block;
width: 500px;
height: 115px;
background-color: #fef6cc;
margin-left:-14px;
margin-top:-14px;
z-index:1;
position:relative;
padding-left:8px;
padding-top:5px;
z-index: 1;
}

.descriptext{
display: block;
width: 465px;
height: 110px;
font-size: 12px;
padding:5px;
text-align: justify;
color: #000000; }

.stats_last{
display: block;
width: 140px;
margin: auto;
background-color: #ffecb5;
padding: 10px;
border: 1px dotted #;
-moz-box-shadow: 0px 0px 2px #000000;
box-shadow: 0px 0px 2px #000000;
-webkit-box-shadow: 0px 0px 2px #000000;
z-index: 2;}

.stats{
background-color: #ffffff;
display: block;
text-align: center;
font-size: 10px;
color: #000000;
font-weight: none;
border-bottom: 1px solid #;
padding-bottom: 4px;
margin-bottom: 4px;
margin-top: 5px;
z-index: 2;}

/* Bloc principal */

.monBloc{
height: 180px;
left: 5px;
overflow: hidden;
position: relative;
top: 5px;
width: 150px;
margin-left: -6px;
margin-top: -2px;}

/* Bloc de recouvrement */
.blocVolet {
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 3s linear;
-webkit-transition: all 1s linear;
height: 180px;
position: absolute;
left: 0;
top: 0;
transition: all 1s linear;
width: 150px;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
top: 180px;
}

.bloc-illu {
position: absolute;
right: -100px;
left: auto;
top: -20px;
z-index: 0;
}

Ow, je sais, il doit y avoir un problème de cache ! Cherche comment vider le cache puis actualise ta page (pour moi c'est CTRL + F5)

Chez moi le résultat est ceci : https://i.imgur.com/TJNF2ZE.png

Cache vidé (normalement) mais toujours aucun changement chez moi...
Edit : je n'ai rien dit XD apparemment mon navigateur veut un "temps d'adaptation" d'au moins 24h pour m'afficher les changements. Il s'agissait donc bien d'un problème de cache, et je n'ai donc plus qu'à remettre mes sous-forums là où ils doivent être.

Merci encore ! ♥
Si un problème se repointe, je reviendrai de toute façon XD

Edit 2 : en parlant de problème, en voilà un justement. Quand on règle à nouveau la place des sous-forums, l'image se remet derrière le fond qu'elle est censée masquer.

Hum... Sur mon ordi, même en ayant vidé le cache .description a toujours un z-index à 0, c'est pour ça qu'il est derrière les sous forums ><

J'ai mis un z-index de 2 à la case .description, mais toujours aucun changement, pas plus qu'avec le z-index de 1 qui était déjà installé xwx

Je crois que j'ai compris... XD

En fait le z-index, est sur .descriptext et non pas sur .description sur ton forum. Smile

Problème avec un bloc coulissant [RESOLU] Fbz5kXH

Il faut bien la mettre sur .description :p

C'est aussi sur description :

Code:: .description {
  display: block;
  width: 500px;
  height: 115px;
  background-color: #fef6cc;
  margin-left:-14px;
  margin-top:-14px;
  z-index:1;
  position:relative;
  padding-left:8px;
  padding-top:5px;
  z-index: 2;
}

Et ça ne change toujours rien .w."

Edit : problème réglé ! en fait c'était vraiment tout bête.
Merci encore ! ♥

*Passage ninja* Salut ! Idéalement, il faudrait éviter d'utiliser un style dans les éléments HTML @_@

C'est à dire que plutôt que ça :

Code:: <div class="monBloc">

   <div style="background-image:URL('http://i38.servimg.com/u/f38/18/18/49/85/tt10.png');" class="blocVolet">

   </div>

</div>

Ca aurait été plus propre de faire ça :

Code:: <div class="monBloc">
<div class="blocVolet fondVolet"></div>
</div>

Code:: .fondVolet { background-image:URL('http://i38.servimg.com/u/f38/18/18/49/85/tt10.png');}

Et il ne faudrait pas de marges dans les CSS, parce que le fonctionnement de ce code repose sur le positionnement :/

* incrustation de réponse ninja *

Totalement d'accord avec les remarques de 'Christa Smile

Après pour les classes, d'après ce que j'ai compris, il s'agit d'illustrations qui changent pour chaque forum.
Du coup je pense qu'il est tout de même bien plus simple de mettre le lien de l'illustration directement avec le html Smile

Sujet: Re: Problème avec un bloc coulissant [RESOLU] Dim 01 Mar 2015, 12:24

Pas spécialement. Il est techniquement plus rapide de changer une feuille de styles CSS avec la liste de toutes les images pour chaque forum, que d'aller à chaque fois dans la page d'édition d'un forum pour éditer ladite image, avec le risque de couper un bout de code qu'on ne comprend pas :/

Après, la simplicité est parfois ennemie de la praticité. C'est peut-être plus simple de "tout faire en même temps" mais au final on se retrouve souvent avec un code inextricable XD Et c'est encore pire si c'est un code qu'on a copié collé un peu partout sur le forum et qu'on veut mettre à jour (par exemple les fiches de personnage), c'est plus rapide d'éditer une feuille de styles que d'éditer cinquante posts différents :/

Sujet: Re: Problème avec un bloc coulissant [RESOLU] Dim 01 Mar 2015, 18:49

Tu as tout à fait raison, pour les grosses mises à jour la feuille CSS est bien plus rapide. Smile

Problème avec un bloc coulissant [RESOLU]

Problème avec un bloc coulissant [RESOLU]

Sujets similaires

Sujets similaires

Partenaires Or