C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Vos partenaires dans le footer
Sam 10 Nov 2018, 09:39 par FredR

» Mettre votre © Copyright dans le footer de votre forum
Sam 10 Nov 2018, 09:25 par FredR

» Effet pour vos sous-forums
Sam 10 Nov 2018, 06:13 par FredR

» Pour faire des beaux titres de sous-forums
Sam 10 Nov 2018, 05:55 par FredR

» Bouton ''Sélectionner le contenu'', pour les codes
Sam 10 Nov 2018, 05:41 par FredR

» Modifier l'apparence du titre des topics
Sam 10 Nov 2018, 05:28 par FredR

» Début d'un sujet/Fond pour sujet important
Sam 10 Nov 2018, 02:45 par FredR

» Previsualiser le premier message d'un sujet
Ven 09 Nov 2018, 12:49 par FredR


Partagez | 
 

Problème avec un bloc coulissant [RESOLU]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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:
<!-- END tablehead -->
  <!-- BEGIN cathead -->
  
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  
 <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>

  <!-- END forumrow -->
  <!-- BEGIN catfoot -->

Merci beaucoup d'avance ♥


Dernière édition par Nye-Hael le Mer 18 Fév 2015, 11:56, édité 3 fois
MessageSujet: Problème avec un bloc coulissant [RESOLU]   Mar 10 Fév 2015, 05:55
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 (^-^)


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mer 11 Fév 2015, 12:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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...
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mer 11 Fév 2015, 15:55
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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.


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mer 11 Fév 2015, 19:33
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Jeu 12 Fév 2015, 12:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Ven 13 Fév 2015, 14:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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;
}
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Ven 13 Fév 2015, 17:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Ven 13 Fév 2015, 20:03
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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.
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Sam 14 Fév 2015, 08:00
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mar 17 Fév 2015, 14:41
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mar 17 Fév 2015, 18:24
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Je crois que j'ai compris... XD

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



Il faut bien la mettre sur .description :p


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mer 18 Fév 2015, 08:58
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 100



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 ! ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Mer 18 Fév 2015, 11:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2852



*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 :/



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Jeu 26 Fév 2015, 06:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



* incrustation de réponse ninja What a Face *

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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Jeu 26 Fév 2015, 19:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2852



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



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Dim 01 Mar 2015, 12:24
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   Dim 01 Mar 2015, 18:49
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Problème avec un bloc coulissant [RESOLU]   
Revenir en haut Aller en bas
 

Problème avec un bloc coulissant [RESOLU]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème avec un bloc coulissant [RESOLU]
» [/résolu] problème avec java à l'instalation :-/
» Problème avec Java
» [Résolu] problème avec avira
» Problème avec décodeur Tv

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit