AccueilFAQRechercherS'enregistrerConnexion

Partagez|

Mes Pages d'Accueil

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

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Mes Pages d'Accueil Mar 8 Mar - 13:41

Page d'Accueil 1


PA1

A mettre dans "Message sur la page d'accueil"
Code:
<br><div style="margin: auto; text-align: center; width: 700px;">
  </div><div style="text-align: center; width: 700px;">
  <a href="http://" class="navigation"><b>Règlement</b></a>

  <a href="http://" class="navigation"><b>Postes Vacants</b></a>

  <a href="http://" class="navigation"><b>Guide</b></a>

  <a href="http://" class="navigation"><b>Partenariat</b></a>

  <a href="http://" class="navigation"><b>Section Invités</b></a>
</div>
<table style="margin: auto; text-align: center; width: 700px;">
<tbody><tr>
<td width="50%">
      <span class="titre">
        News
        </span><br>
        <div style="overflow: auto; width: 100%; height: 80px;">
            <div style="margin: auto; text-align: left; width: 100%;">
              </div>
            <font size="1">
              <ul>
                  <div align="left">
                  - Blablabla<br>
                  - Blablabla<br>
                  - Blablabla<br>
                  - Blablabla<br>
                  - Blablabla<br>
                  - Blablabla<br>
                  - Blablabla<br>
                  </div>
              </ul>
            </font>
        </div>
<table>
  <tbody><tr align="left">
      <td><br><br>
        <span class="titre">
            Contexte
        </span>
        <br><div style="overflow: auto; width: 100%; height: 80px;">
            <div style="margin: auto; text-align: left; width: 100%;">
              </div>
<i style="text-align: justify;"><span style="font-size: 11px; line-height: normal;">Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici.</span></i></div><br><br>
      </td>
  </tr>
 </tbody></table>
</td>

<td class="droite" width="50%">
<br>
<table align="right">
  <tbody>
  <tr height="150">
      <td>
        <span style="font-size: 12px;">
            <div style="margin: auto; width: 100%;">
                  </div>
              <br>
              <center><FORM><SELECT style="font-family: arial; color: white; border: 1px dotted black;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8A8A8A;" onchange="location = this.options
[this.selectedIndex].value"> <OPTION selected >Top Partenaires</OPTION> <OPTION value=http://>Ami 1</OPTION> <OPTION value=http://>Ami 2</OPTION> <OPTION value=http://>Ami 3</OPTION> <OPTION value=http://>Ami 4</OPTION> <OPTION value=http://>Ami 5</OPTION> <OPTION value=http://>Ami 4</OPTION> <OPTION value=http://>Ami 6</OPTION> </SELECT> </FORM></center>
                  <br><br><br>
              </span>
      </td>
  </tr>
  <tr>
      <td>
        <span class="titre">
        Staff   
        </span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
<a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
<a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
</center>
        <br>
        <br>
        <br>
      </td>
  </tr>
</tbody></table>
</td>
</tr>
</tbody></table><div style="margin: auto; text-align: center; width: 700px;">
  </div><div style="text-align: right;">Page d'Accueil by <a href="http://pole-emploi-hp.forumotion.com/">Roxy</a></div>

A mettre dans le CSS
Code:
/*Page d'Accueil*/

.navigation
{background-color: #8A8A8A;
text-align: center;
width: 120px;
height: 15px;
border: 1px black dotted;
-border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
text-color:#000000;
text-decoration: none;
cursor:pointer;
display:inline-block;
margin-left:3px;
margin-right:3px;
padding: 3px;


.titre{
display:block;
border-bottom:4px #8A8A8A solid;
padding-bottom:10px;
font-weight:bold;
font-size:18px;
text-align:center;
}

* a.info {
  position: relative;
  color: white;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
 
}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: normal;

  top: 20px;
  left: 10px;

  background-color: #8A8A8A;

-moz-border-radius : 5px 5px 5px 5px;
  padding: 3px;

  border: 1px dashed white;
width: 150px;}


Dernière édition par Roxy le Mar 8 Mar - 17:19, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 14:20

Page d'Accueil 2


PA2

A mettre dans "Message sur la page d'accueil"
Code:
<SPAN class=genmed>
<TABLE class="forumline table1 bg3" cellSpacing=1 width="100%">
<TBODY>
<TR>
<TH class="thTop forabg" width="28%">Postes Vacants<BR></TH>
<TH class="thTop forabg" width="43%"><DIV align=center>Contexte</DIV></TH>
<TH class="thTop forabg" width="29%">Nos Partenaires</TH></TR><SPAN class=postbody></SPAN>
<TR>
<TD class=row3 align=middle><DIV align=center><SPAN class=postbody>
<center><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div></center></SPAN></DIV></TD>
<TD class=row3 align=middle><DIV align=center><SPAN class=postbody><p>Votre contexte ici</p></SPAN></DIV></TD>
<TD class=row3 align=middle><SPAN class=postbody>
<CENTER> <A href="http://"><IMG src="http://img10.hostingpics.net/pics/956658Partenaires.png"></A><br><br>
<A href="http://"><IMG src="http://img10.hostingpics.net/pics/956658Partenaires.png"></A><br><br>
<A href="http://"><IMG src="http://img10.hostingpics.net/pics/956658Partenaires.png"></A></CENTER></SPAN></TD>
<TR><SPAN class=genmed></TR></TBODY></TABLE>
<TABLE class="forumline table1 bg3" cellSpacing=1 width="100%">
<TBODY>
<TR>
<TH class="thTop forabg" width="28%">News<BR></TH>
<TH class="thTop forabg" width="43%">Liens Rapides</TH>
<TH class="thTop forabg" width="29%">Crédits</TH></TR>
<TR>
<TD class=row3 align=middle><DIV align=center><SPAN class=postbody><marquee style="font-weight:bold; color:#000000; height:100px; width:250px; text-align:center" direction="up" scrollamount="2">
* News 1<br>
* News 2<br>
* News 3<br>
* News 4</marquee></SPAN></DIV></TD>
<TD class=row3 align=middle><DIV align=center>
<FORM><SELECT style="WIDTH: 268px" onchange="location = this.options
[this.selectedIndex].value"> <OPTION selected value=http://>Menu 1</OPTION> <OPTION value=http://>Menu 2</OPTION> <OPTION value=http://>Menu 3</OPTION> <OPTION value=http://>Menu 4</OPTION> <OPTION value=http://>Menu 5</OPTION> </SELECT> </FORM></DIV></TD>
<TD class=row3 align=middle>
<p><SPAN class=postbody><div style="text-align: center;"><FONT size=2>Page d'Accueil by <a href="http://pole-emploi-hp.forumotion.com/">Roxy</a></FONT></div></SPAN></p></TD></TR></TBODY></TABLE></SPAN></SPAN>

Pas de CSS pour cette présentation ...


Dernière édition par Roxy le Mar 8 Mar - 17:19, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 14:40

Page d'Accueil 3


PA3

A mettre dans "Message sur la page d'accueil"
Code:
<br><div style="margin: auto; text-align: center; width: 700px;">
  </div><div style="text-align: center; width: 700px;">
  <a href="http://" class="navigation"><b>Règlement</b></a>

  <a href="http://" class="navigation"><b>Contexte</b></a>

  <a href="http://" class="navigation"><b>Présentation</b></a>

  <a href="http://" class="navigation"><b>Avatars</b></a>
</div>
<br><table style="margin: auto; text-align: center; width: 700px;">
<tbody><tr>
<td width="30%"><br><br><br>
  <span class="titre">
            Les Postes Vacants
        </span>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 120px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up"><center><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div>
</center></marquee><table><tbody><tr></tr></tbody></table></center><br><br>

</td><td width="35%">
<br>
<table>
  <tbody><tr>
      <td>
      <span class="titre">
            Le Contexte
        </span>
<br>
        <div style="overflow: auto; width: 100%; height: 100px;">
            <div style="margin: auto; text-align: left; width: 100%;">
              </div>
            <font size="1">
              </font><ul>
<font size="1">                  </font><div align="justify"><font size="1">Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla
<br></font></div><font size="1"><br><br>
     
      </font></ul></div></td>
  </tr>
 </tbody></table>
</td><td width="30%">
<br>
<table>
  <tbody><tr>
      <td>
        <span class="titre">
        Le Staff
        </span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a> <a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
<br>
<a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
</center></td></tr></tbody></table><br>
        <br>
        <br>
      </td>
  </tr>
</tbody></table>

<br><table style="margin: auto; text-align: center; width: 700px;">
<tbody><tr>
<td width="50%">
        <span class="titre">
        Informations et Crédits
        </span><br><br><br>
<center><center>Toute reproduction totale ou partielle du Forum est interdite.<br><br>

Page d'accueil par <a href="http://pole-emploi-hp.forumotion.com/">Roxy</a>.<br><br>

Ouverture du Forum le ...</center><table><tbody><tr></tr></tbody></table></center><br><br>

</td><td class="droite" width="50%">
<br>
<table align="right">
  <tbody><tr>
      <td>
        <span class="titre">
        Les Partenaires
        </span>
<br>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 120px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="left"><center>
<center>
<a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center></center></marquee><table><tbody><tr></tr></tbody></table></center><br><br></td></tr></tbody></table><br>
        <br>
        <br>
        <br>
      </td>
  </tr>
</tbody></table>

A mettre dans le CSS
Code:
/*PA*/

.navigation{
list-style-type: none;
text-align: center;
display: inline;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
text-decoration: none;
color: #93a3a4;
background-color: #000000;
border: 1px dotted #000000;
}
.navigation:hover{
background-color: #000000;
color: #DBDBDB;
}

.titre{
display:block;
border-bottom:4px double #000000;
padding-bottom:10px;
font-weight:bold;
font-size:14px;
text-align:center;
}

* a.info {
  position: relative;
  color: white;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
 

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: normal

  top: 50px;
  left: 50px;

  background-color: #000000;

  color: #93a3a4;
  padding: 3px;

  border: 1px solid #93a3a4;
width: 150px;}


Dernière édition par Roxy le Mar 8 Mar - 17:20, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 14:50

Page d'Accueil 4


PA4

A mettre dans "Message sur la page d'accueil"
Code:
<br><div style="margin: auto; text-align: center; width: 700px;">
  </div><div style="text-align: center; width: 700px;">
  <a href="http://" class="navigation"><b>Règlement</b></a>

  <a href="http://" class="navigation"><b>Contexte</b></a>

  <a href="http://" class="navigation"><b>Présentation</b></a>

  <a href="http://" class="navigation"><b>Avatars</b></a>
</div>
<br>
<table>
      <tr>
          <td>
                <table>
                  <tr>
                      <td id="desc"><p style="text-align:center;font-size:14px;"><div style="margin: auto; text-align: center; width: 60%;">
  </div><span class="titre">
            Le Contexte
        </span></div>
