Un hover un peu compliqué

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

Résolu Un hover un peu compliqué

Message par MissLoeva le Mar 15 Jan 2013 - 19:17

Bonjour !

Je suis en train de faire les codes d’un design ( Hop ) et j’aimerais savoir comment mettre une image en hover sur le New/noNew. ( Je veux mettre celui-ci sur lenoNew à droite) J’ai essayé plusieurs façons qui fonctionnent habituellement pour un hover simple, mais je commence à me douter qu’il faille recourir aux templates. J’ai cherché partout pour un tuto à propos d’un hover sur les new/nonew sans succes, mais je sais que c’est possible, alors j’aimerais savoir si quelqu’un connait un Tuto ou pourrait m’expliquer la marche à suivre.

Ps : ne regardez pas les couleurs de mon design, certain éléments sont encore en construction ♥


Merci, cordialement,

MissLoeva



Dernière édition par MissLoeva le Jeu 17 Jan 2013 - 10:16, édité 1 fois

MissLoeva
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 08/01/2013

http://terra.forumpro.fr/
MissLoeva a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un hover un peu compliqué

Message par Roxy. le Mer 16 Jan 2013 - 14:48

Bonjour,

En effet vous allez devoir passer par les templates. Pour ce faire, allez dans le template index_box.
Cherchez ceci :
Code:
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

Et remplacez par :
Code:
<a class="info" href="#"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><span><img src="http://i48.tinypic.com/2af9wjp.png"/></span></a>

Puis validez. Dans votre css, placez ceci :
Code:
/*Infobulle catégorie*/
a.info{
position:relative;
z-index:24;
text-decoration:none
}
 
a.info:hover{
z-index:25;
background-color:#FFF
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
top:-100px;
left:-30px;
text-align: justify;
font-weight:none;
padding:1px;
}
/*FIN INFOBULLE*/
A vous de définir une valeur pour top et left dans a.info:hover span.

Cordialement,

Roxy.
# Tropactif #

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un hover un peu compliqué

Message par MissLoeva le Mer 16 Jan 2013 - 19:06

Bonjour,

Tout d’abord merci de ton attention ♥ Malheureusement ça n’a pas exactement marché, je crois que le problème vient du fait que mon Template est modifié ( C’est peu dire. En fait je l’ai totalement effacé et refait) .

Code:
<table><tr><td> <div class="boite1"> <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
 
  <div class="boite5"> <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div><div class="stats">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>  </div><div class="boite3"> <div class="stats_cate">{catrow.forumrow.TOPICS} sujets || {catrow.forumrow.POSTS} messages</div> </div></div></td>  <td><div class="boite2"><div class="boite4"><div class="lastpost">{catrow.forumrow.LAST_POST} </div><span class="genmed"><img class="Icone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"</img></div> </div></td></tr></table>

Peu importe comment je le positionne, la main ne veux pas se positionner correctement, ensuite…Bha, mon LAST_POST qui est par-dessus mon New/noNew se retrouver cacher ( ce qui n’est pas pratique. ).

Y Aurait-il moyen de le positionner de sorte à ce que tout soit visible, ou bien le fait que mon LAST_POST soit par-dessus empêche la chose ?

Cordialement,

MissLoeva

MissLoeva
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 08/01/2013

http://terra.forumpro.fr/
MissLoeva a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un hover un peu compliqué

Message par Roxy. le Mer 16 Jan 2013 - 20:17

Re,

Déjà il y a un problème dans votre code. La balise img est une balise simple or, vous en avez fait une double. Ce n'est pas comme en bbcode ! Wink De plus, une span est ouverte mais ne se referme pas (juste avant l'img) est-ce qu'elle se ferme plus loin ?

Pour l'image, voilà le code à utiliser :
Code:
<img class="Icone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/>
Normalement, si vous suivez mes informations ça devrait fonctionner.

Cordialement,

Roxy.
# Tropactif #

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un hover un peu compliqué

Message par MissLoeva le Mer 16 Jan 2013 - 20:45

Spoiler:
Merci de m’avoir répondu si rapidement ! J’ai réparer ce que vous m’avez pointé et mon image affiche parfaitement, merci !

Code:
<table><tr><td> <div class="boite1"> <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
 
  <div class="boite5"> <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div><div class="stats">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>  </div><div class="boite3"> <div class="stats_cate">{catrow.forumrow.TOPICS} sujets || {catrow.forumrow.POSTS} messages</div> </div></div></td>  <td><div class="boite2"><div class="boite4"><div class="lastpost">{catrow.forumrow.LAST_POST} </div> <a class="info" href="#"><img class="Icone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/><span><img src="http://i48.tinypic.com/23mknyh.png"/></span></a></div> </div></td></tr></table>

Il ne reste que le problème de ‘’ {catrow.forumrow.LAST_POST} ‘’. Celui-ci devrait afficher par-dessus de New/NoNew (il le faisait avant). Je devine que c’est à cause de la position en absolu, mais je ne sais pas du tout comment l’arranger.
Il y a moyen de faire passer un absolu avant un autre ? Ou bien de le prioriser par le template ?

Pardon si je demande beaucoup U__U!
Merci beaucoup, cordialement,

Miss Loeva

Eh bien ! J’ai un peu joué avec les codes et j’ai réussis à le faire comme il faut♥

Merci beaucoup pour l’aide !

MissLoeva
Nouveau membre

Féminin
Messages : 9
Inscrit(e) le : 08/01/2013

http://terra.forumpro.fr/
MissLoeva 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