Onglet de PA pas centrés
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Onglet de PA pas centrés
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
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, 16:35, édité 1 fois
Re: Onglet de PA pas centrés
Bonjour,
Peux-tu donner le HTML et le CSS seulement ce qui concerne ton tableau à onglets ?
Peux-tu donner le HTML et le CSS seulement ce qui concerne ton tableau à onglets ?
Re: Onglet de PA pas centrés
Bien sûr ^^
CSS
Javascript
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';
}
}
}
}
Re: Onglet de PA pas centrés
Non, pas le JS (ton deuxième code) mais le HTML, le code qui est dans le message d'accueil.
Re: Onglet de PA pas centrés
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>
Re: Onglet de PA pas centrés
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):
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 :
- 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>
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"
Re: Onglet de PA pas centrés
Merci beaucoup ça marche inpect ^o^
Sujets similaires
» Barre de rang centrés
» Les icônes ne sont pas centrés
» Sujet centrés...
» Les sous-forums non centrés
» messages centrés
» Les icônes ne sont pas centrés
» Sujet centrés...
» Les sous-forums non centrés
» messages centrés
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum