Page d'accueil potterveille

Messages : 10 Date d'inscription : 29/03/2012

HTML

Code:: <div class="systab">

<div class="selected"><span>Le commencement</span>
<div class="bienv">
<img src="http://img267.imageshack.us/img267/8296/bienvenuez.png" />
</div>
<table class="tableun">
<tbody>
<tr>
<td rowspan="2" class="tdun">
<div class="titre">
<img src="http://img854.imageshack.us/img854/5571/contextes.png" />
</div>
<div class="intcont">
Le célèbre trio de Gryffondor fait sa rentrée en sixième année d’étude au collège Poudlard. Le retour de Lord Voldemort est désormais un fait avéré confirmer par le Ministère de la Magie ! La tension est palpable dans le monde magique entre partisans du bien et partisans des forces obscurs. Quelque chose se prépare ... Comme l’eau qui dort avant la tempête, le seigneur des ténèbres est bien trop calme au goût de Celui-Qui-Doit-Vaincre. Une année mouvementée se profile à l’horizon, et dans son sillage, un funeste présage. La bataille finale approche un peu plus chaque jour, et ce, bien plus vite qu'on ne peut le penser ! Alors, si vous n’avez pas encore choisi votre camp, il en est, aujourd’hui, temps ... la suite <a href="http://potterveille.forumgratuit.org/t3-contexte#4">ici</a>
</div>
</td>
<td class="tddeux">
<div class="titre">
<img src="http://img440.imageshack.us/img440/4447/sablier.png" />
</div>
<table class="soustable">
<tbody>
<tr>
<td class="soustd">
Serpentard
</td>
<td class="soustd">
Serdaigle
</td>
<td class="soustd">
Poufsouffle
</td>
<td class="soustd">
Gryffondor
</td>
</tr>
<tr>
<td class="soustd">
000 points
</td>
<td class="soustd">
000 points
</td>
<td class="soustd">
000 points
</td>
<td class="soustd">
000 points
</td>
</tr>
</tbody>
</table>
</td>
<td rowspan="2" class="tdtrois">
<div class="titred">
<img src="http://img189.imageshack.us/img189/3172/navigationzde.png" />
</div>
<div class="intnav"><br /><br /><a href=" http://potterveille.forumgratuit.org/t1-reglement " class="anav">Règlement</a><br /><br /><a href="http://potterveille.forumgratuit.org/t3-contexte" class="anav">Contexte</a><br /><br /><a href="http://potterveille.forumgratuit.org/t5-methode-pour-ce-presenter#6" class="anav">Se présenter</a><br /><br /><a href="
http://potterveille.forumgratuit.org/t6-methode-a-suivre#7" class="anav">Répartition</a><br /><br /><a href="http://potterveille.forumgratuit.org/t7-devenir-partenaire#8 " class="anav">Devenir Partenaire</a>
</div>
</td>
</tr>
<tr>
<td class="tddeux">
<div class="titre">
<img src="http://img402.imageshack.us/img402/9360/crditu.png" />
</div>
<div class="intcred">
Ici serons les crédit donc pour le moment: le contexte de Roxy sur <a href="http://pole-emploi-hp.forumactif.ws/">Pôle emploie hp</a>catégorie, PA, QUEEL et fiche de présentation de...... , Jajalaf , .... et .... sur <a href="http://templactif.forumgratuit.org"><img src="http://img11.hostingpics.net/pics/975489logo88copie.png" /></a>
</div>
</td>
</tr>
</tbody>
</table>

</div>

<div>
   <span>Ce qui se passe sur Potterveille</span>
<div class="bienv">
<img src="http://img72.imageshack.us/img72/5554/nouveaute.png" />
</div>
<table class="tableun">
<tbody>
<tr>
<td rowspan="2" class="tdquatre">
<div class="titret">
<img src="http://img696.imageshack.us/img696/6958/dernire.png" />
</div>
<div class="intint">
Le célèbre trio de Gryffondor fait sa rentrée en sixième année d’étude au collège Poudlard. Le retour de Lord Voldemort est désormais un fait avéré confirmé par le Ministère de la Magie ! La tension est palpable dans le monde magique entre partisans du bien et partisans des forces obscurs. Quelque chose se prépare ... Comme l’eau qui dort avant la tempête, le seigneur des ténèbres est bien trop calme au goût de Celui-Qui-Doit-Vaincre. La suite <a href="http://potterveille.forumgratuit.org/t8-premiere-intrigue#9">ici</a>
</div>
</td>
<td class="tdcinq">
<div class="titret">
<img src="http://img528.imageshack.us/img528/4218/nouveauxarrivants.png" />
</div>
<div class="intd">
Ici seront marqué les nouveaux inscrit validé en lins cliquable qui dirige vers leur profil
</div>
</td>
<td rowspan="2" class="tdquatre">
<div class="titret">
<img src="http://img10.imageshack.us/img10/3655/persosz.png" />
</div>
<div class="cent">
<a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />DISPONIBILITÉ</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />DISPONIBILITÉ</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />DISPONIBILITÉ</span></a><br /><a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />DISPONIBILITÉ</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />DISPONIBILITÉ</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />DISPONIBILITÉ</span></a>
</div>
</td>
</tr>
<tr>
<td class="tdcinq">
<div class="titret">
<img src="http://img534.imageshack.us/img534/5498/familles.png" />
</div>
<div class="intd">
Ici je mettrai les noms des familles qui ont encore de la place en lien qui mène a leur fiche de famille.
</div>
</td>
</tr>
</tbody>
</table>

