tableau et boutons :)

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

Résolu tableau et boutons :)

Message par Invité le Mer 7 Mar 2012 - 11:01

Bonjour forumactif j'ai pris connaissance de l'un de vos tutoriels concernant le tableau en onglet pour la page d'accueil.
http://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. batman


Dernière édition par Akogare no arashi le Mer 7 Mar 2012 - 17:47, édité 1 fois

Invité
Invité


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

Résolu Re: tableau et boutons :)

Message par Invité le Mer 7 Mar 2012 - 11:19

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

Invité
Invité


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

Résolu Re: tableau et boutons :)

Message par Dr. Karlos le Mer 7 Mar 2012 - 17:44

Bonsoir,

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

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.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: tableau et boutons :)

Message par Invité le Mer 7 Mar 2012 - 17:46

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

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