Page d'accueil en onglets

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

Résolu Page d'accueil en onglets

Message par Rin_. le Sam 10 Déc 2011 - 12:14

Bonjour,
Ma demande d'aide "sois-disant" de commande étant verrouillée, je refais un sujet pour vous expliquer un p r o b l è m e. Et non pour vous exposer une commande.

[sujet vérrouillé -> http://forum.forumactif.com/t320222-gros-probleme-page-d-accueil]

Je souhaiterai savoir comme faire une page d'accueil en onglet, non pas avec un onglet, mais en onglets, comme sur l'image du sujet verrouillé indiqué plus haut.
Ce n'est pas une commande, mais une demande d'aide surement de de script, BBcode (etc.).

Je comprendrai si un membre du staff verrouillerai mon message une fois de plus, mais s'il vous plait, je ne demande qu'un code. Pas une page d'accueil !


Dernière édition par Rin_. le Sam 17 Déc 2011 - 11:40, édité 2 fois

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Invité le Sam 10 Déc 2011 - 12:44

Bonjour,

Avez-vous essayé en vous servant de ce tutoriel?
> http://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil.

Je pense qu'il est possible de modifier la class du message d'accueil pour le mettre en transparence, et ensuite, placer un tableau à onglet dans le message d'accueil.

Votre demande ne sera pas verrouillée si vous respectez les conditions suivantes:
- Faire un schéma de ce que vous voulez réaliser ( pas de screen)
- Faire un essai et nous dire/ montrer ce que ça donne Wink .

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Sam 10 Déc 2011 - 13:08

Récemment j'ai utilisé ce tutoriel pour faire un tableau à onglets pour ma page d'accueil. Mais jamais en l'adaptant à la class du message d'accueil.

Je n'ai aucune connaissance en codage pour faire cela Confused

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Dim 11 Déc 2011 - 11:54

Up ~
Alors, une idée Very Happy ?

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Lun 12 Déc 2011 - 19:08

Petit Up again Smile
Quelqu'un peut m'aider?

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Mer 14 Déc 2011 - 14:38

Up ! Une petite aide s'il vous plait !

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par piernogood le Mer 14 Déc 2011 - 16:58

Bonjour,

Peut être que ce si vous aidera : http://forum.forumactif.com/t318953-annonce-avance

Amicalement,
Filing

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Mer 14 Déc 2011 - 18:21

En fait il s'agit de tableaux effectivement, mais que la page d'accueil SOIT un tableau à onglets.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Ven 16 Déc 2011 - 14:29

Up ! J'attends des réponses :O

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par piernogood le Sam 17 Déc 2011 - 1:40

Je ne c'est pas du tous t'aider, sa doit ce trouver dans les templates T_T

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Sam 17 Déc 2011 - 10:11

J'ai vraiment besoin d'aide... quelqu'un pourrait m'aider?
J'attends votre aide.

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Invité le Sam 17 Déc 2011 - 11:01

Bonjour,

Je pensais que mon premier message vous avez mis sur la voie ... En utilisant ce code Html dans le message d'accueil:
Code:
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</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></div></div>
Ce CSS, à modifier à votre convenance:
Code:
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 2px solid #006699;
  cursor: pointer;
  margin-bottom: -2px;
  list-style: none;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border-top: 2px solid #006699;
  border-right: 2px solid #006699;
  border-left: 2px solid #006699;
  border-bottom: 0px solid #fff;
  cursor: pointer;
  margin-bottom: -3px;
  list-style: none;}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #fff;
  border: 2px solid #006699;
  padding: 10px;
  line-height: normal;
  font-size: 11px;
width: 850px;
height: 250px;}
#mes_contenus, #mes_onglets{
  width: 875px;
}
Ce code javascript:
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';
            }
        }
    }         
}
Et enfin en modifiant le début du template index_body, ou ceci:
Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
devient:
Code:
<!-- BEGIN message_admin_index -->
<table class="" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
J'obtient un tableau à onglet sans le cadre du message d'accueil.


Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Sam 17 Déc 2011 - 11:26

Je suis désolée d'être aussi ignorante x______x
Enfin, merci beaucoup de votre réponse, je viens d'arriver à l'étape modification de la template, et il me dit : Erreur: La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.

EDIT : Ah non, j'avais fait une erreur, ça marche Very Happy
C'est parfait !

Merci beaucoup à vous !

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Invité le Sam 17 Déc 2011 - 11:31

Bizarre, normalement ça ne devrait pas. Pouvvez vous me donner votre index_body que je regarde?

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Sam 17 Déc 2011 - 11:35

J'ai édité mon message précédent le votre, pour vous indiquer que ça marche, et que c'était une erreur de ma part.

Merci de votre aide Isolde Very Happy
EDIT : Ah... Savez-vous comment mettre une image à la place du fond des onglets et de leur contenu?

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Invité le Sam 17 Déc 2011 - 13:52

Pour placer une image de fond, il faut passer par le CSS. Dans la partie qui concerne les contenus et les onglets, remplacer la couleur de fond par une image.
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 2px solid #006699;
cursor: pointer;
margin-bottom: -2px;
list-style: none;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border-top: 2px solid #006699;
border-right: 2px solid #006699;
border-left: 2px solid #006699;
border-bottom: 0px solid #fff;
cursor: pointer;
margin-bottom: -3px;
list-style: none;}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #fff;
border: 2px solid #006699;
padding: 10px;
line-height: normal;
font-size: 11px;
width: 850px;
height: 250px;}
#mes_contenus, #mes_onglets{
width: 875px;
}
Les partie en orange sont à remplacer par:
Code:
background: url('ADRESSE DE L'IMAGE');
Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Rin_. le Sam 17 Déc 2011 - 15:16

Génial *O*
Une dernière question - c'est la dernière promis - pour mettre une ombre portée sur les bords des onglets et des bords de leur contenus, comment faut-il faire?

Rin_.
****

Féminin
Messages : 250
Inscrit(e) le : 02/04/2011

http://google.fr
Rin_. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil en onglets

Message par Invité le Dim 18 Déc 2011 - 17:01

Bonjour,

Il faut rajouter des propriétés CSS; par exemple pour les onglets(mon_onglet et mon_onglet_selected):
Code:
-webkit-box-shadow:2px 0px 2px 0px #000;
-moz-box-shadow:2px 0px 2px 0px #000;
box-shadow:2px 0px 2px 0px #000;
et pour les contenus (mon_contenu):
Code:
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #000;
box-shadow:2px 2px 2px #000;

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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