Tableau page accueil

[mewtwo]

Bonsoir =)


1 comment faire une barre avertissement comme celle de forum actif?
2 comment faire de belle page de bienvenue comme ca ? https://i.servimg.com/u/f48/15/98/30/11/66_bmp10.jpg

avec des liens et tout...c'est du codage? si oui il y a t il des personnes ici qui peuvent m'aider Sad


merci d'avance =D

[Azukan]

1 comment faire une barre avertissement comme celle de forum actif?

https://forum.forumactif.com/t235124-creer-une-barre-de-niveau-d-avertissement

2 comment faire de belle page de bienvenue comme ca ? https://i.servimg.com/u/f48/15/98/30/11/66_bmp10.jpg

ça ché pas!

[tupac]

Bonjour

Pour votre page de bienvenue tout dépend de combien de ligne et colonne vous désirez.
Pouvez vous nous faire un schéma et le poster ici même svp?

[mewtwo]

ok et c'est vous qui allez coder pour moi? =)

[tupac]

ok et c'est vous qui allez coder pour moi? =)

Non je vais vous expliquer comment faire

[mewtwo]

Ok merci beaucoup =D

je vais mettre en place quelques forums sur mon forum et pour les liens sur la page accueil et je poste mon schema ici =)

encore merci =3

[Automne]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[mewtwo]

dsl je suis entrain de faire le shema je pense bientot...

[mewtwo]

J'aimerais faire un tableau comme sur ce forum http://best-pokemon-event.forums-actifs.com/

je parle de ce tableau https://i.servimg.com/u/f48/15/98/30/11/ggggg_10.jpg

je voulais savoir est ce qu'il faut une image noir et une autre en couleur pour les onglet comme ici? le petit pokemon ''victini'' est noir quand on click pas sur l'ongle ou est ce que ca se fait automatiquement?

ensuite est ce que on peut mettre un fond différent pour chaque onglet? (le fond est bleu ici avec le pokemon ''suicune'' ou il fait que le meme fond pour tous les pages des onglets?

[tupac]

Bonsoir mewtwo

Pour une page d'accueil avec onglet faite comme ceci.

Placer le code suivant dans votre page d'accueil.

Code:

  <div align="center">
              <div class="systeme_onglets">
                      <div class="onglets">

        <!-- onglet 1 -->
                        <span class="onglet_0 onglet" id="onglet_one" onmouseover="javascript:change_onglet('one');">Onglet 1</span>
        <!-- onglet 2 -->
                        <span class="onglet_0 onglet" id="onglet_two" onmouseover="javascript:change_onglet('two');">Onglet 2</span><i>
        <!-- onglet 3 -->
                        <span class="onglet_0 onglet" id="onglet_tree" onmouseover="javascript:change_onglet('tree');">Onglet 3</span><i>
        <!-- onglet 4 -->
                        <span class="onglet_0 onglet" id="onglet_four" onmouseover="javascript:change_onglet('four');">Onglet 4</span>
      </div></div>


              <!--  CONTENU DU TABLEAU  -->

            <div class="contenu_onglets">

        <!-- Contenu  1ière page -->
                <div class="contenu_onglet" id="contenu_onglet_one">Contenu 1</div>

        <!-- Contenu  2ième page  -->
                  <div class="contenu_onglet" id="contenu_onglet_two">Contenu 2</div>

        <!-- Contenu  3ième page-->
                  <div class="contenu_onglet" id="contenu_onglet_tree">Contenu 3</div>

        <!-- Contenu  4ième page -->
                  <div class="contenu_onglet" id="contenu_onglet_four">Contenu 4</div>

    </div></div>

<script type="text/javascript">
                //<!--
                        var anc_onglet = 'one';
                        change_onglet(anc_onglet);
                //-->
</script>

Puis celui-la dans votre feuille de style css.

Code:

.onglet{
    color: #FFE4C4;       
    font-size: 14px;
    margin:10px;            /* marge entre chaque onglet */
    display:inline-block;
    cursor:pointer;
}

/* onglet selectionné */
.onglet_1{
    color: #ffffff;
}

.contenu_onglet{
    background-color:#444444;
    border: 1px solid #ffff00;
    -moz-border-radius: 20px;      /* arrondi les bordures cadre */
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin-top: 0px;        /* marge entre le cadre et les onglets */
    padding:5px;
    height: 272px;          /* largeur du tableau */     
    width: 500px;          /* hauteur du tableau */
    display:none;
}

et pour finir faite une page Java-Script comme ceci => Panneau d'administration => Modules => Gestion des codes Java-Script => Créer un nouveau Java-Script => Mettre un titre cocher sur l'index et placer le code suivant puis valider.

Code:

                //<!--
                        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;
                        }
                //-->

[mewtwo]

Merci beaucoup ca marche \o/ (:
voila le tableau sur mon forum teste
http://pokemongold.forum-pro.fr/
mais le fond du tableau est gris comment je fait pour le changer en cette image https://i.servimg.com/u/f48/15/98/30/11/suicun10.jpg

comment je fais? =(

[tupac]

Bonjour

Donc pour remplacer le fond de couleur par une image repère ce code.

Code:

.contenu_onglet{
    background-color:#444444;
    border: 1px solid #ffff00;
    -moz-border-radius: 20px;      /* arrondi les bordures cadre */
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin-top: 0px;        /* marge entre le cadre et les onglets */
    padding:5px;
    height: 272px;          /* largeur du tableau */   
    width: 500px;          /* hauteur du tableau */
    display:none;
}

Puis remplace ceci.

Code:

background-color:#444444;

Par ça.

Code:

 background-image:url(" image ici ");

Redimensionne ton image par rapport au contenu qui lui fait 272 de haut sur 500 de large donc ton image doit être redimensionnée de la même taille.

[mewtwo]

Ok merci =D

une derniere question svp comment on fait des des sauts de ligne comme ici x'(
https://i.servimg.com/u/f48/15/98/30/11/image_10.jpg

Dsl de vous dérangez encore avec mes questions D':

[tupac]

Bonjour mewtwo

Il vous faut simplement rajouter a la fin de votre phrase ceci.

Code:

<br>

Rajoutez-en autant que vous le souhaité pour un plus grand espace.

[mewtwo]

Ah :O

Merci beaucoup (: