Onglet de PA pas centrés

2 participants

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

Résolu Onglet de PA pas centrés

Message par Kamitupe Lun 12 Déc 2011 - 17:46

Bonjour,

j'ai un petit problème avec mon forum, je n'arrive pas à centrer les onglets sur le message la page d'accueil. Ils sont tous à gauche sauf que je voudrais qu'ils soient au center du message de la PA.

L'url de mon forum (c'est un forum de test) : http://testdetupie.forumgratuit.org/
Ce que je voudrais : http://kingdom-of-spirit.forumactif.com/

Merci d'avance


Dernière édition par Kamitupe le Lun 12 Déc 2011 - 22:35, édité 1 fois
avatar

Kamitupe
Nouveau membre

Messages : 4
Inscrit(e) le : 21/05/2010

http://www.zutrope-japon.com/
Kamitupe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet de PA pas centrés

Message par kheino Lun 12 Déc 2011 - 19:41

Bonjour,

Peux-tu donner le HTML et le CSS seulement ce qui concerne ton tableau à onglets ?
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet de PA pas centrés

Message par Kamitupe Lun 12 Déc 2011 - 20:07

Bien sûr ^^

CSS


Code:
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px dashed #5c3010;
  cursor: pointer;
  margin-bottom: -1px;
  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: 1px solid #5c3010;
  border-right: 1px solid #5c3010;
  border-left: 1px solid #5c3010;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #fff;
  border: 1px solid #5c3010; -moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px;
  padding: 10px;
  line-height: normal;
  font-size: 11px;}
#mes_contenus, #mes_onglets{
  width: auto;
  margin: auto;}

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

Kamitupe
Nouveau membre

Messages : 4
Inscrit(e) le : 21/05/2010

http://www.zutrope-japon.com/
Kamitupe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet de PA pas centrés

Message par kheino Lun 12 Déc 2011 - 20:34

Non, pas le JS (ton deuxième code) mais le HTML, le code qui est dans le message d'accueil.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet de PA pas centrés

Message par Kamitupe Lun 12 Déc 2011 - 20:57

Aaaa attend

Code:

<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>
        <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></ul></div>
avatar

Kamitupe
Nouveau membre

Messages : 4
Inscrit(e) le : 21/05/2010

http://www.zutrope-japon.com/
Kamitupe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet de PA pas centrés

Message par kheino Lun 12 Déc 2011 - 21:54

Alors pour centrer les onglets, nous allons simplement mettre le tout dans un grand tableau, qui pour les onglets contiendra un plus petit tableau centré avec la propriété CSS "margin" (que là j'ai mise directement dans le HTML mais que tu peux mettre aussi dans la feuille de style CSS si tu veux plus peaufiner avec fond, etc):
Code:
<table width="79%" align="center"><tr><td>
<table align="center" style="width: auto; margin: 0px auto;"><tr><td align="center">
<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>
</td></tr></table>

<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></ul></div>
</td></tr></table>
Comme tu peux le constater, il faut alors donner une largeur au tableau principal et au plus petit tableau (même en "auto") pour que ce centrage fonctionne:
0px(zéro pixel pour le haut et le bas) auto(automatique de la gauche et la droite en fonction de la largeur);

EDIT : Attention code édité pour aligner aussi le tableau principal :
<table width="79%" align="center"
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet de PA pas centrés

Message par Kamitupe Mer 14 Déc 2011 - 22:35

Merci beaucoup ça marche inpect ^o^
avatar

Kamitupe
Nouveau membre

Messages : 4
Inscrit(e) le : 21/05/2010

http://www.zutrope-japon.com/
Kamitupe a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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