</div>

<div>
   <span>Staff et représentants du forum</span>
<div class="bienv">
<img src="http://img232.imageshack.us/img232/250/staffcl.png" />
</div>
<table class="tableun">
<tbody>
<tr>
<td rowspan="2" class="tdquatre">
<div class="titret">
<img src="http://img849.imageshack.us/img849/8892/adminsr.png" />
</div>
<div class="cent">
<a href="LIEN PROFIL" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM</span></a> <a href="LIEN PROFIL" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM</span></a> <a href="LIEN PROFIL" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM</span></a><br /><br /><br />
<div class="titret">
Les admins vous souhaitent une bonne visite !
</div>
</div>
</td>
<td class="tdcinq">
<div class="titret">
<img src="http://img85.imageshack.us/img85/2778/annoncesw.png" />
</div>
<div class="intd">
cadre texte ou je mettrait les annonce importante du forum ANONCES
</div>
</td>
<td rowspan="2" class="tdquatre">
<div class="titret">
<img src="http://img28.imageshack.us/img28/5061/ministre.png" />
</div>
<div class="cent">
<a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />FONCTION</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />FONCTION</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />FONCTION</span></a><br /><a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />FONCTION</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />FONCTION</span></a> <a href="#" class="info"><img src="http://img703.imageshack.us/img703/9945/boomy.jpg" /><span>NOM <br /><br />FONCTION</span></a>
</div>
</td>
</tr>
<tr>
<td class="tdcinq">
<div class="titret">
<img src="http://img38.imageshack.us/img38/8814/logostaffh.png" />
</div>
<div class="intd">
<marquee class="marq" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://templactif.forumgratuit.org"><img src="http://img11.hostingpics.net/pics/975489logo88copie.png" /> </a><a href="http://templactif.forumgratuit.org"><img src="http://img11.hostingpics.net/pics/975489logo88copie.png" /></a><a href="http://templactif.forumgratuit.org"><img src="http://img11.hostingpics.net/pics/975489logo88copie.png" /> </a><a href="http://templactif.forumgratuit.org"><img src="http://img11.hostingpics.net/pics/975489logo88copie.png" /></a>
</marquee>

</div>
</td>
</tr>
</tbody>
</table>

</div>

<div>
   <span>Écoles voisines et plus</span>
<div class="bienv">
<img src="http://img718.imageshack.us/img718/158/voisins.png" />
</div>

<table class="tableun">
<tbody>
<tr>
<td rowspan="2" class="tdquatre">
<div class="titret">
<img src="http://img26.imageshack.us/img26/8016/paretnaires.png" />
</div>
<div class="intint"><a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a><br /><a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><br /></a><a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a> <a href="LIEN PARTENAIRE" class="infob"><img src="http://img233.imageshack.us/img233/769/chapeaupeau.png" /><span><img src="http://static.tumblr.com/u2ijtnd/JkAlwg4lt/question.png" /></span></a>
</div>
</td>
<td rowspan="2" class="tdquatre">
<div class="titret">
<img src="http://img826.imageshack.us/img826/9172/videozg.png" />
</div><iframe style="width: 280px; height: 210px;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/KmyMLw7TnCE"></iframe>
</td>
<td class="tdcinq">
<div class="titret">
<img src="http://img812.imageshack.us/img812/8104/votez.png" />
</div>
<div class="intd">
<marquee direction="right" class="marq" onmouseover="this.stop();" onmouseout="this.start();">
Boutons de votes
</marquee>
</div>
</td>
</tr>
<tr>
<td class="tdcinq">
<div class="titret">
<img src="http://img600.imageshack.us/img600/34/autrepartenaires.png" />
</div>
<div class="intd">
<marquee class="marqd" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
Lien partenaire <br /><br /> lien partenaire <br /><br /> lien partenaire
</marquee>
</div>
</td>
</tr>
</tbody>
</table>

</div>
</div>

CSS

Code:: /*Page d'aceuil*/

.cent
{
  text-align:center;
}

.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #dfd2c9;
  background: #3d1710;
  border: 1px solid #000;
  cursor : pointer;
  border-radius:10px;
  margin-top:10px;
}

.systab .tab:hover {
  background: #dfd2c9;
  color: #3d1710;
  border-color: #3d1710;
}

.systab .tab.selected{
  color: #ccc;
  background: #333;
}

.systab .contents {
  margin-top: 10px;
  margin-bottom: 1px;
  color: #000;
  background-image:url('http://img826.imageshack.us/img826/677/marauder2.jpg');
  background-position:center;
  border: 1px solid #000;
  padding: 10px;
  border-radius:10px;
}

.bienv
{
  font-size:20px;
  font-family:trebechut ms;
  color:#dfd2c9;
  border-radius:10px;
  border:1px solid black;
  background-image:url('http://img29.imageshack.us/img29/9403/marauderhi.jpg');
  background-position:center;
  width:600px;
  heigth:100px;
  margin-left:50px;
}

.tableun
{
  margin-top:30px;
  margin-bottom:20px;
}

.tdun
{
  border:1px solid black;
  border-radius:10px;
  background-image:url('http://img29.imageshack.us/img29/9403/marauderhi.jpg');
  background-position:center;
  width:325px;
  heigth:300px;
}

.titre
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:center;
  font-family:trebechut ms;
  font-size:18px;
  width:300px;
  border:1px solid black;
  border-radius:10px;
  margin-left:10px;
}

.titred
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:center;
  font-family:trebechut ms;
  font-size:18px;
  width:80px;
  border:1px solid black;
  border-radius:10px;
  margin-left:10px;
}

.intcont
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:justify;
  overflow:auto;
  height:150px;
  width:270px;
  border:1px solid black;
  border-radius:10px;
  margin-left:25px;
  margin-top:10px;
  margin-bottom:10px;
}
.tddeux
{
  border:1px solid black;
  border-radius:10px;
  background-image:url('http://img29.imageshack.us/img29/9403/marauderhi.jpg');
  background-position:center;
  width:325px;
  heigth:150px;
}

.soustable
{
  margin-left:25px;
  margin-top:15px;
  margin-bottom:15px;
}

.soustd
{
  background-color:#3d1710;
  width:60px;
  border:1px solid black;
  text-align:center;
  color:#dfd2c9;
  border-radius:10px;
}

.intcred
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:justify;
  overflow:auto;
  height:75px;
  width:270px;
  border:1px solid black;
  border-radius:10px;
  margin-left:25px;
  margin-top:10px;
  margin-bottom:10px;
}
.tdtrois
{
  border:1px solid black;
  border-radius:10px;
  background-image:url('http://img29.imageshack.us/img29/9403/marauderhi.jpg');
  background-position:center;
  width:100px;
  heigth:300px;
}

.intnav
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:justify;
  overflow:auto;
  height:200px;
  width:90px;
  border:1px solid black;
  border-radius:10px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
}

a.anav:link
{
  color:#dfd2c9;
  margin-left:5px;
  font-size:11px;
}

.tdquatre
{
  border:1px solid black;
  border-radius:10px;
  background-image:url('http://img29.imageshack.us/img29/9403/marauderhi.jpg');
  background-position:center;
  width:250px;
  heigth:300px;
}

.tdcinq
{
  border:1px solid black;
  border-radius:10px;
  background-image:url('http://img29.imageshack.us/img29/9403/marauderhi.jpg');
  background-position:center;
  width:325px;
  heigth:150px;
}

.titret
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:center;
  font-family:trebechut ms;
  font-size:18px;
  width:240px;
  border:1px solid black;
  border-radius:10px;
  margin-left:5px;
}

.intint
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:justify;
  overflow:auto;
  height:150px;
  width:240px;
  border:1px solid black;
  border-radius:10px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
}

.intd
{
  background-color:#3d1710;
  color:#dfd2c9;
  text-align:justify;
  overflow:auto;
  height:50px;
  width:240px;
  border:1px solid black;
  border-radius:10px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
}

.marq
{
  margin-top:10px;
}

.marqd
{
  height:50px;
  margin-left:75px;
}

a.info
{
  position:relative;
  z-index:24;
}

a.info:hover
{
  z-index:25;
}

a.info span
{
  display: none;
}

a.info:hover span
{
  display:block;
  position:absolute;
  background-color: #3d1710;
  margin-top:-50px;
  margin-left:55px;
  border:1px solid black;
  color:#dfd2c9;
  border-radius:10px;
}

a.info img
{
  margin-left:10px;
  margin-top:10px;
}

a.infob
{
  position:relative;
  z-index:24;
}

a.infob:hover
{
  z-index:25;
}

a.infob span
{
  display: none;
}

a.infob:hover span
{
  display:block;
  position:absolute;
  background-color: #3d1710;
  margin-top:-50px;
  border:1px solid black;
  color:#dfd2c9;
  border-radius:10px;
}

a.infob img
{
  margin-left:10px;
  margin-top:10px;
}

.partnersb
{
background-color:#ede3d0;
border-radius:10px;
height:60px;
width:500px;
margin: 0 auto;
}

Rechercher

Résultats par : Messages Sujets
Recherche avancée