Partagez | 
 

 Page d'Accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Zilla



Personnages RP :
ZACKARITO FOX

MAXIMUS


MessageSujet: Page d'Accueil   Jeu 6 Nov - 9:30

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;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-troislieux.forumactif.org
 
Page d'Accueil
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» page d'accueil
» Faire apparaitre les catégories en page d'accueil
» Inserer lien à droite de la page d' accueil
» Code pour afficher l'avatar dans la page d’accueil
» création cadre + bouton sur la page d'accueil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum trois lieux test :: Test entête :: Codages et textes du forum :: Nouveaux Codages-
Sauter vers: