Codage icones


RPG
 

Partagez|
Codage icones
Ven 29 Avr - 19:04
Codage icones

Je te donne tous les codes ici, si tu veux regarder par toi-même.

Donc j'ai mis ce code dans Templates - index_body

Code:
<div class="cou">
     <div id="Iconeimage1"></div>
   <div class="cou-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="chat">
     <div id="Iconeimage2"></div>
   <div class="chat-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="serp">
     <div id="Iconeimage3"></div>
   <div class="serp-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="colo">
     <div id="Iconeimage4"></div>
   <div class="colo-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="infi">
     <div id="Iconeimage5"></div>
   <div class="infi-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="psy">
     <div id="Iconeimage6"></div>
   <div class="psy-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="gar">
     <div id="Iconeimage7"></div>
   <div class="gar-hidden">
      LALALALALALALALA<br />
      <img src="" /><br />
      LILILILILILI
   </div>
</div>
<div class="med">
     <div id="Iconeimage8"></div>
   <div class="med-hidden">
      LALALALALALALALA<br />
     <img src="" /><br />
      LILILILILILI
   </div>
</div>  
 </div>

Dans le CSS, j'ai mis ça :

Code:
#Iconeimage1 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861095-couronne01.png);
width: 73px;
height: 72px;
position: relative;
top: -300px;
left: 20px;
}

#Iconeimage2 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861096-chat01.png);
background-repeat: no-repeat;
width: 56px;
height: 72px;
position: relative;
top: -373px;
left: 96px;
}

#Iconeimage3 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861097-serpent01.png);
background-repeat: no-repeat;
width: 55px;
height: 72px;
position: relative;
top: -446px;
left: 152px;
}

#Iconeimage4 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861095-colombe01.png);
background-repeat: no-repeat;
width: 38px;
height: 72px;
position: relative;
top: -514px;
left: 211px;
}

#Iconeimage5 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861096-infirmier01.png);
background-repeat: no-repeat;
width: 58px;
height: 72px;
position: relative;
top: -586px;
left: 250px;
}

#Iconeimage6 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861097-psychiatre01.png);
background-repeat: no-repeat;
width: 62px;
height: 66px;
position: relative;
top: -668px;
left: 313px;
}

#Iconeimage7 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861096-gardien01.png);
background-repeat: no-repeat;
width: 56px;
height: 72px;
position: relative;
top: -736px;
left: 378px;
}

#Iconeimage8 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861095-medecin01.png);
background-repeat: no-repeat;
width: 48px;
height: 72px;
position: relative;
top: -810px;
left: 436px;
}


.cou   {
   position: relative;
   cursor: pointer;
}
.cou .cou-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -450px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}
.cou:hover .cou-hidden {
   display: block;
}

.chat   {
   position: relative;
   cursor: pointer;
}
.chat .chat-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -522px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.chat:hover .chat-hidden {
   display: block;
}

.serp   {
   position: relative;
   cursor: pointer;
}
.serp .serp-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -594px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.serp:hover .serp-hidden {
   display: block;
}

.colo   {
   position: relative;
   cursor: pointer;
}
.colo .colo-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -666px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.colo:hover .colo-hidden {
   display: block;
}

.infi   {
   position: relative;
   cursor: pointer;
}
.infi .infi-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -738px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.infi:hover .infi-hidden {
   display: block;
}

.psy   {
   position: relative;
   cursor: pointer;
}
.psy .psy-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -810px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.psy:hover .psy-hidden {
   display: block;
}

.gar   {
   position: relative;
   cursor: pointer;
}
.gar .gar-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -876px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.gar:hover .gar-hidden {
   display: block;
}

.med   {
   position: relative;
   cursor: pointer;
}
.med .med-hidden {
   right:27px;
   display: none;
   position: absolute;
   top: -948px;
   left: 20px;
  
   font-family: georgia;
   border: 2px solid none;
   border-radius: 5px;
   background-color: red;
   width: 465px;
   height:145px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}

.med:hover .med-hidden {
   display: block;
}


Si tu veux voir par toi-même en profondeur, tu as le mdp que je vais t'envoyer sur Skype.


_________________
SUKME
avatar
SUKME
Messages : 21
Date d'inscription : 08/01/2016
Voir le profil de l'utilisateur
Codage icones
Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
-
Sauter vers: