Centrer les onglets de la page d'accueil

[Riina]

Bien le bonjour !

Etant en pleine recherche sur la création d'une page d'accueil avec onglet, je me retrouve coincée avec un petit soucis qui est, en apparence, tout bête. Je suis convaincue que ça ne doit pas être compliqué pour un sou, malheureusement, je ne sais absolument pas où dois-je placer le code.

Ma question :
J'aimerais simplement centrer mes onglets. [Contexte, le guide du parfait petit survivant, etc...] Où dois-je placer le code sur la feuille de style css ? Enfin, si c'est bien ici qu'il faut le mettre.


Pour voir le forum de test dans lequel figure le code en question, c'est ici -> http://essaiundertown.forumgratuit.org/forum.htm


Merci d'avance à tous ceux qui prendront la peine d'y répondre !

[zz10]

Bonjour,

Merci de fournir tous les codes permettant cette réalisation...

[Riina]

Autant pour moi, c'est un point auquel je n'avais pas du tout pensée alors qu'il est primordiale.

Code de la page d'accueil, généralités :

Code:

<div style="margin:auto;text-align:center;width:100%"><script src="http://sd-g1.archive-host.com/membres/up/b2227501fb33494948c5d8f435ac3728a3111eeb/essai.js"></script><div id="mes_onglets">
   
   <div id="mes_onglets">
   <ul>
      <li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Contexte & Accueil</li>
      <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Le guide du parfait petit survivant</li>
      <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Mise en quarantaine</li>   
<br><br>   
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Nos ravitaillements
</li>
                <li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">Le staff se présente</li>
      <li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Les événements</li>
      <li id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">Nos partenaires & Top-sites</li>
   </ul>


<br><br>


</div><div id="mes_contenus">
   <div id="co_1" class="mon_contenu" style="display: none;">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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
   <div id="co_6" class="mon_contenu" style="display: none;">Mon contenu 6</div>
        <div id="co_7" class="mon_contenu" style="display: none;">Mon contenu 7</div>
</div>
</div>



Code feuille de CSS :

Code:

*{
   margin: 0px;
   padding: 0px;
   font-family: comic sans MS, Arial, Helvetica, sans-serif;
   font-size: 11px;
}
body{
   width: 800px;
   margin: 10px auto;
       
       
}
a{
   text-decoration: none;
   color: #fff;
}
ul, li{
   list-style: none;
}
.mon_onglet{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #b8efa1;
   border: 1px solid #0D090F;
   cursor: pointer;
   margin-bottom: -1px;
     

}
   
.mon_onglet:hover{
   background: #0D090F;
     
}      
      
.mon_onglet_selected{
   float: left;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #0D090F;
   border-top: 1px solid #0D090F;
   border-right: 1px solid #0D090F;
   border-left: 1px solid #0D090F;   
   border-bottom: 1px solid #0D090F;   
   cursor: pointer;   
   margin-bottom: -1px;
        background-position: top center;

}
               
.clear{
   clear: both;
}
.mon_contenu{
   color: #666;
   background: #0D090F;
   border: 1px solid #0D090F;
   padding: 10px;   
         
}
#mes_contenus, #mes_onglets{
   width: 800px;

}




[zz10]

Tout d'abord, dans votre code HTML, vous avez deux divs imbriquées identiques. Commencez par en retirer une des 2 :

Code:

<div id="mes_onglets">
 
  <div id="mes_onglets">

[Riina]

On peut dire que c'est vraiment une faute d'inattention.
Je viens de corriger cette erreur.

[zz10]

Essayez de remplacer ce code :

Code:


<div id="mes_onglets">
  <ul>

par

Code:


<div id="mes_onglets">
  <ul style="margin:auto">

Dans votre CSS, je remplacerai :

Code:


#mes_contenus, #mes_onglets{
  width: 800px;

}

par :

Code:

#mes_contenus{
  width: 800px;
}

 #mes_onglets
{
width:100%;
}

[Riina]

J'ai bien suivie votre conseil, malheureusement, les onglets restent toujours à leur place et rien (il me semble) n'a bougé.

[zz10]

Re,

1- Juste après

Code:

<ul>

pouvez vous ajoutez :

Code:

<center>

---

2- et avant

Code:

</ul>

pouvez vous ajoutez :

Code:

</center>

[Riina]

Re,
Désolée de vous répondre un peu tard !

J'ai ajouté le

Code:

<center>

juste avant le

Code:

<ul style="margin:auto">

Ainsi que le deuxième code comme vous me l'avez bien indiqué, mais rien n'y fait.

[Lixyr]

Ce n'est pas ici pour centrer les onglets, mais dans le css. ^^

Normalement vous avez une classe comme ceci :

Code:

.my_cat { }

Rajoutez ceci :

.my_cat {
text-align: center;}

[Riina]

Bonsoir Lixyr, merci de vous joindre parmi nous pour régler ce petit soucis !

En effet, je me disais bien que cela ne pouvait être que dans le CSS.
Étrange, je n'ai pas la classe que vous me dites. J'ai tentée de l'ajouter entièrement, mais cela n'a malheureusement rien modifié.

[zz10]

Code:

#mes_onglets
{
text-align:center;
}

[Lixyr]

Ca déplace le contenu aussi.
Le problème c'est que les onglets sont définit par un "float-left", c'est ça qui permet d'avoir les onglets sur la même ligne.
On peut donc les placer soit à droite soit à gauche.

Mais mettre des "text-align: center" etc ne fonctionnera pas.

Essayez de mettre "

Code:

display : inline;

" à la place de

flot-left;

[Riina]

ô joie : ça marche !
Merci beaucoup votre aide m'a été très précieuse ! Merci également pour votre explication sur l'origine du "float-left" : je tâcherais de bien m'en souvenir !


Merci encore à zz10 et à Lixyr d'avoir consacré un peu de leur temps à ce petit soucis !

Bonne soirée à vous !

[Lixyr]

Merci, à toi aussi.