<br>
        <div style="overflow: auto; width: 90%; height: 100px;">
            <div style="margin: auto; text-align: left; width: 100%;">
              </div>
            <font size="1">
              </font><ul>
<font size="1">                  </font><div align="justify"><font size="1">Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla
<br></font></div><font size="1"><br><br>
     
      </font></ul></div></td>
                  <td>
                        <td></div></div><br><br>
                            <div id="staff"><td class="droite" width="35%"><span class="titre">
            Les Postes Vacants
        </span>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:=""60px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up"><center><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div>
</center></marquee></td></tr></table></a> </div>
                        </td>
                      </tr>
                </table>
                <table><br><br>
                  <tr>
                      <td id="anim"><table style="margin: auto; text-align: center; width: 60%;"><span class="titre">
        Le Staff
        </span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a> <a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></table></td>
                        <td id="partenaire"><td class="droite" width="50%"><span class="titre">
        Les Partenaires
        </span>
<br>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 40px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="left"><center>
<center>
<a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center></center></marquee><br><br>( <a href="http://">Les Autres</a> ) - ( <a href="http://">Vous ?</a> )</p></td>
                  <td><div id="credits"><span class="titre">
        Informations et Crédits
        </span><br><br><br>
<center><center>Toute reproduction totale ou partielle du Forum est interdite.<br><br>

Page d'Accueil par <a href="http://pole-emploi-hp.forumotion.com/">Roxy</a>.<br><br>

Ouverture du Forum le ...</center></div><hr /></td></tr></table></td></tr></table></div>

A mettre dans le CSS
Code:
/*PA*/

.navigation{
list-style-type: none;
text-align: center;
display: inline;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
text-decoration: none;
color: #93a3a4;
background-color: #000000;
border: 1px dotted #000000;
}
.navigation:hover{
background-color: #000000;
color: #DBDBDB;
}

.titre{
display:block;
border-bottom:4px double #000000;
padding-bottom:10px;
font-weight:bold;
font-size:14px;
text-align:center;
}

* a.info {
  position: relative;
  color: white;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
 

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: normal

  top: 50px;
  left: 50px;

  background-color: #000000;

  color: #93a3a4;
  padding: 3px;

  border: 1px solid #93a3a4;
width: 150px;}


Dernière édition par Roxy le Mar 8 Mar - 17:20, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 15:18

Page d'Accueil 5


PA5

A mettre dans "Message sur la page d'accueil"
Code:
<div id="en_tete"><br><br>
  <table cellpadding="0" cellspacing="0" width="800px">
      <tbody><tr>
          <td id="colonne_gauche"><h1>Navigation</h1><ul id="menu">
<li><a href="#">Avant de jouer</a>
<ul><li><a href="#">Règlement</a></li>
<li><a href="#">Contexte</a></li></ul></li>

<li><a href="#">Présentations</a>
<ul><li><a href="#">Fiche</a></li>
<li><a href="#">Présentation en cours</a></li></ul></li>

<li><a href="#">Postes Vacants</a>
<ul><li><a href="#">Scénarios des Membres</a></li>
<li><a href="#">Liste des Avatars</a></li></ul></li>
</ul></td>
            <td id="colonne_centre"><h1>Contexte</h1><p>Votre contexte ici.</p></td>
            <td id="colonne_droite"><h1>Staff</h1><br><div id="staff"><a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
 <a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
</div><br><center><a href="http://">Le Staff en Détail ...</a></center><br><br></td>
      </tr>
  </tbody></table>
  <table cellpadding="0" cellspacing="0" width="800px">
      <tbody><tr>
          <td id="colonne_centre"><h1>Top Partenaires</h1><br><div id="partenaires"><br><a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a><br><br></div></td>
            <td id="colonne_droite"><h1>Crédits</h1><br><p>Page d'accueil by <a href="http://pole-emploi-hp.forumotion.com/" target="_blank">Roxy</a></p></td>
      </tr>
  </tbody></table><br><br>
</div>

A mettre dans le CSS
Code:
/*PAGE D'ACCUEIL*/
#en_tete{
  width: 700 px;
  background-color: #000C1B;
  margin:auto;
  -border-radius: 30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
}

#en_tete #colonne_gauche{
  width : 200px;
}

#en_tete #colonne_centre{
  width : 300px;
}

#en_tete #colonne_droite{
  width : 200px;
}

#en_tete tr{
  vertical-align:top;
}

#en_tete h1{
  propriété;
  background-color: #93A299;
  text-align: center;
  margin: 0 15px 0 0;
  padding: 3px 8px 3px 8px;
  color: black;
}

#navigation a:hover{
background-color: #93A299;
color: #FFFFFF;
font-variant : small-caps;
}

#en_tete p{
    text-align:center;
}

#en_tete #partenaires{
    text-align:center;
}

#staff{
  text-align:center;
  }




/*INFOBULLE*/
a.infobulle {
  position: relative;
    text-decoration:none;
  }

a.infobulle img{
  border:0;
  }

a.infobulle span {
  display: none; /*Masque l'infobulle*/
  }
a.infobulle:hover {
  background: none; /*Pour le "bug" d'internet explorer*/
  z-index: 999;
  }

a.infobulle:hover span {
  display: inline; /*Pour afficher l'infobulle au passage de la souris*/
  position: absolute;
  width:130px;;
  text-align:center;
  z-index: 999;

  white-space: nowrap; /*Pour éviter les retours à  la ligne non désirés*/

  bottom: 25px; /*Position de l'infobulle*/
  left: 20px;

  background-color:#93A299;/*Couleur de fond*/
     
  color: black; /*Couleur du texte*/
  padding: 3px;


  /*Bordures de l'infobulle*/
  border: 1px double black;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  -webkit-border-radius-bottomleft:5px;
  -webkit-border-radius-bottomright:5px;
  -webkit-border-radius-topleft:5px;
  -webkit-border-radius-topright:5px;
  -border-radius-bottomleft:5px;
  -border-radius-bottomright:5px;
  -border-radius-topleft:5px;
  -border-radius-topright:5px;
  -khtml-border-radius-bottomleft:5px;
  -khtml-border-radius-bottomright:5px;
  -khtml-border-radius-topleft:5px;
  -khtml-border-radius-topright:5px;
  }

.tab_infobulle{
  width:130px;
  border:0;
        position:relative;
  }
 
.img_red_staff{
  border:0;
  padding:2px;
  }

.pseudo_staff{
  font-weight:bold;
  font-size:12px;
  color:black;
  border-bottom:1px dotted black;
  }
 
.avatar_staff{
  margin:auto;
  height:150px;
  }


Dernière édition par Roxy le Mar 8 Mar - 17:20, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 15:27

Page d'Accueil 6


PA6

A mettre dans "Message sur la page d'accueil"
Code:
<div id="en_tete"><br><br>
  <table cellpadding="0" cellspacing="0" width="800px">
      <tbody><tr>
          <td id="colonne_gauche"><h1>Bienvenue</h1><br><blockquote>Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici.</blockquote><br><br><h1>PV Disponibles</h1><p><center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 120px;="" onmouseout="this.start()" scrollamount="4" scrolldelay="1" direction="left"><div style=""><img src="http://img4.hostingpics.net/pics/668851Icone.png"> <img src="http://img4.hostingpics.net/pics/668851Icone.png"> <img src="http://img4.hostingpics.net/pics/668851Icone.png"> <img src="http://img4.hostingpics.net/pics/668851Icone.png"></div></marquee><div style="text-align: center;"><a href="http://"> + de PV</a></div></center></p><br><br><h1>News du Forum</h1><br><blockquote>Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici.</blockquote></td>
            <td id="colonne_centre"></td>
            <td id="colonne_droite"><h1>Liens Rapide</h1><div style="text-align: center; width: 300px;"><br><br>
  <a href="http://" class="navigation"><b>Règlement</b></a><br>
  <a href="http://" class="navigation"><b>Contexte</b></a><br>
  <a href="http://" class="navigation"><b>Présentation</b></a><br>
  <a href="http://" class="navigation"><b>Avatars</b></a>
</div><br><br><h1>Staff</h1><br><div id="staff"><a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/668851Icone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><p class="pseudo_staff">Prénom et Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
 <a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/668851Icone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><p class="pseudo_staff">Prénom et Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
</div><br><br><h1>Top Partenaires</h1><p><a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></p></td>
      </tr>
  </tbody></table><br><br><div style="margin: auto; text-align: center; width: 800px;">
  </div><div style="text-align: right;">Page d'Accueil by <a href="http://pole-emploi-hp.forumotion.com/">Roxy</a></div></div>

A mettre dans le CSS
Code:
/*PAGE D'ACCUEIL*/
#en_tete{
  width: 800 px;
  background-image: url("http://img4.hostingpics.net/pics/148206FondNoir.png");
  margin:auto;
}

#en_tete #colonne_gauche{
  width : 450px;
}

#en_tete #colonne_droite{
  width : 350px;
}

#en_tete h1{
  propriété;
  background-color: black;
  text-align: center;
  margin: 0 15px 0 0;
  padding: 3px 8px 3px 8px;
  color: white;
}

#navigation a:hover{
background-color: #93A299;
color: #663F25;
font-variant : small-caps;
}

#en_tete p{
    text-align:center;
}

#en_tete #partenaires{
    text-align:center;
}

#staff{
  text-align:center;
  }




/*INFOBULLE*/
a.infobulle {
  position: relative;
    text-decoration:none;
  }

a.infobulle img{
  border:0;
  }

a.infobulle span {
  display: none; /*Masque l'infobulle*/
  }
a.infobulle:hover {
  background: none; /*Pour le "bug" d'internet explorer*/
  z-index: 999;
  }

a.infobulle:hover span {
  display: inline; /*Pour afficher l'infobulle au passage de la souris*/
  position: absolute;
  width:130px;;
  text-align:center;
  z-index: 999;

  white-space: nowrap; /*Pour éviter les retours à  la ligne non désirés*/

  bottom: 25px; /*Position de l'infobulle*/
  left: 20px;

  background-image: url("http://img4.hostingpics.net/pics/148206FondNoir.png");/*Image de fond*/
     
  color: black; /*Couleur du texte*/
  padding: 3px;


  /*Bordures de l'infobulle*/
  border: 1px double black;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  -webkit-border-radius-bottomleft:5px;
  -webkit-border-radius-bottomright:5px;
  -webkit-border-radius-topleft:5px;
  -webkit-border-radius-topright:5px;
  -border-radius-bottomleft:5px;
  -border-radius-bottomright:5px;
  -border-radius-topleft:5px;
  -border-radius-topright:5px;
  -khtml-border-radius-bottomleft:5px;
  -khtml-border-radius-bottomright:5px;
  -khtml-border-radius-topleft:5px;
  -khtml-border-radius-topright:5px;
  }

.tab_infobulle{
  width:130px;
  border:0;
        position:relative;
  }
 
.img_red_staff{
  border:0;
padding: 2px;
  }


