Galerie de créations pour RPG par Joy
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Répondre au sujetPartagez | 
 

 Fiche de PV #3

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Joy
FondAdmin narcissique
avatar

Messages : 611
Date d'inscription : 06/06/2012
Âge : 19
Localisation : Derrière son écran, confortablement installée au pays des licornes pégases.

Message(#) Sujet: Fiche de PV #3   Dim 16 Juin - 0:45




Nature du code


Fiche de PV
/!\ Attention, pour que les infobulles s'affichent, mettre le reste du code dans le CSS. Il faut avoir accès au panneau d'administration.

Aperçu


Code

Code:
 <center><div style="color: #df0035; vertical-align: middle;"><div style="width: 500px; display: inline-block; margin: 10px; border-radius: 50px; border: 5px solid #3bff00; background: #fffcc5; border-left: solid #3bff00 2px; border-right: #3bff00 2px solid; padding: 5px;"><h10 style="font: 30px bold; text-transform: lowercase; color: #ff003c;">[center]Prénom Prénom² Nom[/center]</h10><center><p style="border-radius: 50px; border: 5px solid #3bff00; border-left: 2px solid #3bff00; border-right: 2px solid #3bff00; padding: 15px; height: 100px; max-width: 400px; text-align: justify;"><img src="http://obsession27.free.fr/boutons/iconemmawatsonch10.jpg" style="border-radius: 50px; border: 4px solid #df0035; float: right;" />Nom :
Prénom :
Date de naissance :
Domicile :
Copyright : Faith, Diamine.
</p></center>
<table><tr><td style="height: 320px; width: 100%; vertical-align: top; margin-left: 10px; margin-right: 10px;"><div style="height: 10px; background: #df0035; padding: 4px; color: #fffcc5; text-align: center; font-variant: small-caps; border-radius: 30px 30px 0 0; border: #df0035 2px solid;">Mon histoire...</div><div style="height: 310px; padding-left: 10px; padding-right: 10px; text-align: justify; border-radius: 0 0 30px 30px; border: #df0035 2px solid; border-bottom: #df0035 solid 5px; overflow: auto;">NE PAS ENLEVER LE CRÉDIT. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

</div>
</td>
<td><img src="http://i.imgur.com/Em4uf8B.png" style="display: table-cell; width: 200px; border-radius: 100px/160px; -webkit-border-radius: 100px/160px; -moz-border-radius: 100px/160px; -o-border-radius: 100px/160px; border: 4px solid #df0035;" /></td></tr></table>[size=10]Code par Joy[/size]</div>
<div class="liens"><p class="bulle"><img src="http://www.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border-radius: 30px 0 0 30px;" /><span><span class="np">Prénom Nom [i]ft. Nom de la célébrité[/i]</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </span></p><p class="bulle"><img src="http://www.servimg.com/u/f48/17/58/70/58/rose1010.png" /><span><span class="np">Prénom Nom [i]ft. Nom de la célébrité[/i]</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </span></p><p class="bulle"><img src="http://www.servimg.com/u/f48/17/58/70/58/rose1010.png" style="border-radius: 0 30px 30px 0;" /><span><span class="np" >Prénom Nom [i]ft. Nom de la célébrité[/i]</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. </span></p></div>
</center>

Dans le CSS
Code:
 div.liens {
  margin: 5px;
  border: solid #df0035 4px;
  border-left: 2px solid #df0035;
  border-right: 2px solid #df0035;
  border-radius: 35px;
  padding: 0;
  height: 100px;
  width: 300px;
}
p.bulle {
  display: inline;
  color: black;
  text-decoration: none;
  text-align: justify;
}
p.bulle > span {
  display: none;
}
p.bulle:hover {
  background: none;
  z-index: 500;
}
p.bulle:hover > span {  
  display: block;
  position: absolute;
  margin-top: 10px;
  background: #fffcc5;
  height: 150px;
  width: 270px;
  overflow: auto;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 5px solid #3bff00;
  border-left: solid #3bff00 2px;
  border-right: #3bff00 2px solid;
  color: #df0035;
  padding: 15px;
}
span.np {
  border-bottom: 3px #df0035 dotted;
}

______________________________________


Le pessimiste se plaint du vent, l'optimiste espère qu'il va changer, le réaliste ajuste ses voiles.

Crédit - Joy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://dream.forumgratuit.eu
 

Fiche de PV #3

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» CHATTAHOOCHEE • fiche de publicité
» Notre fiche
» Fiche technique du nouveau décodeur Technicolor
» Athéna Catherien Arrows~ Fiche RP~
» Fiche réponse RP

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Dream :: HTML/CSS :: Libre Service de Codes :: Fiches de PV-
Répondre au sujet