Onglet de PA pas centrés

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

Résolu Onglet de PA pas centrés

Message par Kamitupe le 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

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 Final-Blonde le Lun 12 Déc 2011 - 19:41

Bonjour,

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

Final-Blonde
# Tropactif #

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

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

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

Message par Kamitupe le 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';
            }
        }
    }         
}

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 Final-Blonde le 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.

Final-Blonde
# Tropactif #

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

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

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

Message par Kamitupe le 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>

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 Final-Blonde le 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"

Final-Blonde
# Tropactif #

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

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

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

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

Merci beaucoup ça marche inpect ^o^

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


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