Désolidariser les onglets du contenu

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

Résolu Désolidariser les onglets du contenu

Message par Laru le Mer 27 Juil 2011 - 17:44

Bonjour, je reviens vers vous car j'ai une petite question. La réponse est certainement sous mon nez mais, j'ai eu beau retourner le problème dans tous les sens, la solution ne veut pas me sauter aux yeux ^^"

Je m'occupe du codage d'un forum et j'essaye de mettre le message de la page d'accueil en onglets. Tout va bien, les onglets sont mis, ils fonctionnent à merveille. Seulement, j'aimerais que tous mes onglets soient au dessus du contenu et il y en a un qui refuse obstinément de le faire :



C'est l'onglet sélectionné qui pose problème. J'ai eu beau changer des paramètres CSS, ça ne change rien du tout. Je viens donc vous demander si quelqu'un à une solution à mon problème ^^

Ma PA

Code:
<script src="http://testoforum.forum-actif.net/h1-onglets"></script><div id="les_onglets">

    <ul><li id="o_1" class="onglet_selectionner" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <li id="o_5" class="onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <div class="clear"><div id="les_contenus">
    <div id="co_1" class="contenu">Texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte</div>
    <div id="co_2" class="contenu" style="display: none;">Texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte</div>
    <div id="co_3" class="contenu" style="display: none;">Texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte</div>
    <div id="co_4" class="contenu" style="display: none;">Texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte</div>
    <div id="co_5" class="contenu" style="display: none;">Texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte<br> texte texte texte texte texte texte texte texte texte texte texte texte</div>
</div></div></div>

Mon CSS

Code:
/*ONGLETS PA*/

.onglet{
padding-bottom : 10px;
  list-style: none;
  float: left;
padding : 2px;
  margin-right: 4px;
  color: #000;
  background: #ffffff;
  cursor: onclick;
  width: 18%;
-moz-border-radius: 5px ;
-webkit-border-radius:5px;
-border-radius:5px;
-khtml-border-radius:5px;
text-align : center;
valign : center;
}
 
.onglet_selectionner{
padding-bottom : 10px;
-moz-border-radius: 5px ;
-webkit-border-radius:5px;
-border-radius:5px;
-khtml-border-radius:5px;
  float: left;
  margin-right: 4px;
  color: #000;
  background: #ffffff;
  cursor: onclick;
  width: 18%;
  list-style: none;
text-align : center;
valign : center;
}


.onglet:hover{
background: #FFFFFF;
}
     
.clear{
  clear: both;}

.contenu{
margin : 10px;
  color: #000;
  background: #ffffff;
  padding-bottom: 10px;
 padding-top: 10px;
  list-style: none;
-moz-border-radius: 5px ;
-webkit-border-radius:5px;
-border-radius:5px;
-khtml-border-radius:5px;
}

#les_contenus, #les_onglets{
  width: 100%;}

Merci à la personne qui pourra m'aider ~


Dernière édition par Laru le Mar 9 Aoû 2011 - 17:04, édité 1 fois

Laru
Nouveau membre

Féminin
Messages : 15
Inscrit(e) le : 23/10/2010

http://kyiory.forumactif.org/forum
Laru a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Désolidariser les onglets du contenu

Message par Invité le Dim 31 Juil 2011 - 22:25

Bonsoir,

En ajoutant une marge en dessous des onglet, ça fonctionne:
Code:
/*ONGLETS PA*/

.onglet{
  list-style: none;
  float: left;
padding: 2px;
  margin-right: 4px;
  margin-bottom: 5px;
  color: #000;
  background: #ffffff;
  cursor: onclick;
  width: 18%;
-moz-border-radius: 5px ;
-webkit-border-radius:5px;
-border-radius:5px;
-khtml-border-radius:5px;
text-align : center;
valign : center;
}
 
.onglet_selectionner{
padding: 2px;
-moz-border-radius: 5px ;
-webkit-border-radius:5px;
-border-radius:5px;
-khtml-border-radius:5px;
  float: left;
  margin-right: 4px;
  margin-bottom: 5px;
  color: #000;
  background: #ffffff;
  cursor: onclick;
  width: 18%;
  list-style: none;
text-align : center;
valign : center;
}


.onglet:hover{
background: #FFFFFF;
}
     
.clear{
  clear: both;}

.contenu{
margin : 10px;
  color: #000;
  background: #ffffff;
  padding-bottom: 10px;
 padding-top: 10px;
  list-style: none;
-moz-border-radius: 5px ;
-webkit-border-radius:5px;
-border-radius:5px;
-khtml-border-radius:5px;
}

#les_contenus, #les_onglets{
  width: 100%;}
J'ai supprimé les lignes "padding" qui s'annulaient les unes les autres, et j'ai ajouté "margin-bottom: 5px;" pour l'onglet selectionné et l'onglet inactif.

Cordialement.

Invité
Invité


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

Résolu Re: Désolidariser les onglets du contenu

Message par Invité le Mar 9 Aoû 2011 - 12:02

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 résolu 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 Smile

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