Pôle Emploi


 
AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 [Page d'Accueil]Une base pour travailler ...

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Fondateur
Messages : 1690

MessageSujet: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:18

La Page d'Accueil est très importante pour un forum.
Elle permet de voir en peu de temps tout ce qu'un forum peut offrir


Je vous propose ci-dessous des modèles que j'ai fait moi-même.

Ils sont bien sûr à modifier pour les couleurs et les images.
Si vous n'y arrivez pas, vous pouvez toujours demander de l'aide dans la section "Codage"

Veuillez laisser le crédit s'il vous plaît ...
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:19

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.forumactif.ws/">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;}
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:19

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.forumactif.ws/">Roxy</a></FONT></div></SPAN></p></TD></TR></TBODY></TABLE></SPAN></SPAN>

Pas de CSS pour cette présentation ...
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:20

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.forumactif.ws/">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;}
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:20

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.forumactif.ws/">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;}
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:20

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.forumactif.ws/" 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;
  }
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:20

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.forumactif.ws/">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;
  }
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:21

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.forumactif.ws/" 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;
  }
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fondateur
Messages : 1690

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Mar 08 Mar 2011, 17:21

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.forumactif.biz/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;}
Pôle Emploi HP

Merci de ne pas m'envoyer de mp.
Pour toutes questions ou en cas de soucis,
veuillez contacter Magicalus ou un modérateur du forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Sorcier confirmé
Messages : 799

MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   Sam 16 Avr 2011, 23:21

Page d'accueil 9
(les images de fond et du staff sont modifiables bien entendu)



A mettre dans "Message sur la page d'accueil"
Code:
<div id="en_tete">

<p>
<a href=# class="lien_nav_entete">• Contexte & groupes</a>
<a href=# class="lien_nav_entete">• Règlement</a>
<a href=# class="lien_nav_entete">• Présentation</a>
<a href=# class="lien_nav_entete">• Poste Vacants</a> </p>

<table>
<tr>
<td class="titre_tableau_entete">Contexte</td>
<td class="titre_tableau_entete">Scoops</td>
<td class="titre_tableau_entete">Nouveautés et staff</td>
</tr>

<tr>

<td class="tableau_entete"><marquee style="height: 240px; width: 190px" direction="up" onmouseover=this.stop(); onmouseout=this.start(); SCROLLAMOUNT=1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tortor est. Phasellus sed libero vitae odio interdum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lacus lectus, imperdiet varius ante. Aliquam mattis metus sit amet elit pharetra accumsan. Maecenas lacinia cursus pellentesque. Morbi venenatis commodo lorem, ultrices eleifend magna gravida et. Aliquam erat volutpat. Donec nec nisl vel eros elementum consequat vel eu purus. Phasellus ut sem tellus. Sed augue tortor, tincidunt vel vulputate et, facilisis nec justo. Nulla sollicitudin luctus odio non dignissim. </marquee></td>

<td class="tableau_entete"><div style="margin:auto; overflow-y: auto; height: 250px; width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tortor est. Phasellus sed libero vitae odio interdum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lacus lectus, imperdiet varius ante. Aliquam mattis metus sit amet elit pharetra accumsan. Maecenas lacinia cursus pellentesque. Morbi venenatis commodo lorem, ultrices eleifend magna gravida et. Aliquam erat volutpat. Donec nec nisl vel eros elementum consequat vel eu purus. Phasellus ut sem tellus. Sed augue tortor, tincidunt vel vulputate et, facilisis nec justo. Nulla sollicitudin luctus odio non dignissim. </div></td>


<td><DIV style="height: 122px; width: 200px; border: 2px solid #95ADA3; border-radius: 15px; padding: 10px; margin: auto; overflow-y: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tortor est. Phasellus sed libero vitae odio interdum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lacus lectus, imperdiet varius ante.</DIV><DIV style="height: 122px; width: 200px; border: 2px solid #95ADA3; border-radius: 15px; padding: 10px; text-align:center;">


<a href="#" class="info_bulle"><img src="http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg" onMouseOver="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_13.jpg';" onMouseOut="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg';" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Pseudo ~ Rang</td></tr></table></span></a>           

<a href="#" class="info_bulle"><img src="http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg" onMouseOver="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_13.jpg';" onMouseOut="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg';" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Pseudo ~ Rang</td></tr></table></span></a>

<a href="#" class="info_bulle"><img src="http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg" onMouseOver="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_13.jpg';" onMouseOut="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg';" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Pseudo ~ Rang</td></tr></table></span></a>


</DIV></td>
</tr>
</table>

</div>


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


#en_tete{
  background-image:url('http://i63.servimg.com/u/f63/14/93/14/05/fondco12.jpg');
  margin-top: -10px;
  }



.lien_nav_entete{
border: 2px solid #95ADA3;
border-radius: 50px;
padding: 2px;
}

.lien_nav_entete:hover{
border:2px dotted #5F7A70;
font-variant:small-caps;
text-decoration: none !important;
}


.titre_tableau_entete {
font-variant: small-caps;
font-size: 18px;
font-color: #5F7A70;
height: 25px;
border: 2px solid #95ADA3;
border-radius: 15px;
padding: 5px;
}


.tableau_entete {
height: 250px;
width: 200px;
border: 2px solid #95ADA3;
border-radius: 15px;
padding: 10px;
}



/*INFOBULLE*/
.info_bulle{
position:relative
}

.info_bulle span{
display:none
}

.info_bulle:hover span{
display:inline;
width: 175px;
height: 25px;
background-color:#000000;
border: 2px solid #e31f5b;
border-radius: 10px;
padding: 5px;
text-decoration: none !important;

position: absolute;
bottom: -35px;
left: -60px;
}
Pôle Emploi HP
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé


MessageSujet: Re: [Page d'Accueil]Une base pour travailler ...   

Pôle Emploi HP
Revenir en haut Aller en bas
 

[Page d'Accueil]Une base pour travailler ...

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

 Sujets similaires

-
» Il est trop tard pour travailler. [pv Montgo/Seb/Mel]
» Chargement lent de la page d'accueil ...
» Base pour Décorts Orks
» THE page d'accueil...
» accueil bug

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Pôle Emploi :: Le Chaudron Baveur :: Réserve :: Codage-