.pseudo_staff{
  font-weight:bold;
  font-size:12px;
  color:black;
  border-bottom:1px dotted black;
  }


Dernière édition par Roxy le Mar 8 Mar - 17:20, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 15:59

Page d'Accueil 7


PA7

A mettre dans "Message sur la page d'accueil"
Code:
<div style="width: 800px"><div id="descr"><h1 class="h1_pres">Contexte</h1>
<p>Votre Contexte ici ...</p></div><div class="staffs">
<h2 class="h2_pres">Nos partenaires</h2><div id="partenaires"><br><a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a><br><br></div>


<h2 class="h2_pres">Crédits</h2><p>Page d'accueil by <a href="http://pole-emploi-hp.forumotion.com/" target="_blank">Roxy</a></p>
</div><div class="staffs"><h1 class="h1_pres">Staff</h1><div id="staff"><a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
 <a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
</div><br><center><a href="http://">Le Staff en Détail ...</a></center><br><br></div><div class="navigation"><h1 class="h1_pres">Navigation</h1>
<ul id="menu">
<li><a href="#">Avant de jouer</a>
<ul><li><a href="#">Règlement</a></li>
<li><a href="#">Contexte</a></li></ul></li>

<li><a href="#">Présentations</a>
<ul><li><a href="#">Fiche</a></li>
<li><a href="#">Présentation en cours</a></li></ul></li>

<li><a href="#">Postes Vacants</a>
<ul><li><a href="#">Scénarios des Membres</a></li>
<li><a href="#">Liste des Avatars</a></li></ul></li>
</ul>
</div></div>

A mettre dans le CSS
Code:
/*PAGE D'ACCUEIL */

/* les titre */
.h2_pres{
background-color: black;
font-size: 14px;
text-shadow: 0px 0px 9px #777;
color: #ffffff;
border-bottom: 1px dashed #ffffff;}

.h1_pres{
background-color: black;
font-size: 16px;
text-align: center;
text-shadow: 0px 0px 9px #777;
color: #ffffff;
border-bottom: 1px dashed #ffffff;}

/* les boites */
#descr{
background-color: black;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
width: 770px;
margin-top:10px;
margin-bottom: 20px;
margin-right: 30px;
margin-left: 10px;
Padding-left: 10px;
Padding-bottom: 10px;
text-align: left;
border: 1px dashed #ffffff;
height: 98px;
font-size: 12px;
color: white;}

.staffs{
height: 215px;
width: 250px;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-left: 10px;
border: 1px dashed #ffffff;
background-color: black;
text-align: center;}


.navigation{
height: 215px;
width: 250px;
background-color: black;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-left: 10px;
border: 1px dashed #ffffff;
text-align: left;}


/*INFOBULLE*/
a.infobulle {
  position: relative;
    text-decoration:none;
  }

a.infobulle img{
  border:0;
  }

a.infobulle span {
  display: none; /*Masque l'infobulle*/
  }
a.infobulle:hover {
  background: none; /*Pour le "bug" d'internet explorer*/
  z-index: 999;
  }

a.infobulle:hover span {
  display: inline; /*Pour afficher l'infobulle au passage de la souris*/
  position: absolute;
  width:130px;;
  text-align:center;
  z-index: 999;

  white-space: nowrap; /*Pour éviter les retours à  la ligne non désirés*/

  bottom: 25px; /*Position de l'infobulle*/
  left: 20px;

  background-color:#93A299;/*Couleur de fond*/
   
  color: black; /*Couleur du texte*/
  padding: 3px;


  /*Bordures de l'infobulle*/
  border: 1px double black;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  -webkit-border-radius-bottomleft:5px;
  -webkit-border-radius-bottomright:5px;
  -webkit-border-radius-topleft:5px;
  -webkit-border-radius-topright:5px;
  -border-radius-bottomleft:5px;
  -border-radius-bottomright:5px;
  -border-radius-topleft:5px;
  -border-radius-topright:5px;
  -khtml-border-radius-bottomleft:5px;
  -khtml-border-radius-bottomright:5px;
  -khtml-border-radius-topleft:5px;
  -khtml-border-radius-topright:5px;
  }

.tab_infobulle{
  width:130px;
  border:0;
        position:relative;
  }
 
.img_red_staff{
  border:0;
  padding:2px;
  }

.pseudo_staff{
  font-weight:bold;
  font-size:12px;
  color:black;
  border-bottom:1px dotted black;
  }
 
.avatar_staff{
  margin:auto;
  height:150px;
  }


Dernière édition par Roxy le Mar 8 Mar - 17:21, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 16:12

Page d'Accueil 8


Onglet 1
PA8

Onglet 2
PA8

Onglet 3
PA8

A mettre dans "Message sur la page d'accueil"
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Un système d'onglet en javascript</title>
    <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
</head>
<body>
        <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Accueil</span>
            <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Postes Vacants</span>
            <span class="onglet_0 onglet" id="onglet_chose" onclick="javascript:change_onglet('chose');">Staff et Crédits</span>
        </div>
        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_quoi">
                <br>
                <br><div style="margin: auto; text-align: center; width: 700px;">
  </div><div style="text-align: center; width: 800px;">
  <table width="800px" cellpadding="0" cellspacing="0"><tr><td><h1><a href="http://" class="navigation"><font face="Georgia"><b>Règlement</b></font></a></h1></td>

  <td><h1><a href="http://" class="navigation"><font face="Georgia"><b>Présentation</b></font></a></h1></td>

  <td><h1><a href="http://" class="navigation"><font face="Georgia"><b>Avatars</b></font></a></h1></td></tr></table>

</div>
                <br><br>
Nous demandons ... lignes minimum.<br><br><br><br><table width="800px" cellpadding="0" cellspacing="0">
      <tr><td id="colonne gauche" class="titre"><h1>Contexte</h1><br><div style="width:350px;height:150px;overflow:auto;"><p><strong>I</strong>ci sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte.</p></div></td><td id="colonne droite"  class="titre"><h1>News du Forum</h1><p>Le forum a ouvert ses portes le ...</p><p>Autre News</p></td></tr></table><br>
            </font>
        </div>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_qui">
                <br><table><tr><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td></tr></table><br>

<h1><a href="http://" class="navigation"><b>Voir tous les Postes Vacants</b></a></h1></div>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_chose">
<br><table width="800px" cellpadding="0" cellspacing="0">
      <br><h1>Staff et Crédits</h1><br><tr><td><div style="text-align: center;"><p>Toute reproduction totale ou partielle du Forum est interdite.<br><br><br>Page d'Accueil par <a href="http://fofolies.forumotion.com/forum.htm">Roxy</a></p></div><br></td><td><a class="info"><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a></td><td><a class="info"><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a></td><td><a class="info"><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a></td></tr></table></div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
</body>
</html>

A mettre dans le CSS
Code:
/*Page d'Accueil*/
.navigation{
list-style-type: none;
text-align: center;
display: inline;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
color: #AE8C76;
text-decoration: none;
font-size:20px;
}
.navigation:hover{
color: #AE8C76;
}

.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding: 3px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                -khtml-border-radius:5px;
                border: 2px solid black;
                background-color: white ;
                color: #663F25;
                cursor:pointer;
        }
        .onglet_0
        {
                background: white;
                border-bottom:2px solid black;
        }
        .onglet_1
        {
                background:#D9D6CE;
                border-bottom:0px solid black;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-image: url("http://img4.hostingpics.net/pics/778266FondPApng.png");
                border: 2px solid black;
                -moz-border-radius : 5px;
                margin-top:-1px;
                padding:5px;
                display:none;
                color:#D9D6CE;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px;
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
     
h1{
  propriété;
  background-image: url("http://illiweb.com/fa/pbucket.gif");
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -border-radius: 15px;
  -khtml-border-radius:15px;
  border: 2px solid black;
  text-align: center;
  margin: 0 15px 0 0;
  padding: 3px 8px 3px 8px;
  color: black;
  font-weight:bold;
  font-size:18px;
  text-align:center;
}


#colonne_gauche, #colonne_droite{
  width : 400px;
}

* a.info {
  position: relative;
  color: black;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
 

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: normal;

  top: 50px;
  left: 10px;

  background-color: white;

  color: #4A2113;
-moz-border-radius : 5px 5px 5px 5px;
  padding: 3px;

  border: 2px solid black ;
width: 150px;}


Dernière édition par Roxy le Mar 8 Mar - 17:21, édité 1 fois
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mar 8 Mar - 16:20

Page d'Accueil 9


Onglet 1
PA9

Onglet 2
PA9

Onglet 3
PA9

Onglet 4
PA9

PA par onglet sur page HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Onglets accordéon</title>

<style type="text/css">
* { margin:0; padding:0; list-style:none; }

body {
margin: 8px;
font-family: Times New Roman, sans-serif;
font-size: 12px;
color: #EDDFDF;}

#fond_principal{                      /*    est le fond  général  */
padding:10px;
width:600px;
position:absolute;
z-index:2;
background-color: #000000;
border: 2px solid #971405;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0px 0px 10px #971405;
-webkit-box-shadow: 0px 0px 10px #971405;
box-shadow: 0px 0px 10px #971405;
}

a{
text-decoration: none;
border: none;
outline: none;
}

.onglet{                              /*  est l'onglet non sélectionné */
padding:3px 3px 1px 10px;
color:#FFF;
cursor:pointer;
font-weight:bold;
margin-right: 3px;
font-size: 14px;
background-color: #000000;
border: 2px solid #971405;
-moz-border-radius:15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
-moz-box-shadow: 0px 0px 6px #971405;
-webkit-box-shadow: 0px 0px 6px #971405;
box-shadow: 0px 0px 6px #971405;
}

.onglet:hover{                      /*  est l'onglet survolé */       
color: #971405;
}

.onglet_actif{
background:#971405;    /* est l'onglet sélectionné */
}

.contenu_accordeon{          /*  est le fond accordéon ou s'affiche le texte */
padding:10px;
background-color: #000000;
border: 2px solid #971405;
-moz-border-radius:0px 12px 12px 12px;
-webkit-border-radius: 0px 12px 12px 12px;
border-radius: 0px 12px 12px 12px;
-moz-box-shadow: 0px 0px 6px #971405;
-webkit-box-shadow: 0px 0px 6px #971405;
box-shadow: 0px 0px 6px #971405;
}

.onglet_container *{            /* est la position et largeur de l'onglet  */
float:left;
width:110px;
}

.navigation{
list-style-type: none;
text-align: center;
display: inline;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
color: #ffffff;
background-color: #570C03;
border: 1px solid #971405;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-topright:20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-top-right-radius:20px;
-khtml-border-bottom-left-radius:20px;
-khtml-border-top-right-radius:20px;
text-decoration: none;
}
.navigation:hover{
color: #570C03;
background-color: #000000;
}

.titre{
display:block;
border-bottom:4px #971405 solid;
padding-bottom:10px;
font-weight:bold;
font-size:14px;
text-align:center;
}

.maison{
                -moz-border-radius:5px;
                border: 1px dashed #971405;
                background-color: #000000;}

* a.info {
  position: relative;
  color: white;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
 
}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;

  white-space: normal;

  top: 50px;
  left: 20px;

  background-color: #000000;

-moz-border-radius : 5px 5px 5px 5px;
  padding: 3px;

  border: 1px dashed #971405;
width: 150px;}


</style>


<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
</head>
<body onload="new Accordian('fond_principal',5,'onglet_actif');">
<div id="fond_principal" >
<div class="onglet_container *"><div id="ouvrir1-selection" class="onglet onglet_actif" >Bienvenue</div><div id="ouvrir2-selection" class="onglet" >Contexte</div><div id="ouvrir3-selection" class="onglet" >Partenariat</div><div id="ouvrir4-selection" class="onglet" >Staff & Crédits</div>
</div>
<div style="float:left;">
<div id="ouvrir1-content"><div class="contenu_accordeon">
<div style="margin: auto; text-align: center; width: 575px;">
  </div><div style="text-align: center; width: 575px;">
  <br>
  <a href="http://hp-heritier.forums-actifs.com/reglement-f147/reglement-du-forum-t20.htm" target="_blank" class="navigation"><b>Règlement</b></a>

  <a href="http://hp-heritier.forums-actifs.com/presentation-et-validation-f36/modele-fiche-personnage-t1667.htm" target="_blank" class="navigation"><b>Présentation</b></a>

  <a href="http://hp-heritier.forums-actifs.com/avatar-et-patronus-f38/liste-des-avatars-t32.htm" target="_blank" class="navigation"><b>Avatars</b></a>

  <a href="http://hp-heritier.forums-actifs.com/postes-vacants-f44/" target="_blank" class="navigation"><b>Postes Vacants</b></a>
</div>
                <br><br>
<center>Nous demandons 15 lignes minimum.<br>
Forum optimisé pour tout navigateur excepté IE</center>
<br><br>
<span class="titre">
        Coupe des 4 Maisons
        </span><br>
<center><table width="400px"><tbody><tr><td align="left"><center><div class="maison" style="width: 75px"><br>
<img src="http://img7.hostingpics.net/pics/235047gryffo10.png" alt="Gryffondor" border="0"><br>
<br>390 pts<br><br></div></center>
</td>  <td align="left"><center><div class="maison" style="width: 75px"><br>
<img src="http://img7.hostingpics.net/pics/457112serpen10.png" alt="Serpentard" border="0"><br>
<br>788 pts<br><br></div></center>
</td><td align="left"><center><div class="maison" style="width: 75px"><br>
<img src="http://img7.hostingpics.net/pics/149345poufso10.png" alt="Poufsouffle" border="0"><br>
<br>775 pts<br><br></div></center>
</td><td align="left"><center><div class="maison" style="width: 75px"><br>
<img src="http://img7.hostingpics.net/pics/221222serdai10.png" alt="Serdaigle" border="0"><br>
<br>422 pts<br><br></div></center>
</td></tr></tbody></table></center>
<br><br>
<span class="titre">
        Nouveautés
        </span><br>
            <font size="1"><div style="text-align: left;"><ul style="list-style-image:url('http://illiweb.com/fa/subsilver/right_arrow.gif');">
<li>Design spécial "Gryffondor"</li>
<li>Nous recherchons en priorité des élèves de 1ère à 4ème année ainsi que des enfants</li>
</ul>
                  <br>
            </font>
</div>


 
</div>
</div>
 <div id="ouvrir2-content"><div class="contenu_accordeon">
<br><div style="text-align: justify;"><i style="text-align: justify;"><span style="font-size: 11px; line-height: normal;"><div style="margin:auto;text-align:center;width:100%"><blockquote>Février 2002.</blockquote></div><br><div style="margin:auto;text-align:justify;width:75%">
Alors que le monde magique panse ses blessures depuis la défaite de Lord Voldemort des mains d'Harry Potter, des rumeurs signalent le retour des Mangemorts, dirigés par Lord Aegnor.<br>
De son côté, l'Ordre du Phénix renaît difficilement de ses cendres. Il paraît qu'un groupe nommé "la Rébellion" tuerait les mangemorts...<br>
A Poudlard, un élève possède des souvenirs et des sortilèges qu'il ne connaît pas, et voit des yeux rouge sang dans ses rêves...<br><br>
<i style="text-align: justify;"><div style="text-align: right;"><a href="http://hp-heritier.forums-actifs.com/contexte-et-intrigues-f1/contexte-t113.htm#239" target="_blank"> SUITE ...</a></div></div>
<br><br>
<br>
                <center><object width="200" height="150"><param name="movie" value="http://www.dailymotion.com/swf/video/xb5bz3?width=200&theme=none"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xb5bz3?width=200&theme=none" width="200" height="150" allowfullscreen="true" allowscriptaccess="always"></embed></object></center><br><br>
</div>
</div>
</div>
 
<div id="ouvrir3-content"><div class="contenu_accordeon">
<div style="text-align: center; width: 575px;">
                <br>
              <span class="titre">
        Top Partenaires 
        </span>
<br><center><a href="http://gwendalivia.e-monsite.com/" target="_blank"><img src="http://img824.imageshack.us/img824/4163/10035f.jpg" width="35px" height="35"></a>  <a href="http://fofolies.forumotion.com/forum.htm" target="_blank"><img src="http://img4.hostingpics.net/pics/32357510035.png" width="35px" height="35"></a>  <a href="http://avadakedavra.forumactif.org/forum.htm" target="_blank"><img src="http://img801.imageshack.us/img801/9035/bannpub2.png" width="35px" height="35"></a>  <a href="http://crossover.1fr1.net/forum.htm" target="_blank"><img src="http://img7.hostingpics.net/pics/686638Bouton_partenariat01.jpg" width="35px" height="35"></a>  <a href="http://unbreakable-vow.forumactif.org/forum.htm" target="_blank"><img src="http://i39.servimg.com/u/f39/13/59/35/10/bouton10.png" width="35px" height="35"></a>  <a href="http://school-of-pub.forumotion.com/forum.htm" target="_blank"><img src="http://i51.tinypic.com/25ssakx.jpg" width="35px" height="35">  </a><a href="http://schoolpoudlard.forums-actifs.com/forum" target="_blank"><img src="http://img4.hostingpics.net/pics/392234SPBouton2.png" width="35px" height="35"></a>  <a href="http://www.hungcalf.com/forum.htm" target="_blank"><img src="http://i37.tinypic.com/do2hr6.jpg" width="35px" height="35"></a>  <a href="http://desperatehousestory.forumactif.org/forum.htm" target="_blank"><img src="http://i27.servimg.com/u/f27/11/27/06/76/bouton12.jpg" width="35px" height="35"></a><br><br><a href="http://dissendium.forums-actifs.com/forum.htm" target="_blank"><img src="http://i38.servimg.com/u/f38/11/58/14/39/gleelr10.png" width="35px" height="35"></a>  <a href="http://www.nolens-volens.com/index.php" target="_blank"><img src="http://img692.imageshack.us/img692/1421/boutonnv100.jpg" width="35px" height="35"></a>  <a href="http://www.miroirdurised.com" target="_blank"><img src="http://i48.servimg.com/u/f48/10/08/56/58/mini-l17.jpg" width="35px" height="35"></a>  <a href="http://cup-of-blood.1fr1.net" target="_blank"><img src="http://i33.tinypic.com/29mpor6.jpg" width="35px" height="35"></a>  <a href="http://greysanatomy-story.forums-actifs.net/" target="_blank"><img src="http://img11.hostingpics.net/pics/903591GATS.png" width="35px" height="35"></a>  <a href="http://town-of-insomnia.forumactif.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/228405logo.png" width="35px" height="35"></a>  <a href="http://pole-emploi-hp.forumotion.com/forum.htm" target="_blank"><img src="http://img413.imageshack.us/img413/3527/pub100x35.png" width="35px" height="35"></a> &nbsp;<a href="http://vampire-diaries.forumotion.com/" target="_blank"><img src="http://illiweb.com/fa/pbucket.gif" width="35px" height="35"></a></center><br><br><div style="text-align: center; width: 700px;">
      <a href="http://hp-heritier.forums-actifs.com/section-invites-f43/nous-lier-t165.htm#765" target="_blank" class="navigation"><b>Nous Lier</b></a>

<a href="http://hp-heritier.forums-actifs.com/section-invites-f43/demande-de-partenariat-t48.htm" target="_blank" class="navigation"><b>Les Autres</b></a>

</div>
<br><br>
<span class="titre">
        Topsites   
        </span>
<br><div style="text-align:center;">
                <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=13320" target="_blank"><img src="http://img4.hostingpics.net/pics/524917Topsites.png"></a> <a href="http://www.root-top.com/topsite/titop/in.php?ID=438" target="_blank"><img src="http://img4.hostingpics.net/pics/524917Topsites.png"></a> <a href="http://www.root-top.com/topsite/dadou76/in.php?ID=3428" target="_blank"><img src="http://img4.hostingpics.net/pics/524917Topsites.png"></a> <a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=4393" target="_blank"><img src="http://img4.hostingpics.net/pics/524917Topsites.png"></a> <a href="http://www.root-top.com/topsite/hdt/in.php?ID=2" target="_blank"><img src="http://img4.hostingpics.net/pics/524917Topsites.png"></a> <a href="http://www.root-top.com/topsite/dolceleb/in.php?ID=1451" target="_blank"><img src="http://img4.hostingpics.net/pics/524917Topsites.png"></a><br><br>
<a href="http://heritierdestenebres.boosterforum.com/" target="_blank"><img src="http://www.boosterforum.com/forum_ban/2_88x31.gif" width="88" height="31" alt="Booste le trafic de ton forum" /></a></div></div>
</div>
</div>

<div id="ouvrir4-content"><div class="contenu_accordeon">
 <div style="text-align: center; width: 575px;">
      <br>
                <span class="titre">
        Staff     
        </span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/822569iconemy.png"><span><center>Emelyne C. NewFarrow<br>Fondatrice</center></span></a>
<a class="info"><img src="http://img10.hostingpics.net/pics/273213iconaidan.jpg"><span><center>Aidan Stove<br>Co-Fondateur</center></span></a>
<a class="info"><img src="http://img10.hostingpics.net/pics/905402iconjarod.jpg"><span><center>Jarod Goldsmith<br>Administrateur</center></span></a>
<br><br><div style="text-align: center;"><a href="http://hp-heritier.forums-actifs.com/reglement-f147/le-staff-du-forum-t152.htm" target="_blank"> SUITE ...</a></div>
<p>Nous contacter : <span class="info"><a href="mailto:fofolies@voila.fr">heritierdestenebres@voila.fr</a></span></p></center><br><br>
                <span class="titre">
        Crédits
        </span>
<br>
                <p style="font-size:9px">Toute reproduction totale ou partielle du Forum est interdite.<br><br><br><div style="text-align: center;">Design par Raiponce et Css par Roxy<br>de <a href="http://pole-emploi-hp.forumotion.com/" target="_blank">Pôle Emploi HP</a></div><br>
<p style="font-size:9px">Ouverture du Forum le 10 Novembre 2009</p><br>
            </div></div>
</div>
</div>

</div>

</div>

</body>
</html>

A mettre dans "Message sur la page d'accueil"
Code:
<center><iframe src="http://monforumtest.forums-actifs.com/h1-onglets-accordeon" style="background-color: transparent; height: 500px; width:700px; overflow: hidden !important;"  frameborder="no"; scrolling="no" allowtransparency="true"></iframe></center>
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Ven 28 Déc - 14:49

Page d'Accueil 10



PA8

A mettre dans "Message sur la page d'accueil"
Code:
<div id="en_tete"><div id="fond_table"><div class="coller"><a href="http://gods-games.web-rpg.org/t4-reglement-du-forum-a-lire-imperativement" class="navigation">Règlements</a>  <a href="http://gods-games.web-rpg.org/f7-presentation-de-votre-personnage" class="navigation">Présentations</a>  <a href="http://gods-games.web-rpg.org/f33-nos-partenaires" class="navigation">Partenariats</a>  <a href="http://gods-games.web-rpg.org/t45-resume-des-aventures-en-cours" class="navigation">En savoir +</a>  <a href="http://gods-games.web-rpg.org/f1-news-du-forum" class="navigation">Les news</a>

<p style="text-align: right; margin-bottom: -70px; margin-top: -45px;"><img src="http://img15.hostingpics.net/pics/619209EchecsGG.png" /></p></div>


<p><table><tr>
<table><tr><td class="tableaux"><table><tr><td><a href="http://img15.hostingpics.net/pics/730089Contexte2GG.png" target="_blank"/><img src="http://img15.hostingpics.net/pics/730089Contexte2GG.png" alt="Suite du Contexte Ici" title="Suite du Contexte Ici"/></a></td><td><br><br><h1>Contexte</h1><br><div align="justify">Voyageurs du vol 747, destination Sydney ou naufragés du « Ocean’s Queen », vous voilà réunis en terre inconnue. Les lieux semblent paradisiaques mais impossible de dépasser certaines limites par voie terrestre ou maritime. À moins de savoir voler, vous êtes coincés !</div><br><br></td></tr></table></td>

<td class="tableaux"><table><tr><td><div align="justify">Au-delà l’horizon, derrière une chaîne de montagnes aux sommets ennuagés, coule un immense fleuve, aux berges duquel a eu lieu un étrange événement : le retour à la vie de certains personnages illustres de l’histoire de l’Humanité.<div></td><td><a href="http://gods-games.web-rpg.org/t7-contexte" target="_blank"/><img src="http://img15.hostingpics.net/pics/816959ContexteGG.png" alt="Suite du Contexte Ici" title="Suite du Contexte Ici"/></a></td></tr></table></td>

<td><div  class="tableaux"><h1>Les Topsites</h1><table align="center"><tr><td align="center"><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=16749" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/obsession27/banner.gif" border="0" alt="" /></a></td></tr><tr><td align="center"><a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=5704" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/forumrpg/banner.gif" border="0" alt="" /></a></td></tr><tr><td align="center"><a href="http://www.root-top.com/topsite/cherry23/in.php?ID=5539" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/cherry23/banner.gif" border="0" alt="" /></a></td></tr></table></div><div class="tableaux"><h1>Nos Amis</h1><h1><a href="http://gods-games.web-rpg.org/">♣</a> <a href="http://gods-games.web-rpg.org/">♣</a> <a href="http://gods-games.web-rpg.org/">♣</a> <a href="http://gods-games.web-rpg.org/">♣</a><br><a href="http://gods-games.web-rpg.org/">♣</a> <a href="http://gods-games.web-rpg.org/">♣</a> <a href="http://gods-games.web-rpg.org/">♣</a> <a href="http://gods-games.web-rpg.org/">♣</a></h1></div></td>
</tr></table>

<table style="width: 650px;"><tr><td style="background-color:#000000; border: 2px solid white; -moz-border-radius: 30px; border-radius: 30px; -webkit-border-radius: 30px; padding: 15px; color: #FFFFFF; max-height: 300px;"><p style="color: white; font-style: italic; font-family: Comic Sans MS; text-align: center; font-size: 20px; font-weight: bold;"><h1>Que se passerait-il si ces<br>
deux « mondes » se rencontraient ?<br><br>
À vous de l’imaginer et d'en raconter l’histoire.</h1></p></td>

<td colspan="2"><p class="staff_PV">Le Staff</p>
<center><table><tr><td><a href="http://gods-games.web-rpg.org/u1"/><div class="image_Staff" style="background-image:url('http://img15.hostingpics.net/pics/446110LouisGG.png'); -moz-transform:rotate(-15deg); transform:rotate(-15deg); -webkit-transform:rotate(-15deg);"></div></a> </td>
<td><a href="http://gods-games.web-rpg.org/u2"/><div class="image_Staff"  style="background-image:url('http://img15.hostingpics.net/pics/934909AchilleGG.png'); -moz-transform:rotate(20deg); transform:rotate(20deg); -webkit-transform:rotate(20deg);"></div></a></td>
<td><a href="http://gods-games.web-rpg.org/u16"/><div class="image_Staff" style="background-image:url('http://img15.hostingpics.net/pics/851945ZoGG.png'); -moz-transform:rotate(-15deg); transform:rotate(-15deg); -webkit-transform:rotate(-15deg);"></div></a> </td></tr></table></center>
</td>
</tr></table></p></div></div>

A mettre dans le CSS
Code:
/*EN TETE*/

#en_tete{
background-color: #000000;
background-repeat: repeat;
}

#en_tete #fond_table{
border-radius: 0px 0px 50px 50px;
-moz-border-radius: 0px 0px 50px 50px;
-webkit-border-radius: 0px 0px 50px 50px;
padding: 20px;
height: 600px;
width: 650px;
}

div#en_tete .coller{margin-top: -15px;}


#en_tete .navigation{
background-color: #ffffff;
border-radius: 0px 0px 50px 50px;
-moz-border-radius: 0px 0px 50px 50px;
-webkit-border-radius: 0px 0px 50px 50px;
width: 130px;
height: 20px;
color: black;
font-family: Pristina;
font-size: 16px;
text-align: center;
padding: 10px;
}

#en_tete h1{
color: white;
font-variant: small-caps;
font-family: Times New Roman;
text-align: center;
font-size: 20px;
}

#en_tete .staff_PV{
color: black;
font-style: italic;
font-family: Comic Sans MS;
text-align: center;
font-size: 16px;
font-weight: bold;
}


.tableaux{
background-color:#000000;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
padding: 15px;
color: #ffffff;
max-height: 300px;
border: 2px solid #ffffff;
}

#en_tete .image_Staff{
width: 80px;
height: 128px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #ffffff;
opacity: 0.4;
}

#en_tete .image_Staff:hover{
opacity: 1;
}
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Ven 28 Déc - 15:07

Page d'Accueil 11



PA11

A mettre dans "Message sur la page d'accueil"
Code:
<center><div class="TitrePA">Bienvenue à la Kiss Academy</div></center>

<table width="800px" cellspacing="8px" cellpadding="0px"><tr><td colspan=width="400px"><center><table><tr><td><div class="PA_description"><div id="staff"><div class="bloc-staff">
    <img "class="descr-img-staff" src="http://img600.imageshack.us/img600/9659/sanstitre2ex.jpg" height="150" alt="" />
  <div class="bloc-texte-staff"><div class="in-staff_cont">
        <p class="pseudo_staff">Anthéa Lorens</p><font size="1">Admin<br><br><a href=http://><b>MP</b></a></font></div></div></div></div></div></div></td>
<td><div class="PA_description"><div id="staff"><div class="bloc-staff">
    <img "class="descr-img-staff" src="http://img600.imageshack.us/img600/9659/sanstitre2ex.jpg" height="150" alt="" />
  <div class="bloc-texte-staff"><div class="in-staff_cont">
        <p class="pseudo_staff">Anthéa Lorens</p><font size="1">Admin<br><br><a href=http://><b>MP</b></a></font></div></div></div></div></div></div></td>
<td><div class="PA_description"><div id="staff"><div class="bloc-staff">
    <img "class="descr-img-staff" src="http://img600.imageshack.us/img600/9659/sanstitre2ex.jpg" height="150" alt="" />
  <div class="bloc-texte-staff"><div class="in-staff_cont">
        <p class="pseudo_staff">Anthéa Lorens</p><font size="1">Admin<br><br><a href=http://><b>MP</b></a></font></div></div></div></div></div></div></td>
<td><div class="PA_description"><div id="staff"><div class="bloc-staff">
    <img "class="descr-img-staff" src="http://img600.imageshack.us/img600/9659/sanstitre2ex.jpg" height="150" alt="" />
  <div class="bloc-texte-staff"><div class="in-staff_cont">
        <p class="pseudo_staff">Anthéa Lorens</p><font size="1">Admin<br><br><a href=http://><b>MP</b></a></font></div></div></div></div></div></div></td>
<td><div class="PA_description"><div id="staff"><div class="bloc-staff">
    <img "class="descr-img-staff" src="http://img600.imageshack.us/img600/9659/sanstitre2ex.jpg" height="150" alt="" />
  <div class="bloc-texte-staff"><div class="in-staff_cont">
        <p class="pseudo_staff">Anthéa Lorens</p><font size="1">Admin<br><br><a href=http://><b>MP</b></a></font></div></div></div></div></div></div></td></tr></table></center></div>
<center><table><tr><td><div class="PA_description"><center><FORM><SELECT style="font-family: arial; color: white; border: 1px dotted black;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8A8A8A;" onchange="location = this.options
[this.selectedIndex].value"> <OPTION selected >Liens Utiles</OPTION> <OPTION value=http://>Lien 1</OPTION> <OPTION value=http://>Lien 2</OPTION> <OPTION value=http://>Lien 3</OPTION> <OPTION value=http://>Lien 4</OPTION> <OPTION value=http://>Lien 5</OPTION> </SELECT> </FORM></center></div></td><td><div class="PA_description"><center><FORM><SELECT style="font-family: arial; color: white; border: 1px dotted black;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8A8A8A;" onchange="location = this.options
[this.selectedIndex].value"> <OPTION selected >Liens Utiles</OPTION> <OPTION value=http://>Lien 1</OPTION> <OPTION value=http://>Lien 2</OPTION> <OPTION value=http://>Lien 3</OPTION> <OPTION value=http://>Lien 4</OPTION> <OPTION value=http://>Lien 5</OPTION> </SELECT> </FORM></center></div></td></tr></table></center><br><center><div class="PA_description" style="width:375px ; height:115px;"><center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 115px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="left">
<center><a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center>
<center><a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center>
<center><a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a>  <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center></marquee><table><tbody><tr></tr></tbody></table></center></div></center><br><div class="PA_description"><center>Design par ... <br>
Codage Page d'Accueil par Tabatha Sweet</center></div></td><td colspan=width="400px"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Un système d'onglet en javascript</title>
    <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
</head>
<body>
        <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Contexte</span>
            <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">News</span>
            <span class="onglet_0 onglet" id="onglet_chose" onclick="javascript:change_onglet('chose');">A Savoir</span>
        </div>
        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_quoi">
                <br>
                <br><div style="margin: auto; text-align: justify; width: 350px; height:175px;"><marquee behavior="scroll" direction="up" scrollamount="1" height="155">N'avez-vous jamais rêvé de vivre en Floride ? La plage, le soleil, les fêtes,... Là bas il y a tout ce qu'il faut pour profiter de la vie ! Alors pourquoi ne pas vous y rendre ? En tant qu'étudiant, découvrez la prestigieuse Kiss Academy, où la réussite est garantie grâce à un univers où la détente est aussi importante que l'étude. Plutôt personnel ? Venez donc travailler dans cette académie, et découvrez qu'il y a toujours moyen d'être original pour punir un élève... N'avez-vous donc pas envie de rester avec ces jolies jeunes filles après les cours ? Vous avez tellement de choses à leur apprendre... Plutôt citadin ? Travaillez dans la splendide ville d'Arcadia ! Tout ce dont vous avez toujours rêvé est à portée de main, alors n'hésitez pas, rejoignez nous !</marquee></div></div>
            <div class="contenu_onglet" id="contenu_onglet_qui">
                <br>
                <br><div style="margin: auto; text-align: justify; width: 350px; height:175px;"><marquee behavior="scroll" direction="up" scrollamount="1" height="155">Vous n'avez pas d'idée ? nous manquons de Personnel dans l'académie !<br>
<br>
il y a un recensement d’avatar dans le topic news, je vous conseille donc d’aller voir celui-ci régulièrement mise a jour avant de créer une fiche de présentation.<br>
<br>
Un recensement est disponible jusqu'au 31 décembre 2012.</marquee></div></div>
            <div class="contenu_onglet" id="contenu_onglet_chose">
                <br>
                <br><div style="margin: auto; text-align: justify; width: 350px; height:175px;"><marquee behavior="scroll" direction="up" scrollamount="1" height="155">Si vous souhaitez posséder une signature, celle-ci doit représenter le même personnage que votre avatar et ne doit pas dépasser 500x250.<br>
<br>
Le forum demande 15 lignes de narration minimum par post<br>
<br>
Vous avez droit à autant de multi-comptes que vous le souhaitez tant que chacun reste actif<br>
<br>
Le flood et la Chatbox ne sont pas autorisés tant que votre fiche n'est pas entièrement terminée<br>
<br>
Le partenariat est ouvert aux invités, n'hésitez pas !<br>
<br>
Si vous avez des questions, des suggestions, des critiques à formuler, n'hésitez pas à envoyer un MP à un admin.</marquee></div></div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
</body>
</html><br><div class="PA_description" style="width:375px ; height:100px;">Topsites</div></td></tr></table>

A mettre dans le CSS
Code:
/*Début PA Roxy */
.TitrePA{
background-color : silver;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
  padding:5px;
  text-transform: uppercase;
font: 20px Verdana;
}

.PA_description{
background-color : silver;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
margin-left: 10px;
margin-right:10px;
  padding:8px;
}

/* BLOC STAFF */
.bloc-staff{
position: relative;
height: 150px;
width: 59px;
}

/* CONTENU BLOC DESCRIPTION STAFF */
.bloc-texte-staff{
background: url(http://img4.hostingpics.net/pics/580682Fond3.png) top left repeat-x transparent;
border: 1px solid #FFFFFF;
width: 59px;
height: 150px;
position: absolute;
top: 0;
left: 0;
color: #ffffff;
opacity: 0;
filter : alpha(opacity=0);
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}

/* DESCRIPTION STAFF AU SURVOL */
.bloc-texte-staff:hover {
opacity: 0.8;
filter : alpha(opacity=80);
}

/* IMAGE DESCRIPTION STAFF */
.descr-img-staff img {
vertical-align: middle;
}

/* TEXTE STAFF DESCRIPTION */
.in-staff_cont{
font-size: 10px;
color: #000000;
text-align: center;
width: 59px;
height: 150px;
}

.pseudo_staff{
  font-weight:bold;
  font-size:12px;
  color: #000000;
  text-align:center;
  border-bottom:1px dotted #000000;
  }

.onglet
        {
display:inline-block;
margin-left: 10px;
margin-right:10px;
padding:8px;
background-color : silver;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
cursor:pointer;
        }
        .onglet_0
        {
                background: silver;
        }
        .onglet_1
        {
                background: white;
        }
        .contenu_onglet
        {
background: silver;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
margin-left: 10px;
margin-right:10px;
padding:8px;
display:none;
  width:375px ;
  height:200px;
        }

/*Fin PA Roxy */
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Ven 28 Déc - 15:14

Page d'Accueil 12



PA12

A mettre dans "Message sur la page d'accueil"
Code:
<center><table width="100%" cellpadding="5" cellspacing="10" id="le_tableau">
        <tbody><tr>
            <td colspan="2"><center><img src="http://img15.hostingpics.net/pics/144294BTTF3.png" class="imagepa"></center></td></tr>
<tr><td colspan="2"><center><blockquote><blockquote><blockquote><div style="text-align: center;" id="menu">
<ul>
<li><a href="#">A Lire</a>
    <ul>
      <li><a href="Lien">Contexte</a></li>
      <li><a href="Lien">Règlement</a></li>
    </ul>
  </li>
  <li><a href="#">A Remplir</a>
    <ul>
      <li><a href="Lien">Fiche Membre</a></li>
      <li><a href="Lien">Fiche Personnage</a></li>
    </ul>
  </li>
<li><a href="#">Prédéfinis</a>
    <ul>
      <li><a href="Lien">De la Saga</a></li>
      <li><a href="Lien">Des Membres</a></li>
    </ul>
  </li>
<li><a href="#">Partenariat</a>
    <ul>
      <li><a href="Lien">Demande</a></li>
      <li><a href="Lien">Listing</a></li>
    </ul>
  </li>
<li><a href="#">Top Partenaires</a>
    <ul>
      <li><a href="Lien">Nom du Forum</a></li>
      <li><a href="Lien">Nom du Forum</a></li>
    </ul>
  </li></ul></div></blockquote></blockquote></blockquote></center></td></tr>
<tr><td colspan="2"><center>Forum RPG basé sur la saga Harry Potter, se situant 19 ans après.<br>Ouvert à tous - débutants comme initiés. Aucun nombre de lignes exigé.</center></td></tr>
        <tr>
            <td class="style_cellule" width="40%"><center><table><tr><td><img src=http://www3.telus.net/smile/images/potter/Smilie_Slytherinwappen.gif></td><td>0793</td><td><img src=http://www3.telus.net/smile/images/potter/Smilie_Hufflepuffwappen.gif></td><td>1153</td></tr></table></center></td>
            <td class="style_cellule" width="40%"><center><table><tr><td><img src=http://www3.telus.net/smile/images/potter/Smilie_Ravenclawwappen.gif></td><td>2684</td><td><img src=http://www3.telus.net/smile/images/potter/smilie_Gryffindorwappen.gif></td><td>2027</td></tr></table></center></td>
        </tr>
        <tr>
            <td id="igauche" VALIGN="top"><center><span class="titre_4" style="padding-left:15px;">Harry Potter, l'enfant qui a survécu...
Découvrez la suite des sublimes ouvrages écrits par Joanne Kathleen Rowling, qui n'a jamais cessé de nous faire rêver...</span></center><br><br>
<center><table>
        <tr>
          <td><div class="info" style="color: #842b00">
              <img  alt="Amy Jones, PV de Lily Potter" title="Amy Jones, PV de Lily Potter" src="http://images5.fanpop.com/image/photos/24700000/2nd-Zendaya-Mix-my-bff-zendayafan8374-24757021-100-100.jpg" class="imagepa"></div>
          </td>

          <td><div class="info" style="color: #842b00">
              <img  alt="Crystal De Tolosa, PV de Liam De Tolosa" title="Crystal De Tolosa, PV de Liam De Tolosa" src="http://images5.fanpop.com/image/photos/27500000/-emily-osment-27535349-100-100.png" class="imagepa"></div>
            </td>

            <td><div class="info" style="color: #842b00">
              <img  alt="Kessie A. Wemyss, PV de Darren O. Wemyss" title="Kessie A. Wemyss, PV de Darren O. Wemyss" src="http://i29.tinypic.com/2r5cdix.png" class="imagepa"></div>
        </td>

        </tr>
        </table></center></td>

            <td id="idroite" VALIGN="top"><center><span class="titre_4" style="padding-right:10px;">Janvier 2018<br>
Quelque chose de vieux, de neuf,<br>
d'emprunté et de bleu ...</span></center><p style="padding-right:10px; text-align: justify;">Trewlaney a eu une vision... Elle a vue la bannière de Serdaigle flotter au dessus de sa tête et quelque chose de bleu est arrivé (mission 1). Elle a eu une seconde vision, un livre et quelque chose a été emprunté (mission 2). Lors de son avant dernière vision, elle a vue la robe de mariée de Hermione... Et quelque chose de nouveau est arrivé (mission 3). Puis, il y a eu la dernière vision... Sa boule de cristal s'est brisée, et le Sinistros est apparu... Quelque chose de vieux s'apprête à revenir à la vie... (mission 4) Quelque chose de vieux, de neuf, d'emprunté et de bleu... </p></td>
        </tr>
        <tr>
            <td class="style_cellule" VALIGN="top">
        <center><span class="titre_4">Crédits</span></center>

<p style="padding-left:15px;"><center>Forum crée le 21.12.2011<br>par Maxwell Weaving
& Ondine Akeller-Weaving<br><br>
Header & QEEL by Pandore O. Ravenwood<br>
Boutons by James S. Potter<br>
CSS & Templates by Hyemi Yun & Maxwell Weaving<br>
Page d'accueil by Mélina Dursley</center></p>
        </td>

            <td class="style_cellule" VALIGN="top">

        <center><span class="titre_4">Les News !</span></center>
<p style="padding-left:15px;"><img src="http://img15.hostingpics.net/pics/460041FlcheBTTF.png"> Participez à nos 4 premières missions !<br><img src="http://img15.hostingpics.net/pics/460041FlcheBTTF.png"> Blablabla Blablabla Blablabla<br><img src="http://img15.hostingpics.net/pics/460041FlcheBTTF.png"> Blablabla Blablabla Blablabla<br><img src="http://img15.hostingpics.net/pics/460041FlcheBTTF.png"> Blablabla Blablabla Blablabla<br></p>
            </td>
        </tr>
<tr><td colspan="2"><center>Contactez rapidement le staff du forum :<br> Maxwell Weaving (fondateur) - Valandra K. Lowell (co-fondatrice)</center></td></tr>
        </tbody></table>
        </center>

A mettre dans le CSS
Code:
/*Début PA Roxy */

#menu ul { margin:0; padding:0; list-style-type:none; text-align:center; }
#menu li { float:left; margin:auto; padding:0; background-color: #EFECCA; }
#menu li a { display:block; width:100px; color: #89725B; text-decoration:none; padding:5px; }
#menu li a:hover { color: #89725B; background-color: #B49E9E; }
#menu ul li ul { display:none; }
#menu ul li:hover ul { display:block; }
#menu li:hover ul li { float:none; }
#menu li ul { position:absolute; }

.imagepa {
opacity : 0.5 }

.imagepa:hover{
opacity : 1 }

#le_tableau{
color:black;
font-size: 12px;
font-family: Arial;
background-color: none;
border: 3px solid #FFE6C9;
margin: 3px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
-moz- text-shadow: 1px 1px 2px #000;
-webkit- text-shadow: 1px 1px 2px #000;
}

.style_cellule{
background-color: #EFECCA;
border: 3px solid #FFE6C9;
margin: 3px;
padding: 6px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}

#igauche{
background-color: #EFECCA;
border: 3px solid #FFE6C9;
padding: 6px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}
#idroite{
background-color: #EFECCA;
border: 3px solid #FFE6C9;
padding: 6px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}

.titre_4{
font-size: 14px;
color: #C79F4B;
text-align: center;
}

/ *Fin PA Roxy*/
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Mer 11 Sep - 15:45


Page d'Accueil 13


Onglet Principal
PA13

Onglet 1
PA13

Onglet 2
PA13


PA par onglet sur page HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=so-8859-1" />
<title>Page d'Accueil Poudnoir</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; }

tr.post span.gensmall { display: none; }
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none !important;}


/* PA ONGLETS LATERAUX ONCLIC EN FOCUS */
#pafocus_head
{
  width: 950px;
  height: 151px;
  background: url(http://img4.hostingpics.net/pics/792939ville.png) no-repeat;
}
#pafocus_body
{
  width: 950px;
  height: 250px;
  background-color: #21545E;
  border-left: 1px dotted #191817;
  border-right: 1px dotted #191817;
  border-bottom: 1px dotted #191817;
  border-top: 5px solid #191817;
}
#pafocus
{
  padding-top: 25px;
  padding-bottom: 20px;
  text-align: right;
}
.pafocus_onglet1
{
  width: 175px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #173845;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #8C9AA3;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet2
{
  width: 175px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #173845;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #8C9AA3;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet3
{
  width: 175px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #173845;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #8C9AA3;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet4
{
  width: 175px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  background: #173845;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #8C9AA3;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet1:hover, .pafocus_onglet2:hover, .pafocus_onglet3:hover, .pafocus_onglet4:hover
{
  margin-left: 20px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_contenu1
{
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 230px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -50px;
  background: #c8c8c8;
  border: 1px  solid #b5b5b5;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu2
{
  position: absolute;
  z-index: 2;
  width: 700px;
  height: 230px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -90px;
  background: #c8c8c8;
  border: 1px  solid #b5b5b5;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu3
{
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 230px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -130px;
  background: #c8c8c8;
  border: 1px  solid #b5b5b5;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu4
{
  position: absolute;
  z-index: 4;
  width: 700px;
  height: 230px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -170px;
  background: #c8c8c8;
  border: 1px  solid #b5b5b5;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.pafocus_contenu0
{
  position: absolute;
  z-index: 5;
  width: 700px;
  height: 230px;
  overflow: auto;
  margin-left: 204px;
  margin-top: -175px;
  background: url(http://img11.hostingpics.net/pics/706888FondPA.png) no-repeat;
  border: 1px  solid #000000;
}
.pafocus_contenu
{
  padding: 4px;
  color: #74685d;
  font-size: 11px;
  text-align: justify;
  font-weight: normal;
}
.pafocus_onglet1:hover .pafocus_contenu1, .pafocus_onglet2:hover .pafocus_contenu2,
.pafocus_onglet3:hover .pafocus_contenu3, .pafocus_onglet4:hover .pafocus_contenu4
{
  margin-left: 180px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.pafocus_onglet1:focus .pafocus_contenu1, .pafocus_onglet2:focus .pafocus_contenu2,
.pafocus_onglet3:focus .pafocus_contenu3, .pafocus_onglet4:focus .pafocus_contenu4
{
  z-index: 10;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}

.lienpa{
color: #21545E;
text-align: center;
font-size:12px;
font-variant: small-caps;
font-weight:lighter;
padding: 2px;
}

.lienpa:hover{
background-color: #2D0F00;
text-align: center;
color: #89816D;
font-size:12px;
font-variant: small-caps;
font-weight:lighter;}

t1{
  propriété;
font-size:14px;
font-variant: small-caps;
font-weight: bold;
font-family: Arial;
background-color: #none;
text-align: center;
color: #21545E;
}

.info_bulle{
  position:relative;
  text-decoration:none;
  font-variant:small-caps;
  color:silver;
  }
 
.info_bulle:hover{
  color:silver;
  border-bottom: 1px solid #554832;
  letter-spacing:1px;
  font-weight:bold;
  }
 
.info_bulle div{
  display:none;
  color:silver;
  font-weight:normal;
  font-variant:normal;
  text-align:center;
}

.info_bulle:hover div{
  display:inline;
    z-index: 999;
  width:150px;
  background-color: black;
  border: 1px solid #554832;
  position: absolute;
  top: 12px;
  right : 0px;
}
</style>
</head>

<body><div id="pafocus_head"></div><div id="pafocus_body"><div id="pafocus"><div class="pafocus_onglet1" tabindex="0">Poudlard<div class="pafocus_contenu1"><div class="pafocus_contenu"><center><table><tr><td><center>
<t1>Sabliers des 4 Maisons</t1><br><center><table style="margin-top: 10px; text-align: center;">
<tr><td><img src=http://img11.hostingpics.net/pics/407897gryffo10.png></td><td style="margin-right:5px;"><div style="font-size:14px;">... points</div></td></tr>
<tr><td><img src=http://img11.hostingpics.net/pics/911539poufso10.png></td><td><div style="font-size:14px;">... points</div></td></tr>
<tr><td><img src=http://img11.hostingpics.net/pics/747671serdai10.png></td>
<td style="margin-right:5px;"><div style="font-size:14px;">... points</div></td></tr>
<tr><td><img src=http://img11.hostingpics.net/pics/237493serpen10.png></td><td><div style="font-size:14px;">... points</div></center></td></tr></table></td><td> <table><tr><td width="500px"><center><t1>Tableau d'Affichage</t1></center>
<table style="margin-top: 8px;"><tr><td>
<div style="width:450px; height:70px; margin:auto;overflow-y:auto;" text-align="center">
<p>* Evènement [à venir] : rencontre internationale des jeunesses puristes : inscription</p>
<p>* Juin 2005 : fin d'année à Poudlard : discours de l'Inquisiteur</p>
<p>* Mai 2005 : Eris Valverde est nommé Inquisiteur de Poudlard : <a href="http://www.poudnoir.com/t8261-diriger-ou-sepandre-il-faut-choisir-evenement" class="postlink" target="_blank">discours de l'Inquisiteur</a> </p>
</div></td></tr></table></center></td></tr>
<tr><td width="500px"><center><t1>Les cours</t1></center>
<div style="width:450px; height:95px; margin:auto;overflow-y:auto;">
<p>Les cours sont obligatoires, merci de vous inscrire</p>
<p>Cours de Magie noir ♦ Pr XXX ♦ Inscription ♦ <a href="http://www.poudnoir.com/f23-salle-de-classe-de-magie-noire?tid=c83431862f23fbdbf777e01cea3075ac" class="postlink" target="_blank">Salle de classe</a></p>
<p>Cours de Botanique ♦ Pr XXX ♦ Inscription ♦ Salle de classe</p>
<p>Cours de Politique Internationale ♦ Pr XXX ♦ Inscription ♦ Salle de classe</p>
<p>Cours de Défense absolue ♦ Pr XXX ♦ Inscription ♦ <a href="http://www.poudnoir.com/f210-salle-de-defense-absolue?tid=c83431862f23fbdbf777e01cea3075ac" class="postlink" target="_blank">Salle de classe</a></p>
<p>Cours de Sortilège ♦ Pr XXX ♦ Inscription ♦ Salle de classe</p>
<p>Cours de Potions ♦ Pr XXX ♦ Inscription ♦ <a href="http://www.poudnoir.com/f16-salle-de-classe-de-potion?tid=c83431862f23fbdbf777e01cea3075ac" class="postlink" target="_blank">Salle de classe</a></p>
<p>Cours d'Etude des Nuisibles ♦ Pr XXX ♦ Inscription ♦ <a href="http://www.poudnoir.com/f126-salle-de-classe-de-l-etude-des-nuisibles?tid=7caed8363a0b72a660afbbec4d27b44e" class="postlink" target="_blank">Salle de classe</a></p>
<p>Cours de Métamorphose ♦ Pr XXX ♦ Inscription ♦ <a href="http://www.poudnoir.com/f33-salle-de-classe-de-metamorphose?tid=7caed8363a0b72a660afbbec4d27b44e" class="postlink" target="_blank">Salle de classe</a></p>
</div></td></tr></table> </td></tr></table></center>
</div>
</div></div><div class="pafocus_onglet2" tabindex="0">Ministère<div class="pafocus_contenu2"><div class="pafocus_contenu"><table><tr><td width="350px"><center><t1>Rappels du Ministère</t1></center><br>
<div style="width:300px; height:125px; margin:auto; overflow-y:auto;">
<p>* Tous les sorciers doivent se présenter à la Commission du Sang ! Ceux qui ne peuvent prouver leur Sang seront Hors la Loi.</p>
<p>* Le Ministère vous incite à la méfiance, tout document concernant l'Ordre du Phénix peut être dangereux, nous vous suggérons la plus grande prudence vis à vis de ces lettres, et nous vous rappelons que tout lien avec cette organisation hors la loi est passible d'une amende et d'une peine d'emprisonnement à Azkaban.</p></div>
<center><div class="lienpa">♦ <a href="http://www.poudnoir.com/t2780-avada-kedavra" target="_blank">Le Sortilège de Mort</a> ♦</div>
<div class="lienpa">♦ <a href="http://www.poudnoir.com/t6056-registre-du-sang-v2#143571" target="_blank">Registre du Sang</a> ♦</div></center></div></td>

<td width="350px"><center><t1>Radio Terroriste : l'info 24/24 sur les Hors-la-Loi</t1></center><br>
<div style="width:300px; height:150px; margin:auto;overflow-y:auto;">
<p>Les Hors la Loi sont en fuite depuis leur défaite en Ecosse.</p>
<p>* Si vous apercevez un Hors la Loi, contactez de suite le Ministère.</p>
<p>* Ils sont très dangereux, ne tentez pas d'utiliser la magie contre eux.</p>
<p>* Un corps inanimé de sorcier a été découvert à Londres, Kreuk serait l'auteure du crime.</p>
<p>* Luna Lovegood et Minerva McGonagall auraient été aperçues dans le quartier sud d'Ipswich (Angleterre)</p>
<p>* Sheppard repéré le 18 juin à Hyde Park et les alentours. L'homme est blessé par un tir moldu. </p>
<p>* Suite à leur défaite à Sligo, les résistants et autres bourbistes tentent de tenir les forces des ténèbres le plus loin de Dublin.</p>
<p>* L'Ordre Du Phénix prend part à l'immense conférence bourbiste qui se tient à Valpo, lieu symbolique de la victoire du Bourbisme au Chili</p>
</div><br>
<center><div class="lienpa">♦ <a href="http://www.poudnoir.com/h1-dossier-terroriste" target="_blank">Dossier Terroriste</a> ♦</div></center>
</td></tr></table></div></div></div>  <div class="pafocus_onglet3" tabindex="0">Partenaires<div class="pafocus_contenu3"><div class="pafocus_contenu"><center><table><tr><td align="center"><t1>Top Partenaires</t1><br>
<div style="margin-top:10px;"><a href="http://www.heritier-des-tenebres.com/" target="_blank"><img src="http://img15.hostingpics.net/pics/31319710035.png"></a>
<a href="http://atlantisinsurrection.forumactif.fr/" target="_blank"><img src="http://img15.hostingpics.net/pics/618275bouton22.png"></a>
<a href="http://vampires-kingdom.forumactif.com" target="_blank"><img src="http://i46.servimg.com/u/f46/12/86/35/20/liez210.jpg"></a>
<a href="http://piratedescaraibes.forum-actif.net" target="_blank"><img src="http://i60.servimg.com/u/f60/12/30/44/12/100_x_10.jpg"></a>
<a href="http://starwarsdestiny.jdrforum.com/" target="_blank"><img src="http://img39.imageshack.us/img39/6092/boutonpartenaire03.png"></a>
<a href="http://www.saints-of-thepast.com/" target="_blank"><img src="http://img245.imageshack.us/img245/1213/sanstitre22a.png"></a>
<a href="http://reseau-potterien-francophone.kazeo.com/" target="_blank"><img src="http://www.gazette-du-sorcier.com/img/rpf.png"></a>
<a href="http://ested.forumactif.org/" target="_blank"><img src="http://i43.servimg.com/u/f43/12/23/15/70/ested_10.png"></a></div>
<div><a href="http://www.sawen.net/" target="_blank"><img src="http://institut-solius.isteriae.net/forum/images/boutons/ref-sawen.jpg"></a>
<a href="https://www.facebook.com/Poudnoir" target="_blank"><img src="http://static.infoclimat.net/images/icone_facebook.png"></a></div></td>

<td width="200px" align="center"><t1>Devenir Partenaire ?</t1><br><div class="lienpa" style="margin-top:10px;"><a href="http://www.poudnoir.com/f243-nos-partenaires" target="_blank">Nos Partenaires</a></div><div class="lienpa"><a href="http://www.poudnoir.com/t5808-notre-fiche" target="_blank">Notre Fiche</a></div><div class="lienpa"><a href="http://www.poudnoir.com/t3539-nous-lier" target="_blank">Nos Boutons</a></div><div class="lienpa"><a href="http://www.poudnoir.com/f196-partie-moldue-questions" target="_blank">Par ici, votre demande !</a></div></div></td></tr></table></center>
<br><br>
<center><a href="http://best-rpg.forumpro.fr/" target="_blank"><img src="http://i53.tinypic.com/2emnbeu.png"></a></center></div>
</div></div><div class="pafocus_onglet4" tabindex="0">En Savoir +<div class="pafocus_contenu4"><div class="pafocus_contenu"><center><table><tr><td width="400px"><center><iframe width="400" height="215" src="http://www.youtube.com/embed/ocwnf-qJbKA" frameborder="0" allowfullscreen></iframe></center></td>

<td><center><t1>Crédits</t1><br><p>Toute reproduction totale ou partielle du Forum est interdite. Poudnoir est soumis au copyright en rigueur sous Forumactif pour son fond (propriété intellectuelle) et sa forme (propriété physique).</p><br>
<p>Design Version 6.0 par Captain.</p>
<p>Codage par <a href="http://fofolies.e-monsite.com/" target="_blank">Roxy</a> avec l'aide de <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a>.</p></center></td></tr></table></center></div>
</div></div><div class="pafocus_contenu0"><div class="pafocus_contenu"><center><table width="675px" style:"margin-bottom:1px;">
<tr><td width="300px">
<center><t1>Portoloins</t1></center>
<div align="center">
<div class="lienpa"><a href="http://www.poudnoir.com/t5284-code-du-bon-sorcier-sur-poudnoir" target="_blank">Serment Inviolable</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/t43-contexte-de-poudnoir" target="_blank">Histoire de Poudnoir</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/t8289-les-groupes-sur-poudnoir?highlight=groupes" target="_blank">Groupes</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/t4773-les-liens-utiles" target="_blank">Liens Utiles</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/t6389-points-d-attaque-et-point-de-vie" target="_blank">Utiliser la Magie</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/t3307-listes-des-avatars-pris" target="_blank">Célébrités Prises</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/t4161-commission-du-sang" target="_blank">Commission du Sang</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/f196-partie-moldue-questions" target="_blank">Partie Moldue (Invité)</a></div>
<div class="lienpa"><a href="http://www.poudnoir.com/h10-pantheon-accueil" target="_blank">Panthéon de Poudnoir</a></div></div></td>

<td width="250px"><center><t1>Les Tyrans</t1></center>
<center><table><tr><td class="icone"><a href="#" class="info_bulle"><img src="http://img79.imageshack.us/img79/2894/john3eg8.jpg" width="25px;" style="border: 1px solid silver; padding: 2px;"><div><table width="150px" cellspacing="1" cellpadding="1" border="0"><tr><td><p>John Sheppard<br>Fondateur Tyrannique</p></td></tr></table></div></a></td>
<td class="icone"><a href="#" class="info_bulle"><img src="http://www.hollow-art.com/files/bases/20110321/bill_nighy_in_underword_rise_of_the_lycans_100.png" width="25px;" style="border: 1px solid silver; padding: 2px;"><div><table width="150px" cellspacing="1" cellpadding="1" border="0"><tr><td><p>Léon Brom<br>Admin d'Acier</p></td></tr></table></div></a></td>
<td class="icone"><a href="#" class="info_bulle"><img src="http://www.hollow-art.com/files/bases/20100528/Keira_Knightley_76.png" width="25px;" style="border: 1px solid silver; padding: 2px;"><div><table width="150px" cellspacing="1" cellpadding="1" border="0"><tr><td><p>Lyna Sweet<br>Admin Semi-Croustillant</p></td></tr></table></div></a></td></tr></table>
<table><tr><td class="icone"><a href="#" class="info_bulle"><img src="http://www.enoughproject.org/files/180/ryan%20gosling%20100.jpg" width="25px;" style="border: 1px solid silver; padding: 2px;"><div><table width="150px" cellspacing="1" cellpadding="1" border="0"><tr><td><p>Tryan De SaintClair<br>Homo Moderatis</p></td></tr></table></div></a></td>
<td class="icone"><a href="#" class="info_bulle"><img src="http://image.noelshack.com/fichiers/2012/35/1346608273-james110.png" width="25px;" style="border: 1px solid silver; padding: 2px;"><div><table width="150px" cellspacing="1" cellpadding="1" border="0"><tr><td><p>James Eccleston<br>Modo au Lion</p></td></tr></table></div></a></td>
<td class="icone"><a href="#" class="info_bulle"><img src="http://image.noelshack.com/fichiers/2013/28/1373567685-poud.png" width="25px;" style="border: 1px solid silver; padding: 2px;"><div><table width="150px" cellspacing="1" cellpadding="1" border="0"><tr><td><p>Eris Valverde<br>Jellyka Rose</p></td></tr></table></div></a></td></tr></table></center>

<center><t1>Wanted !</t1></center>
<center><table><tr><td class="icone"><a href="#"><img src="http://84.img.v4.skyrock.net/8466/81148466/pics/photo_81148466_3.png" width="25px;" style="border: 1px solid silver; padding: 2px;"></a></td>
<td class="icone"><a href="#"><img src="http://img10.hostingpics.net/pics/770810mrserinreynoldspb296.jpg" width="25px;" style="border: 1px solid silver; padding: 2px;"></a></td>
<td class="icone"><a href="#"><img src="http://image.noelshack.com/fichiers/2013/26/1372501897-ron.png" width="25px;" style="border: 1px solid silver; padding: 2px;"></a></td></tr></table>
<table><tr><td class="icone"><a href="#"><img src="http://a0.twimg.com/profile_images/1335096010/Nicole-Kidman-49_normal.JPG" width="25px;" style="border: 1px solid silver; padding: 2px;"></a></td>
<td class="icone"><a href="#"><img src="http://i40.servimg.com/u/f40/11/70/05/75/bella10.png" width="25px;" style="border: 1px solid silver; padding: 2px;"></a></td>
<td class="icone"><a href="#"><img src="http://image.noelshack.com/fichiers/2012/35/1346609266-vacant.png" width="25px;" style="border: 1px solid silver; padding: 2px;"></a></td></tr></table></center>
<center><a href="http://www.poudnoir.com/f222-personnages-vacants" target="_blank" style="font-size:10px;">Plus ?</a></center></td></tr></table></center></div>
</div>
</div>
</div><div id="pafocus_foot"></div>
</body></html>
A mettre dans "Message sur la page d'accueil"
Code:
<center><iframe src="http://oubliette.forums-actifs.com/h2-pa-poudnoir" frameborder="0" width="955" height="475" scrolling="no" allowTransparency="true" ></iframe></center>
Revenir en haut Aller en bas
Roxy

Je suis l'ami de tous, je suis un ...
POUFSOUFFLE

avatar

Messages : 721
Date d'inscription : 26/08/2008

MessageSujet: Re: Mes Pages d'Accueil Sam 18 Aoû - 16:00



Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Mes Pages d'Accueil

Revenir en haut Aller en bas

Mes Pages d'Accueil

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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Mes Essais :: ~Mes Codages~-