Sujets similaires

Sujet: [Résolu] Effet slide sur les sous-forums. Sam 26 Jan 2013, 19:25

Bonsoir,
Aujourd'hui, j'ai voulu faire fort -_- J'ai utilisé le tutoriel proposé par Christa' pour placer les liens des sous-forums en colonne, à côté de la description des sous-forums. Jusque là, tout va bien. Et j'ai voulu ensuite installer un effet slide avec une image qui disparaît au passage de la souris pour révéler les liens. Et là tout cafouille. J'ai beau chercher, je ne comprend pas ce qui ne colle pas. Enfin je pense que ca vient de ma façon dont j'ai défini les divisions mais je n'en suis pas certaine.

Le bout de code dans le template :

Code:: <div class="BlocForum">
<div class="genmed DescForum">
<div>{catrow.forumrow.FORUM_DESC}</div>
</div>

<div class="cadreliens">
<div class="imgliens">
<img src="http://img11.hostingpics.net/pics/532821teg.png" />
</div>

<div class="gensmall ListeSousForums">
<div class="descriptionliens">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</div>
</div>
</div>

Le Css en question

Code:: /*-----------------------Effet slide sous forums---------------------*/
.cadreliens { /* Encadrement global des 2 divs */
position:relative;
height:110px;
overflow:hidden; /* Permet de cacher ce qui dépasse */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-goog-ms-border-radius: 20px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
-khtml-border-shadow: 0px 0px 4px #000000;
-goog-ms-border-shadow: 0px 0px 4px #000000;
-o-border-shadow: 0px 0px 4px #000000;
}

.imgliens {
background-color:#232620; /* le bg de la div qui contient l'image */
position:absolute; /* Laissez comme ceci */
top:0;/* Laissez comme ceci */
left:0;/* Laissez comme ceci */
width:100%;/* Laissez comme ceci */
height:100%;/* Laissez comme ceci */
z-index:1;/* La position par rapport à l'autre div qui contient les infos */
-webkit-transition:all 0.8s;/* Laissez comme ceci */
-moz-transition:all 0.8s;/* Laissez comme ceci */
-o-transition:all 0.8s;/* Laissez comme ceci */
-ms-transition:all 0.8s;/* Laissez comme ceci */
transition:all 0.8s;/* Laissez comme ceci */
-khtml-transition:all 0.8s;/* Laissez comme ceci */

}

.cadreliens:hover > .imgliens {
margin-bottom:110px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.descriptionliens {
background:#232620; /* le bg de la div qui contient les infos*/
position:absolute;/* Laissez comme ceci */
top:0;/* Laissez comme ceci */
left:0;/* Laissez comme ceci */
width:100%;/* Laissez comme ceci */
height:100%;/* Laissez comme ceci */
z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */
text-align:center;

-webkit-transition:all 0.5s;/* Laissez comme ceci */
-moz-transition:all 0.5s;/* Laissez comme ceci */
-o-transition:all 0.5s;/* Laissez comme ceci */
-ms-transition:all 0.5s;/* Laissez comme ceci */
transition:all 0.5s;/* Laissez comme ceci */
-khtml-transition:all 0.8s;/* Laissez comme ceci */
}

.cadreliens:hover > .ListeSousForums {
opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}
/*-----------------------FIN slide sous forums---------------------*/

Et le forum-test :
http://cavenecadas.forums-actifs.net/

Sujet: Re: [Résolu] Effet slide sur les sous-forums. Lun 28 Jan 2013, 05:46

Bonjour Abysse Smile

Sans rentrer dans le détail, je reviendrais déjà sur le principe de base de la transition (parce-que ta structure ne m'a pas l'air mauvaise en soit).

Quand tu défini dans ton CSS la lignetransition:all 0.8s; tu indique que tout changement de propriété (all) s'effectuera en 0.8s.
Ton bloc est positionné de manière absolu. Partant de là, le faire bouger consiste à jouer avec les propriétés top et left (voire bottom et right selon les besoins). Il n'y a donc pas de raison, d'une part, de faire intervenir un margin-bottom, d'autant plus que cette propriété n'est pas explicitement définie dans l'état par défaut (donc de ce point de vue, c'est risqué).

Le mieux serait donc de commencer par définir une nouvelle valeur de top au :hover (le sélecteur m'a l'air bon).

Deuxième point, le dernier sélecteur en revanche ne m'a pas l'air bon : .cadreliens:hover > .ListeSousForums (à mon avis, il s'agit plutôt de .descriptionliens).
Même réflexion pour le margin-left du coup Smile

Enfin, juste un détail en passant, tu peux décemment remplacer tes :

Code:: -moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-goog-ms-border-radius: 20px;

Par un simple border-radius: 20px; (pour cette propriété, plus besoin d'utiliser les préfixes de nos jours).
Même réflexion pour les : lien vers un article récent expliquant mes dires (EN).

Sujet: Re: [Résolu] Effet slide sur les sous-forums. Mar 29 Jan 2013, 10:27

Bonjour,

Pour utiliser cet effet de slide, j'avais repris et ré-adapté le tutoriel servant à cacher les informations du profil derrière l'avatar (comme sur css-actif). Le déplacement au survol était bien défini avec une marge.
Oh et j'ignorais qu'on avait plus besoin des sélecteurs, par contre, merci beaucoup pour cette info =)

Bref, j'ai rectifié selon tes conseils. Ca marche beaucoup mieux ! J'ai un souci encore, cependant : l'image bouge bien au survol mais elle ne révèle pas les liens. Enfin ils ne sont pas visibles. J'utilise en ce moment une connexion internet sous proxy avec un max de filtre, je me demande si le problème ne vient pas de là.
Enfin, est-ce que vous arrivez à voir les liens au survol ? http://cavenecadas.forums-actifs.net/

Sujet: Re: [Résolu] Effet slide sur les sous-forums. Mar 29 Jan 2013, 10:33

Abysse Yclette a écrit:: Bonjour,

Pour utiliser cet effet de slide, j'avais repris et ré-adapté le tutoriel servant à cacher les informations du profil derrière l'avatar (comme sur css-actif). Le déplacement au survol était bien défini avec une marge.
Oh et j'ignorais qu'on avait plus besoin des sélecteurs, par contre, merci beaucoup pour cette info =)

Si tu as le lien du tutoriel je veux bien y jeter un oeil (s'il a été refondu on ira re-faire une correction, sinon on s'occupera de sa refonte).

Et il s'agit de préfixes plus exactement (petit pinaillage, un sélecteur c'est le truc avant les accolades) Smile

Abysse Yclette a écrit:: Bref, j'ai rectifié selon tes conseils. Ca marche beaucoup mieux ! J'ai un souci encore, cependant : l'image bouge bien au survol mais elle ne révèle pas les liens. Enfin ils ne sont pas visibles. J'utilise en ce moment une connexion internet sous proxy avec un max de filtre, je me demande si le problème ne vient pas de là.
Enfin, est-ce que vous arrivez à voir les liens au survol ? http://cavenecadas.forums-actifs.net/

Pas de problème de proxy ne t'en fais pas (d'ailleurs y'aurait pas de raison que ça te pose problème).

Le problème de tes liens qui n'apparaissent pas c'est tout simplement... qu'il n'y a pas de lien (j'viens de vérifier dans le code source, c'est vide). C'est donc un problème avec la variable (l'as-tu sorti d'une boucle ? modifié quelque chose ?).

Plus simplement : peux-tu me donner ton template complet ? Histoire que je check ce qui ne va pas parce-que visiblement, elle ne renvoie rien ta variable Smile

Bonjour !
Merci pour l'info. J'en apprend tous les jours XD
Hum ce qui est étrange, c'est que les liens ne sont pas visibles mais qu'ils sont bien là. Lorsqu'on passe la souris dessus, ca dirige bien vers les adresses souhaitées et l'info sur les sous forums apparaît dans un cadre o.o

Voici mon template complet :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<br> <td class="gensmall" align="center" valign="bottom">
<div class="lieens">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> ♦
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> ♦

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
</td>
</tr>

</table>


<div class="sidebar_top">{catrow.tablehead.L_FORUM}</div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"></th>
</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
      <h{catrow.cathead.LEVEL} class="hierarchy">
         <span class="cattitle">
            <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
         </span>
      </h{catrow.cathead.LEVEL}>
   </td>
   <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>


<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   

   <td class="row1 over" colspan="2" valign="top" width="100%" height="50">
      <h{catrow.forumrow.LEVEL} class="hierarchy">
         <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>

<div class="BlocForum">
<div class="genmed DescForum">
<div>{catrow.forumrow.FORUM_DESC}</div>
</div>

<div class="cadreliens">
<div class="imgliens">
<img src="http://img11.hostingpics.net/pics/532821teg.png" />
</div>

<div class="gensmall ListeSousForums">
<div class="descriptionliens">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</div>
</div>
</div>

<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

</span>

   </td>


<td class="row3 over" align="center" valign="middle" width="90">
<div class="imgnew">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<div class="kael_last_post"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
<div class="sujetsmess">
<span class="gensmall">{catrow.forumrow.TOPICS} sujets</span> | <span class="gensmall">{catrow.forumrow.POSTS} messages</span>
</div>
</td>


   
   <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
   
</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table>
<img src="http://img15.hostingpics.net/pics/923580bott.png"/>
<img src="{SPACER}" alt="" height="5" width="1" />

Petit double post pour dire que j'abandonne finalement l'idée. Je ne tiens pas à surcharger inutilement mon forum, autant rester sobre x) Merci pour l'aide apportée.

Donc, je classe...
Merci Abysse d'avoir indiqué "résolu". Very Happy

[Résolu] Effet slide sur les sous-forums.

[Résolu] Effet slide sur les sous-forums.

Sujets similaires

Sujets similaires

Partenaires Or