L'annuaire des forums Forumactif
votre référence en terme de référencement et de développement de forums.
 


Aller à la page : Précédent  1, 2


 [Phantasmagoria] Commande d'une page d'accueil avec 2 onglets

ArlemV.I.P.
Messages : 3712
JulienV.I.P.avatar
Messages : 175
Merci pour ton travail.

Je suis rassuré la liste des véhicules passe sur 1 ligne par catégorie même si tu ne les a pas tous mis en complétant ça devrait être bon.

Pourrais-tu ajouter sous la liste des véhicules "Que signifient ces abréviations ?" qui dirige vers http://www.ccis-ir.com/t579-index-reglements-et-systemes-de-jeu#10187 et "Légende : Disponible - Alerté - En intervention - Indisponible" (vert clair - orange - rouge - noir) que j'avais oublié alors du plan ?
ArlemV.I.P.avatar
Messages : 3712
Fait, ça te va ?
JulienV.I.P.avatar
Messages : 175
C'est parfait merci.
ArlemV.I.P.avatar
Messages : 3712
Alors

1 - Modules => Gestion des codes JS => Créer un nouveau JS :
Titre : PA
Placement : Sur l'index
Code JS :
Code:
function changeOnglet(_this) {
   var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
   for (var i = 0; i < getOnglets.length; i++) {
      if(getOnglets[i].id) {
         if(getOnglets[i].id == _this.id) {
            getOnglets[i].className = 'mon_onglet_selected';
            document.getElementById('c' + _this.id).style.display          = 'block';
         } else {
            getOnglets[i].className = 'mon_onglet';
            document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
         }
      }
   }
}

2 - Affichage => Couleurs => Feuille de style CSS, colle ça à la fin :
Code:
/* DEBUT Code CSS de la PA */
a {
   text-decoration:none;
   color:#666;
}
ul,li {
   list-style:none;
}
.mon_onglet,.mon_onglet:hover,.mon_onglet_selected {
   margin-top:-20px;
   font-size:18px;
   color:#000;
   background-color:#dbdbda;
   border:2px solid #000;
}
.clear {
   clear:both;
}
h18 {
   font-size:9px;
}
#mes_contenus {
   margin-top:-5px;
   color:#000;
   padding:10px;
   text-align:justify;
   background-color:#fff;
   width:840px;
   height:350px;
   border:2px solid #000;
}
.titres_pa {
   text-align:center;
   color:#000;
   text-shadow:0px 0px 2px #000;
   font-family:Time new roman;
   font-size:18px;
   margin-top:-7px;
   margin-bottom:-2px;
}
.fond_bloc {
   background-color:#dbdbda;
   -webkit-box-shadow:0px 0px 1px #000;
   -moz-box-shadow:0px 0px 1px #000;
   box-shadow:0px 0px 1px #000;
   border:2px solid #000;
}
.contexte {
   width:350px;
   height:130px;
   padding:5px;
   font-size:11px;
   text-align:justify;
}
.contexte1 {
   width:350px;
   height:130px;
   padding:5px;
   font-size:11px;
   text-align:center;
}
.copy {
   text-align:center;
   font-size:9px;
}
#navigation a:link,#navigation a:visited,#navigation a:active {
   font-style:Georgia;
   font-size:12px;
   text-align:center;
   padding:2px;
   color:#000;
   display:inline;
   text-transform:capitalize;
}
#navigation a:hover {
   color:#000;
   font-size:12px;
   text-shadow:0px 0px 2px #000;
}
.vehicule {
   width:700px;
   height:150px;
   overflow:auto;
   text-align:justify;
   padding:5px;
}
.intervention {
   width:700px;
   height:70px;
   overflow:auto;
   text-align:justify;
   padding: 5px;
}
/* FIN Code CSS de la PA */

3 - Affichage => Généralités => Contenu du message, colle ça :
Code:
   <table>
   <tr>
      <td>
         <br>
         <br>
         <div id="mes_onglets">
            <li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);"><b>Accueil</b></li>
            <br/><br/><br/>
            <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);"><b>Synoptiques</b></li>
         </div>
      </td>
      <td>
         <div id="co_1" class="mon_contenu">
            <table border="0" width="100%" cellspacing="2">
            <tr>
               <td align="center" valign="top">
                  <h1 class="titres_pa"> Bienvenue </h1>
                  <div class="fond_bloc">
                     <div class="contexte">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa
                     </div>
                  </div>
               </td>
               <td align="center" valign="top">
                  <h1 class="titres_pa"> Actuellement</h1>
                  <div class="fond_bloc">
                     <div class="contexte">
                        <a href="https://docs.google.com/spreadsheet/viewform?formkey=dE1MeG9SbHZReUFQMFJYZXN6eE9Henc6MQ rejoignez-nous sur facebook -> dirige vers https://www.facebook.com/pages/CIS-Ile-Rousse-entre-mer-montagne/211095558901906">Donnez votre avis en ligne</a>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td align="center" valign="top">
                  <h1 class="titres_pa"> Liens utiles</h1>
                  <div class="fond_bloc">
                     <div class="contexte1">
                        <div id="navigation">
                           <a href="http://www.ccis-ir.com/t80-absences#81">Absences</a><br/>
                           <a href="http://www.ccis-ir.com/t78-affectations">Affectations</a><br/>
                           <a href="http://www.ccis-ir.com/t572-garde-de-septembre">Garde de Septembre</a><br/>
                           <a href="http://www.ccis-ir.com/t5-aide-pour-debuter-une-fois-integre">Aide pour débuter </a><br/>
                           <a href="http://www.ccis-ir.com/t579-index-reglements-et-systemes-de-jeu">Index des règlements </a>
                        </div>
                     </div>
                  </div>
               </td>
               <td align="center" valign="middle">
                  <h1 class="titres_pa"> Votez pour nous</h1>
                  <div class="fond_bloc">
                     <div class="contexte1">
                        <a href="http://lesforumsdefa.olympe.in/topsite/vote.php?id=589" target="_blank"><img src="http://lesforumsdefa.olympe.in/topsite/img/vote.gif" border="0" id="votelfd"/></a><br/>
                        <a href="http://www.weborama.fr/?id_vote=456398" target="_top"><img src="http://i33.servimg.com/u/f33/11/23/80/82/votesc10.gif" alt="" border="0"><span style="text-decoration: underline;"></span></a>
                     </div>
                  </div>
               </td>
            </tr>
            </table>
         </div>
         <div id="co_2" class="mon_contenu" style="display: none;">
            <table border="0" width="100%" cellspacing="2">
            <tr>
               <td align="center" valign="top">
                  <h1 class="titres_pa"> Véhicules</h1>
                  <div class="fond_bloc">
                     <div class="vehicule">
                         Secours à personne : <a href="http://www.ccis-ir.com/t26-vsav-25-vehicule-de-secours-et-d-assistance-aux-victimes">VSAV 25</a>, <a href="http://www.ccis-ir.com/t29-vrm-01-vehicule-radio-medicalise">VRM 01</a><br/>
                        Incendie : <a href="http://www.ccis-ir.com/t32-ccfm-87-camion-citerne-feux-de-foret-moyen">CCFM 87</a>, <a href="http://www.ccis-ir.com/t33-ccfm-99-camion-citerne-feux-de-foret-moyen">CCFM 99</a>, <a href="http://www.ccis-ir.com/t35-ccgc-54-camion-citerne-grande-capacite">CCGC 54</a><br/>
                        Intervention diverse : <a href="http://www.ccis-ir.com/t335-vidp-24-vehicule-d-intervention-divers-presignalisation">VIDP 24</a><br/>
                        Intervention spécialisée : <a href="http://www.ccis-ir.com/t39-vpce-32-vehicule-porte-cellule">VPCE 32</a>, <a href="http://www.ccis-ir.com/t40-cearive-22-cellule-ari-eclairage-ventilation">CEARIVE 22</a>, <a href="http://www.ccis-ir.com/t41-cemafor-04-cellule-manoeuvre-de-force">CEMAFOR 04</a><br/>
                        Commandement : <a href="http://www.ccis-ir.com/t42-vlcg-12-vehicule-de-liaison-chef-de-groupe">VLCG 12</a>, <a href="http://www.ccis-ir.com/t44-vlhr-32-vehicule-de-liaison-hors-routes">VLHR 32</a>, <a href="http://www.ccis-ir.com/t43-vlhr-62-vehicule-de-liaison-hors-routes">VLHR 62</a><br/><br/>
<a href="http://www.ccis-ir.com/t579-index-reglements-et-systemes-de-jeu#10187">Que signifient ces abréviations ?</a><br/><br/>
Légende : <span style="color:#00CC00">Disponible</span> - <span style="color:#FF9933">Alerté</span> - <span style="color:#FF0000">En intervention</span> - <span style="color:#000000">Indisponible</span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td align="center" valign="top">
                  <h1 class="titres_pa"> Interventions en cours</h1>
                  <div class="fond_bloc">
                     <div class="intervention">
                         Intervention 1 <br/>
                        Intervention 2 <br/>
                        Intervention 3 <br/>
                     </div>
                  </div>
               </td>
            </tr>
            </table>
             Dernière MAJ :00/00/00
         </div>
<hr>
         <div class="copy">
             Message d'accueil codé par Phantasmagoria sur <a href="http://www.forumsdeforumactif.com/"/> L'annuaire des forums de ForumActif</a>. Toute copie partielle ou totale est strictement interdite<br/>
            Merci de respecter notre travail.
         </div>
      </td>
   </tr>
   </table>
JulienV.I.P.avatar
Messages : 175
Merci pour tout. Smile
ArlemV.I.P.avatar
Messages : 3712
Merci à Phanta surtout. \o/

Je déplace.

Aller à la page : Précédent  1, 2,
 Sujets similaires
-
» [ABANDON] Une page d'accueil à onglets
» Message de page d'accueil pour Amplificatum[Phantasmagoria]
» ['Christa] Commande Page d'Accueil
» Commande Page d'accueil [Lixyr]
» [Lixyr Yrna] Une page d'accueil pour rainbow style

Répondre au sujet


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

Modérer

Trames

  • Nos services
  • Prés. obligatoire
  • Référencé
  • Réf. (comp)
  • Prérelance
  • 1ère relance
  • 2ème relance
  • Recherche (relance)
  • Recherche (corbeille)
  • Formulaire manquant
  • Formulaire incomplet
  • 1
  • 2
  • 3
  • 4
  • 5
  • Evaluation