Centrer les onglets de la page d'accueil

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

Résolu Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 12:41

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. Laughing


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 !

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par zz10 le Jeu 11 Nov 2010 - 13:07

Bonjour,

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

zz10
+ Hyperactif +

Masculin
Messages : 2202
Inscrit(e) le : 04/07/2009

http://www.forum-ice-epinal.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 13:17

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;

}



Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Centrer les onglets de la page d'accueil

Message par zz10 le Jeu 11 Nov 2010 - 13:22

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">

zz10
+ Hyperactif +

Masculin
Messages : 2202
Inscrit(e) le : 04/07/2009

http://www.forum-ice-epinal.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 13:31

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

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Centrer les onglets de la page d'accueil

Message par zz10 le Jeu 11 Nov 2010 - 14:44

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%;
}

zz10
+ Hyperactif +

Masculin
Messages : 2202
Inscrit(e) le : 04/07/2009

http://www.forum-ice-epinal.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 14:48

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

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par zz10 le Jeu 11 Nov 2010 - 17:50

Re,

1- Juste après

Code:
<ul>

pouvez vous ajoutez :

Code:
<center>




2- et avant

Code:
</ul>

pouvez vous ajoutez :

Code:
</center>

zz10
+ Hyperactif +

Masculin
Messages : 2202
Inscrit(e) le : 04/07/2009

http://www.forum-ice-epinal.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 19:43

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.

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Lixyr le Jeu 11 Nov 2010 - 19:49

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 20:09

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. Laughing
É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é.

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Centrer les onglets de la page d'accueil

Message par zz10 le Jeu 11 Nov 2010 - 20:10

Code:
#mes_onglets
{
text-align:center;
}

zz10
+ Hyperactif +

Masculin
Messages : 2202
Inscrit(e) le : 04/07/2009

http://www.forum-ice-epinal.com
zz10 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Centrer les onglets de la page d'accueil

Message par Lixyr le Jeu 11 Nov 2010 - 20:32

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;

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Riina le Jeu 11 Nov 2010 - 22:28

ô joie : ça marche ! bounce
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 ! Razz


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

Bonne soirée à vous !

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer les onglets de la page d'accueil

Message par Lixyr le Jeu 11 Nov 2010 - 23:49

Merci, à toi aussi.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr 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