Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 - 18: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 - 9:16, édité 1 fois
avatar

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 - 13: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,
avatar

Roxy.
Membre habitué(e)

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 - 18: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
avatar

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 - 19: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,
avatar

Roxy.
Membre habitué(e)

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: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 !
avatar

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