-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 €
1399 €
Voir le deal
CCCrush.
::
Espace invités
::
Intruders
::
Réalisés
Bloc Hover
Error
Ven 8 Avr - 1:35
Salutation ! Comment allez vous ?
Je viens vous déranger un peu ... Je ne sais pas si ma demande fais partis des templates ou non, donc si vous ne pouvais pas, c'est pas grave ^^"
Largeur maximale :
Environ 173px
Hauteur maximale :
Environ 207px
Schéma :
https://nsa37.casimages.com/img/2016/04/08/160408013816467793.png
Éléments :
En fait, quand on passe la souris sur un grade, le grade "s'allume" et un carré blanc transparent s'ouvre et laisse s'afficher la description du justement, grade.
Ce bloc sera placé sur toutes les pages en haut à droite si possible.
Images :
https://nsa37.casimages.com/img/2016/04/08/160408014143739070.png
https://nsa37.casimages.com/img/2016/04/08/160408014143973816.png
https://nsa37.casimages.com/img/2016/04/08/160408014143305968.png
https://nsa38.casimages.com/img/2016/04/08/160408014141500249.png
https://nsa37.casimages.com/img/2016/04/08/160408014143410496.png
https://nsa37.casimages.com/img/2016/04/08/160408014141275079.png
https://nsa38.casimages.com/img/2016/04/08/160408014140781388.png
https://nsa38.casimages.com/img/2016/04/08/160408014141895531.png
Animations :
Petit cadre blanc transparent qui s'ouvre avec la description.
Informations supplémentaires :
Je ne sais absolument pas si cela est possible ou non, si ce n'est pas la cas, j'en suis EXTRÊMEMENT désolée...
Merci beaucoup !
Skaemp
Lun 11 Avr - 0:17
Bonsoir,
I. Créer une nouvelle iframe
Code:
<meta charset="UTF-8"><style type="text/css">#GROUPS {width:283px;}
.GROUPS {position:fixed; right:0; width:173px; height:207px; background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143739070.png); line-height:16px;}
/* FOND & COULEUR DES DESCRIPTIONS */
.GROUPS div p{background:rgba(250,250,250,0.5); color:black; font-size:10px; text-align:justify;}
/* MAITRE DE GUILDE */
.maitre {height:30px;}
.maitre p{position:absolute; margin-top:0px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.maitre:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143973816.png);}
.maitre:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* SERPENTS */
.serpents {height:30px;}
.serpents p{position:absolute; margin-top:-30px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.serpents:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143305968.png); background-position:0 -30px;}
.serpents:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* CROCS */
.crocs {height:30px;}
.crocs p{position:absolute; margin-top:-60px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.crocs:hover {background:url(http://nsa38.casimages.com/img/2016/04/08/160408014141500249.png); background-position:0 -60px;}
.crocs:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* NOMADE */
.nomade {height:30px;}
.nomade p{position:absolute; margin-top:-90px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.nomade:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014143410496.png); background-position:0 -90px;}
.nomade:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* 2EME CERCLE */
.IIcercle {height:30px; }
.IIcercle p{position:absolute; margin-top:-120px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.IIcercle:hover {background:url(http://nsa37.casimages.com/img/2016/04/08/160408014141275079.png); background-position:0 -120px;}
.IIcercle:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* IER CERCLE */
.ICERCLE {height:30px;}
.ICERCLE p{position:absolute; margin-top:-150px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.ICERCLE:hover {background:url(http://nsa38.casimages.com/img/2016/04/08/160408014140781388.png); background-position:0 -150px;}
.ICERCLE:hover p{transform:scale(1); -webkit-transform:scale(1);}
/* INITIE */
.initie {height:27px;}
.initie p{position:absolute; margin-top:-180px; margin-left:-110px; width:100px; height:197px; padding:5px; transform:scale(0); -webkit-transform:scale(0);}
.initie:hover {background:url(http://nsa38.casimages.com/img/2016/04/08/160408014141895531.png); background-position:0 -180px;}
.initie:hover p{transform:scale(1); -webkit-transform:scale(1);}
</style>
<div id="GROUPS"><div class="GROUPS"><!-- MAITRE DE GUILDE --><div class="maitre"><p>Description</p></div><!-- LES SERPENTS --><div class="serpents"><p>Description</p></div><!-- LES CROCS --><div class="crocs"><p>Description</p></div><!-- NOMADE --><div class="nomade"><p>Description</p></div><!-- 2EME CERCLE --><div class="IIcercle"><p>Description</p></div><!-- IER CERCLE --><div class="ICERCLE"><p>Description</p></div><!-- INITIE --><div class="initie"><p>Description</p></div></div></div>
II. Modifier l'iframe en conséquence
[ Lien ]
et placer son code à la ligne 3 du template overall_header avant le head :
Code:
<iframe id="GROUPSIT" src="lien" scrolling="no" style="width:285px; height:210px;" marginwidth="0" marginheight="0" frameborder="0"></iframe>
Partie CSS :
Code:
#GROUPSIT {
position:fixed; right:0;
}
Error
Mar 12 Avr - 0:18
ooooh ! je n'avais pas vu votre réponse ! (enfin ça va, juste 24h après ...)
Je vous remercie énormément !
les nouveaux membres de la guilde, ou simple visiteur, pourrons voir les grades qu'on propose rapidement *-*
Merci énormément (encore une fois)
Contenu sponsorisé
Page
1
sur
1
Vous
ne pouvez pas
répondre aux sujets dans ce forum