Forum test Aby
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

forum test

Le Deal du moment : -20%
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q ...
Voir le deal
749 €

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Pensine 3

Aller en bas  Message [Page 1 sur 1]

1Pensine 3 Empty Pensine 3 Mar 2 Aoû - 11:38

Taëll

Taëll
Admin

Comme c'est hébergé en page html, je sais pas ce que ça donne mis sur un forum, désolée ^^'  

Partie 1 : J'ai laissé dans le code épuré les images de fond, donc le papier et les bandes Gryffondor, si tu veux supprimer ce fond Gryffondor, c'est dans la partie "#un { background-image: url(l'adresse)" donc soit tu changes l'adresse pour mettre un joli panorama par exemple, soit tu enlève "-image" et tu remplaces "url()" par le code d'une couleur Smile



Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#un {
  border: 2px solid gold;
  background-image: url(http://i21.servimg.com/u/f21/19/26/42/26/sans_t12.png);
  width: 490px;
  height: 600px;
}
#un .paper {
  background: url(https://user.oc-static.com/files/93001_94000/93731.png);
  background-repeat: no-repeat;
  position: relative;
  top: -20px;
  left: -50px;
  height: 620px;
  width: 540;
}
.lui {
  position: relative;
  top: 20px;
  left: 60px;
  width: 150px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid gold;
}
.house {
  position: relative;
  top: 180px;
  left: -100px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border: 1px solid gold;
}
.amis {
  position : relative;
  top: 340px;
  left: -260px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border: 1px solid gold;
}
#un .text {
  height: 546;
  width: 334;
  overflow: auto;
  position: relative;
  top: -150px;
  left: 224px;
}
.t {
  text-decoration: underline;
  font-weight: bold;
}
</style>

<div id="un"><div class="paper">
  <img class="lui" src="" />
  <img class="house" src="" />
  <img class="amis" src="" />
  <div class="text"><p><span class="t">Identité</span> :
  <ul><li>Nom : texte</li>
    <li>Prénom : texte</li>
    <li>Naissance/année: Birthday et classe</li>
    <li>Maison (Poudlard) : (ça pas beaucoup vont le garder, je le sens xD)</li>
    <li>Maison (habitation) : texte</li>
    <li>Parents : Lui et Elle</li>
    <li>Fratrie : Victoire et Dominque</li></ul></p>
<p><span class="t">Physique</span> : texte</p>
<p><span class="t">Caractère</span> : texte</p></div></div></div>



Dernière édition par Aby le Mar 2 Aoû - 12:02, édité 1 fois

https://fotael.forumactif.org

2Pensine 3 Empty Re: Pensine 3 Mar 2 Aoû - 11:46

Taëll

Taëll
Admin

Partie 2 : là encore, c'est très Gryffondor (pas ma faute si le perso l'est ! (ah si mince, c'est ma faute, désolée XD)) enfin, je laisse le blason à la fin, comme ça si tu veux l'utiliser sur un forum où il y a des blasons, des emblèmes (comme dans Harry Potter, Divergente, Percy Jackson, et d'autres qui me sont peu connus ^^') et le fond, idem, je le laisse au cas où un Gryffou le voudrai Smile



Code:
<style type="text/css">
  #RP {
  border: 2px solid gold;
  background-image: url(http://i21.servimg.com/u/f21/19/26/42/26/sans_t12.png);
  width: 490px;
  height: 600px;
}
.paper {
  background: url(http://www.clker.com/cliparts/v/f/9/u/U/B/notepad-page-hi.png);
  height: 592px;
  width: 426px;
  position: relative;
  top: 10px;
  left: 5px;
}
.texta {
  height: 180px;
  width: 300px;
  overflow: auto;
  position: relative;
  top: 45px;
  left: 82px;
}
.textb {
  height: 160px;
  width: 300px;
  overflow: auto;
  position: relative;
  top: 76px;
  left: 80px;
}
.blason {
  position: relative;
  top: 90px;
  left: 150px;
  width: 160px;
  height: 160px;
}
</style>

<div id ="RP"><div class="paper">
    <div class="texta"><h3>Rps terminés</h3>
    <ul>
      <li><a target="_blank" href="http://fotael.forumactif.org/t32-pensine-3">Titre rp</a></li> / avec eux
      <li><a target="_blank" href="http://www.harrypotterworld.biz/t6702-la-mauvaise-cible#268723">Titre rp</a></li> / Avalon et Rachel / (simple figurant, joué via Rachel)
      <li><a target="_blank" href="http://fotael.forumactif.org/t32-pensine-3">Titre rp</a></li> / avec eux
      <li><a target="_blank" href="http://fotael.forumactif.org/t32-pensine-3">Titre rp</a></li> / avec eux
      </ul></div>
    <div class="textb"><h3>Rps en cours</h3>
    <ul>
      <li><a target="_blank" href="http://fotael.forumactif.org/t32-pensine-3">Titre rp</a></li> / avec elles
      <li><a target="_blank" href="http://fotael.forumactif.org/t32-pensine-3">Titre rp</a></li> / Avec eux
      <li><a target="_blank" href="http://fotael.forumactif.org/t32-pensine-3">Titre rp</a></li> / avec eux
     
    <!-- <li ><a target="_blank" href=""></a></li> -->
      </ul></div>
  <img class="blason" src="" /></div></div>

https://fotael.forumactif.org

3Pensine 3 Empty Re: Pensine 3 Mar 2 Aoû - 11:58

Taëll

Taëll
Admin

Partie 3 : Voilà la partie "relations". Là encore un fond Gryffondor (je m'excuse auprès des anti-Gryffondor x)). Je laisse encore le fond dans le codage, pour ceux à qui ça conviendrait Razz Pour le reste, je vais laisser les fonds aussi, même si je te conseille de les ré-héberger (je les ai également hébergé, mais sait-on jamais qu'un jour je n'en veuille plus...). Voilou ! Very Happy 



Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#RP {
  border: 2px solid gold;
  background-image: url(http://i21.servimg.com/u/f21/19/26/42/26/sans_t12.png);
  width: 600px;
  height: 620px;
}
.text {
  height: 620;
  width: 600;
  overflow: auto;
  position: relative;
  top: 0px;
  left: 0px;
}
  .tf{
  width: 400;
  height: 150;
  background: url(http://i68.servimg.com/u/f68/19/26/42/26/family10.png);
  overflow: auto;
  border-radius: 20px;
  color: red;
  }
  
  .to {
  width: 400;
  height: 150;
  background: url(http://i68.servimg.com/u/f68/19/26/42/26/cousin10.png);
  overflow: auto;
  border-radius: 20px;
  }
  
  .tc {
  width: 400;
  height: 150;
  background: url(http://i68.servimg.com/u/f68/19/26/42/26/connai11.png);
  overflow: auto;
  border-radius: 20px;
  color: #4dc5f0;
  }
  
  .ta {
  width: 400;
  height: 150;
  background: url(http://i68.servimg.com/u/f68/19/26/42/26/amis11.png);
  overflow: auto;
  border-radius: 20px;
  color: blue;
  }
  #ag {
  width: 150;
  height: 200;
  border: solid 2px gold;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 18;
  transform:rotate(-10deg);
-ms-transform:rotate(-10deg); /* Internet Explorer */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(-10deg); /* Safari et Chrome */
-o-transform:rotate(-10deg); /* Opera */
  }
  #ad {
  width: 150;
  height: 200;
  border: solid 2px red;
  border-radius: 5px;
  position: relative;
  top: -150px;
  left: 410px;
  transform:rotate(10deg);
-ms-transform:rotate(10deg); /* Internet Explorer */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari et Chrome */
-o-transform:rotate(10deg); /* Opera */
  }
  #g {
  float: right;
  }
  .un {
  height: 200px;
  width: 580px;
  position: relative;
}
  img {
  width: 150px;
  height: 200px;
  border-radius: 5px;
  border:
}
  a:link {
  color: #4dc5f0;
}
  a:visited {
   color: blue;
}
</style>

<div id ="RP">
  <div class="text">
    Famille
    <br/><br/>
    <div class="un"><div class="tf" id="d"><p>Papa / Prénom</p>
      <p>Relation : texte</p></div><div id="ad"><img src="" /></div></div>
    <br/><br/>
    <div class="un"><div class="tf" id="g"><p>Maman / Prénom</p>
      <p>Relation : Texte</p></div>
      <div id="ag"><img src="" /></div></div>
    <br/><br/>
    <div class="un"><div class="tf" id="d"><p>Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ad"><img src="" /></div></div>
    <br/><br/>
    <div class="un"><div class="tf" id="g"><p>Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ag"><img src="" /></div></div>
    <br/><br/>
    Oncles/tantes et Cousins/Cousines
    <br/><br/>
    <!-- <div class="un"><div class="to" id="d"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ag"><img src="" /></div></div>
  <br/><br/> -->
 <div class="un"><div class="to" id="d"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ad"><img src="" /></div></div>
    <br/><br/>
    <div class="un"><div class="to" id="d"><p>Nom Prénom</p>
      <p>Relation:</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ag"><img src="" /></div></div>
  <br/><br/>
    Amis
    <br/><br/>
   <div class="un"><div class="ta" id="g"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ag"><img src="" /></div></div>
  <br/><br/>
    <div class="un"><div class="ta" id="d"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ad"><img src="" /></div></div>
    <br/><br/>
    Connaissances, camarades, copains
    <br/><br/>
   <div class="un"><div class="tc" id="g"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ag"><img src="" /></div></div>
    <br/><br/>
    <div class="un"><div class="tc" id="d"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ad"><img src="" /></div></div>
    <br/><br/>
    <div class="un"><div class="tc" id="g"><p>Nom Prénom</p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id="ag"><img src="" /></div></div>
    <br/><br/>
    <!-- <div class="un"><div class="" id=""><p></p>
      <p>Relation: Texte</p>
      <p>Aventures communes :</p>
      <p>
      </p></div><div id=""><img src="" /></div></div>
  <br/><br/> -->
  </div></div>

https://fotael.forumactif.org

Contenu sponsorisé



Revenir en haut  Message [Page 1 sur 1]

Sujets similaires

-

» Pensine 4
» Pensine 1
» Pensine 2

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum