Page d'Accueil

Personnages RP : **ZACKARITO FOX** **MAXIMUS**

CODE HTML :

Code:: <div class="fond">

<center>

<center>

<ul id="menupa">

<li>
   <a href="#">L'administratif</a>
<ul>

<li>
   <a href="http://archipel.forums-actifs.com/t3-1-le-reglement">Règlement</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t121-3-presentation-du-staff">Le staff</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t41-4-credits-inspirations-et-remerciements">Les crédits</a>
</li>

</ul>

</li>

<li>
   <a href="#">Découvrir l'univers</a>
<ul>

<li>
   <a href="http://archipel.forums-actifs.com/f24-l-historique">L'historique</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t24-1la-carte-d-archipel">La carte</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/f21-les-peuples-d-archipel">Les peuples jouables</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/f2-l-univers-et-ses-annexes">Les annexes</a>
</li>

</ul>

</li>

<li>
   <a href="#">Raccourcis des invités</a>
<ul>

<li>
   <a href="#">Le coin des invités</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t12-1le-guide-du-nouvel-arrivant">Le guide des nouveaux</a>
</li>

</ul>

</li>

<li>
   <a href="#">Raccourcis des joueurs </a>
<ul>

<li>
   <a href="http://archipel.forums-actifs.com/t15-3poser-une-question">Poser une question</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t27-5libre-service">Le libre service</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t281-7-l-aide-a-l-orthographe-les-maitres-des-mots">Aide à l'orthographe</a>
</li>

</ul>

</li>

<li>
   <a href="#">La liste des listings</a>
<ul>

<li>
   <a href="http://archipel.forums-actifs.com/t420-roles-importants-et-effectifs">La liste des Joueurs</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t42-annuaire-des-predefinis">La liste des prédéfinis</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t604-annuaire-des-groupes">La liste des groupes</a>
</li>

<li>
   <a href="http://archipel.forums-actifs.com/t57-le-listing-des-absences">La liste des absents</a>
</li>

</ul>

</li>

</ul>

</center>

</center><br />
<table style="width: 100%;">

<tbody>

<tr>

<td align="left">

<div class="encadré1">

<div class="titre_encadré">
   AVERTISSEMENTS ET TOP-SITES
</div>
   <img src="http://img15.hostingpics.net/pics/192745IMG30102014123258.png" /> <img src="http://img15.hostingpics.net/pics/648387IMG301020141232582.png" />
</div><br />
<div class="encadré2">

<div class="titre_encadré">
   AMIS ET ANNUAIRES
</div>

<center>
   <img src="http://img15.hostingpics.net/pics/708523partenaires.png" /> <img src="http://img15.hostingpics.net/pics/708523partenaires.png" /> <img src="http://img15.hostingpics.net/pics/708523partenaires.png" /><img src="http://img15.hostingpics.net/pics/708523partenaires.png" /> <img src="http://img15.hostingpics.net/pics/708523partenaires.png" /> <img src="http://img15.hostingpics.net/pics/708523partenaires.png" /> <img src="http://img15.hostingpics.net/pics/696506annuaires.png" /> <img src="http://img15.hostingpics.net/pics/696506annuaires.png" /> <br /><a href="#" style="color: #808283;">Les autres Partenaires</a> - <a href="#" style="color: #808283;">Faire sa demande</a>
</center>

</div><br />
<div class="encadré3">

<div class="titre_encadré" style="margin-bottom: 10px;">
   LE STAFF
</div>

<center>
  <img src="#" style="height: 50px; width: 50px;" /> <img src="#" style="height: 50px; width: 50px;" /> <img src="#" style="height: 50px; width: 50px;" /> <img src="#" style="height: 50px; width: 50px;" /> <img src="#" style="height: 50px; width: 50px;" />
</center>

</div>

</td>

<td align="right">
<br />
<div class="encadré1">

<div class="titre_encadré">
   LA DERNIÈRE INFO
</div><img class="iconew" src="http://img15.hostingpics.net/pics/816603IMG30102014124138.png" /><span class="datenew">04/10/2014 :</span> Aide aux nouveaux inscrits ; Ajout d'une galerie d'avatars prédécoupés et de conseils pour la réalisation de la fiche de présentation.
</div><br />
<div class="encadré2">

<div class="titre_encadré">
   LES INFOS PLUS ANCIENNES
</div><span class="datenew">26/07/2014 :</span> Mise à jour ! Venez voir les nouveautés !<br /><span class="datenew">26/04/2014 :</span> Nous avons changé de période de jeu ! Nous sommes maintenant au début d'Automne.<br /><span class="datenew">30/06/2014 :</span> Flavien remporte le concours d'écriture !<br />
</div><br />
<div class="encadré3">

<div class="titre_encadré">
   LA DERNIÈRE RUMEUR
</div><img class="iconew" src="http://img15.hostingpics.net/pics/816603IMG30102014124138.png" /><span class="datenew">Fin d'été 1650 :</span> "Le Doyen d'Îleval, Sorel Delenol, aurait été assassin lors d'un complot. Son fils aurait fait justice lui-même en coupant la tête du traître." <br />
<center>
  <a href="#" style="color: #808283;">Les autres rumeurs</a> - <a href="#" style="color: #808283;">Les événements en jeu</a>
</center>

</div><br />
</td>

</tr>

</tbody>

</table>
</div>

CODE CSS :

Code:: /*****************************************************PAGE P'ACCEUIL*******************************************/

/* MENU DÉROULANT */

#menupa, #menupa ul /* Liste */
{
   padding : 0;
   margin-left: 0;
   list-style : none;
   line-height : 21px;
   text-align : center;
}

#menupa /* Ensemble du menu */
{
   font-style: italic;
   font-family : Georgia;
   font-size : 12px;
   margin-left: 50px;
}

#menupa a /* Contenu des listes */
{
   display : block;
   background-color:rgba(248,248,248,0.9);
   color : #c2c1c1;
   text-decoration : none;
   width : 150px;
   margin-left:3px;
  margin-right:3px;
   border:2px dotted #c2c1c1;
}

#menupa a:hover {
  color : #ffffff;
   background-color:rgba(211,211,210,0.7);
font-size : 14px;}

#menupa li /* Éléments des listes */
{
   float : left;
   /* pour IE qui ne reconnaît pas "transparent" */
   border-right : 1px solid #fff;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menupa li
{
   border-right: 1px solid transparent ;
}

#menupa li ul /* Sous-listes */
{
   position: absolute;
   width: 144px; /* Largeur des sous-listes */
   left: -999em;
}

#menupa li ul li /* Eléments de sous-listes */
{
   /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
   border-top : 1px solid #fff;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menupa li ul li
{
   border-top : 1px solid transparent;
}

#menupa li ul ul
{
   margin : -22px 0 0 144px ;
   /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
   border-left : 1px solid #fff ;
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menupa li ul ul
{
   border-left : 1px solid transparent ;
}

#menupa li:hover ul ul, #menupa li.sfhover ul ul
{
   left: -999em;
}

#menupa li:hover ul, #menupa li li:hover ul, #menupa li.sfhover ul, #menupa li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
   left: auto;
   min-height: 0;
}

/*PAGE D'ACCUEIL HYGERIE*/

.fond {

  width: 910px;
  height: 456px;
  background-image: url('http://img15.hostingpics.net/pics/207472fondPA.png');
  padding-top: 115px;
}

.titre_encadré {
  width: 370px;
  height: 12px;
  background-color: #ffffff;
  color: #8e918f;
  margin-top: -5px;
  margin-left: -10px;
  margin-bottom: 5px;
  font-size: 14px;
  padding-bottom: 4px;
  text-indent: 10px;
}

.encadré1 {
  width: 350px;
  height: 60px;
  background-color: rgba(250,250,250,0.7);
  padding: 10px;
  text-align: justify;
  color: #6c939d;
}

.encadré2 {
  width: 350px;
  height: 130px;
  background-color: rgba(250,250,250,0.7);
  padding: 10px;
  text-align: justify;
  color: #6c939d;
}

.encadré3 {
  width: 350px;
  height: 80px;
  background-color: rgba(250,250,250,0.7);
  padding: 10px;
  text-align: justify;
  color: #6c939d;
}

.iconew {
   float: left;
   height: 42px;
}

.datenew {
color: #51585b;
font-weight: bold;
}