tableau et boutons :)

[Invité]

Bonjour forumactif j'ai pris connaissance de l'un de vos tutoriels concernant le tableau en onglet pour la page d'accueil.
https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil
Ma question est la suivante --> Comment mettre les boutons des onglets au dessus du tableau et comment faire une marge le tableau et les boutons, j'aimerais egalement savoir, comment ajouter ou enlever un onglet?
Je vous remercie d'avance de votre aide , bonne journée à tous.

[Invité]

désolé du double post mais j'aimerais savoir comment changer les couleurs des boutons svp merci

[Dr. Karlos]

Bonsoir,

Le tableau place, par défaut, les boutons en haut de celui-ci, non. ?

Pour créer un espace entre les boutons et le tableau, trouvez ce code dans le CSS donné:

Code:

.systab .contents {
background: white;
border: 1px solid black;
color: black;
margin-bottom: 1px;
margin-top: 1px;
padding: 10px;
}

Et augmentez la valeur de margin-top: 1px;.


L'ajout d'onglet(s) se fait très facilement en ajoutant ce code:

Code:

 <div>
    <span>Mon onglet 3</span>
    Mon contenu 3
  </div>

Après cette partie:

Code:

Mon contenu 3
  </div>

Si le tableau doit avoir quatre onglets, le code HTML devient donc:

Code:

<div class="systab">
  <div>
    <span>Mon onglet 1</span>
    Mon contenu 1
  </div>
  <div class="selected">
    <span>Mon onglet 2</span>
    Mon contenu 2
  </div>
  <div>
    <span>Mon onglet 3</span>
    Mon contenu 3
  </div><div>
    <span>Mon onglet 4</span>
    Mon contenu 4
  </div>
</div>

Pour changer les couleurs, vous n'avez qu'à suivre les indications données dans le code CSS:

Code:

/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: #ccc;
  background: #333;
}

Le background: #333 signifie que lorsque l'onglet est sélectionné, son fond sera gris.

Code:

/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: #b8efa1;
  color: #487f31;
  border-color: #487f31;
}

Le background: #b8efa1 signifie que lorsque l'onglet est survolé, son fond sera vert pâle.

Code:

/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}

Le background: #fff signifie que lorsque l'onglet n'est pas survolé ni sélectionné, son fond sera blanc.


Cordialement.

[Invité]

Réponse très complète et très efficace problème résolu ^^