Page d’accueil original

[Sakur4]

Bonjour,

Alors voilà, j'ai fais une page d’accueil complètement normal. Pas mal de mes membres me demandes d'en faire une avec des codes, se serait plus original et attirait un public plus large.
Le genre de page d'accueil avec des onglets etc... mais je ne sais pas du tout m'y prendre, je m'y connais en HTML seulement

Donc j'aimerai apprendre à le faire (si vous avez des tutos etc..) ou bien quelqu'un qui puisse m'aider à l'a créer ?

Merci beaucoup

[Invité]

Bonjour,

Un tutoriel est disponible: Mettre un tableau en page d'accueil

Bonne journée!

[Sakur4]

Les tableaux je sais faire pas besoin de connaîtres les codes pour ça, mais de nos jours c'est trop simple et ça n'attire plus grand monde mais merci quand même.

Je recherches toujours quelqu'un qui puisse m'aider.

[Invité]

Bonjour,

Vous n'avez rien trouvé qui puisse vous permettre de faire une ébauche de code avec la fonction "rechercher"?
Par exemple ces sujets:
> Boite Onglets
>faire des onglets

Cordialement.

[Sakur4]

C'est trop général pour une personne qui débute... même en prennant des code CSS pour page d'accueil, lorsque je veux y mettre mes propre onglet, sa décolle tout etc... il me faudrait une aide bien détaillé :'(

[Invité]

Bonjour,

Pas de soucis, . Ce qui serait bien c'est de me donner des détails: le nombre d'onglet, s'ils sont au dessus ou sur le coté, si vous voulez une image comme titre ou juste du texte, si vous souhaitez ajouter un fond dans le contenu, si vous avez beaucoup de chose à mettre dans votre page d'accueil, si elle contient d'autres choses ... tout ce qui vous semble important.
A partir de là, je vous guiderai pas à pas pour la structure de votre page.

Cordialement.

[Sakur4]

Je vous remercie

Le mieux c'est que je trouve un exemple pour la structure :

Spoiler:

En dehors des onglets (pour qu'on puisse voir l'écriture), ce wallpaper :

http://hitskin.com/themes/14/60/43/i_background.jpg

Mon forum pour voir l'avancé du projet :

Spoiler:

Par contre j'aurai préférer les angles des cadres des onglets arrondies si possible.

Merci pour votre aide

[Invité]

Bonjour,
J'ai essayé de détaillé un maximum de choses, j'espère que ça restera assez clair quand même .
Etape 1,le message d'accueil:
Panneau d'admin'> affichage > généralités.

Code:

<script src="adresse du script qui permet d'animer les onglets"></script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
    <div id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

<script src="adresse du script qui permet d'animer les onglets"></script>

On ne s'occupe pas de cette partie là pour le moment. C'est la dernière étape.

<ul>les onglets</ul>

Crée une liste qui contient les onglets.

<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>

C'est la première ligne de la liste, donc le premier onglet (o_) il porte le n°1 (1), son identifiant est o_1. Onclick="changeOnglet(this);" c'est la façon dont on va voir cet onglet, onclick signifie qu'il faut cliquer dessus. Ces deux éléments sont liés au script (étape 3).
Sa class "mon_onglet_selected" fait appel à la feuille CSS, c'est l'étape 2. Cette class permet de sélectionner cet onglet par défaut au chargement de la page et de lui donner son apparence.

<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>

C'est le même principe que pour l'onglet 1, le deuxième onglet a pour identifiant o_2, il a le même mode de sélection. Seule la class change. la class "mon_onglet" fait appel à la feuille CSS et permet de donner leur apparence aux onglets dont le contenu est caché.

[quote]<div id="mes_onglets"> <div id="mes_contenus">[quote]
Ces div vont permettre de définir les dimensions globales de la boite à onglet.

<div class="clear">

Cela permet de cacher les contenus des onglets non sélectionnés.

<div id="co_1" class="mon_contenu">Mon contenu 1</div>

C'est la ligne du premier contenu (c) de l'onglet 1 (o_1), donc son identifiant est co_1. C'est pareil pour tous les contenu, il suffit de changer le chiffre pour le faire correspondre au chiffre de l'onglet.

Etape 2, la feuille CSS:
Panneau d'admin > Affichage > couleurs - feuille de style CSS.
Une fois le message d'accueil installé, on se rend compte que ça ne ressemble pas à grand chose... on va se servir du CSS pour ordonner un peu tout ça:

Code:

.mon_onglet{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 18%;
  list-style: none;}
     
.mon_onglet_selected{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: none !important;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 18%;
  list-style: none;}

.mon_onglet:hover{
  background: #b8efa1;} 
         
.clear{
  clear: both;}

.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  list-style: none;}

#mes_contenus, #mes_onglets{
  width: 100%;}



.mon_onglet{
float: left;/*aligne les onglets*/
padding: 2px;/*met une petite marge autour du texte*/
margin-right: 4px;/*espace les onglets*/
margin-bottom: -1px;/*colle les onglets au contenu*/
color: #000;/*couleur de l'ecriture*/
background: #ffffff;/*couleur du fond*/
border: 1px solid #ff0000;/*couleur style et épaisseur des contours*/
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;/*arrondis des angles du haut pour différents navigateurs*/
-webkit-border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
cursor: pointer;/*permet de mettre le curseur " flèche" dans la boite à onglet*/
width: 18%;/*largeur des onglets (on peut remplacer les % par un nombre de px*/
list-style: none;/*enlève les puces de liste*/}

Cette partie donne l'apparence aux onglets qui ne sont pas sélectionnés.

.mon_onglet_selected{...}

Cette partie donne l'apparence à l'onglet sélectionné.Ce sont les mêmes attributs que pour ".mon_onglet" à une différence: les contours. Ils sont tous séparés et le contour inférieur est effacé grâce à "border-bottom: none !important;". Il faut toujours bien faire correspondre les attributs de ".mon_onglet" et ".mon_onglet_selected", sauf si on veut obtenir des effets bizarres.

.mon_onglet:hover{
background: #b8efa1;}

Cela donne une couleur différente à l'onglet qu'on survole.

.clear{
clear: both;}

Ce petit morceau est essentiel, il permet de cacher les contenus non sélectionnés, on n'y touche pas .

.mon_contenu{
color: #000;/*couleur du texte*/
background: #ffffff;/*couleur du fond*/
border: 1px solid #ff0000;/*epaisseur style et couleur des contours*/
padding: 10px;/*marge autour du texte*/
list-style: none;/*enlève les puces de liste*/}

Ici on définit l'apparence des contenu qui apparaissent sous les onglets.

#mes_contenus, #mes_onglets{
width: 100%;}

Ceci donne la dimension globale (onglets+contenus) de la boite à onglet. On peut remplacer le % par un nombre de px.

Etape 3, le code javascript.
Normalement les onglets sont en place, mais on ne peut pas changer, pour cela il faut ajouter le script qu'on a laissé de coté au début.
Panneau d'admin > Modules > gestion des pages Html.
Créez une nouvelle page Html,donnez lui un nom, cochez "non" aux 2 questions et collez ceci:

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';
            }
        }
    }         
}

Enregistrez. Revenez à la page de gestion des pages html et notez le numéro que porte votre page. Puis retournez dans votre message d'accueil et remplacez:

<script src="adresse du script qui permet d'animer les onglets"></script>

par:

<script src="/-h3.htm"></script>

Remplacez le 3 par le numéro de votre page html.

Il ne vous reste plus qu'à contempler vos onglets .

Pour le fond en dehors des onglets, si j'ai bien compris, ajoutez une div autour de votre message d'accueil:

Code:

<div style="background: url('http://hitskin.com/themes/14/60/43/i_background.jpg'); width: 100%; height: 100%;">le message d'accueil</div>

Cordialement.

[Wiver Blades]

Bonsoir

Je voudrais posté ici si il m'est bien entendu autorisé sinon excusez moi du dérangement.

Après un bon moment à avoir lu et suivis cette aide qui me semble indéniablement efficace et opérationnelle j'ai rencontré quelques problèmes ou du moins un gros.

En effet j'ai bien une page d'accueil avec les onglets ainsi que le reste seulement il semblerai que la dernière étape ou il s'agit de relié la page d'accueil à la page HTML ne fonctionne pas et donc aucun onglet ne bouge et je reste sur le " contenu 1 "
Si vous pouviez m'aider cela me serait fort utile et je vous en remercie d'avance.

J'avais aussi une question car cela me turlupine, le " (this) " qui est dans le code n°1 de la page d'accueil me laisse perplexe à quoi sert il? Et faut il le modifier ?

Si dessous vous constaterez mon problème majeur:
http://hikutsutainushi.forumperso.com/

[Invité]

Bonjour et bienvenue Wiver Blades,

Puisque vous rencontrez des soucis, il serait bien d'ouvrir votre propre sujet en détaillant ce que vous avez fait. N'hésitez pas à placer le contenu de votre page Html, de votre message d'accueil et de votre CSS. Non seulement vous respecterez le règlement du forum, mais en plus il y aura moins de risque que je raconte des âneries en me mélangeant les pinceaux, chaque personne rencontrant des problèmes différents.

Pour la question concernant (_this), _this est le nom d'une variable que l'on retrouve dans les instructions de la fonction ChangeOnglet. Si vous le retirez, plus rien ne fonctionne. Par contre vous pouvez le renommer, en prenant garde à bien changer aussi la variable dans les instructions.

Cordialement.

[Invité]

Bonsoir,

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

[Invité]

Edit Anzu: Je le déplace dans les résolus, ton tuto peut servir Isolde