Problème affichage onglet message d'accueil

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

Résolu Problème affichage onglet message d'accueil

Message par Avhdotisab le Mar 23 Aoû 2011 - 12:59

Bonjour !

J'ai besoin d'aide pour un affichage d'onglet en page d'accueil. Il s'avère que lorsque l'on arrive sur la page en question, tous les contenus des onglets sont affichés les uns en dessous des autres. Cependant, lorsque je clique sur l'un des onglets, le problème disparait.

Voici mon CSS
code CSS:
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #fff;
background: #000;
border: 1px solid #fff;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
}
.mon_onglet:hover{
background: #0000ff;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #f00;
background: #000;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #000;
font-weight : bold;
cursor: pointer;
margin-bottom: -1px;
list-style: none;}
.clear{
clear: both;
}
.mon_contenu{
color: #fff;
background: #000;
border: 1px solid #fff;
padding: 10px;
line-height: normal;
font-size: 11px;
}
#mes_contenus, #mes_onglets{
width: 600px;
margin: auto;}

voici mon code Javascript
Code JS:
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';
}
}
}
}

Et enfin, voici mon code html du message d'accueil
Code message d'accueil:
<table>
<tr valign="top"><td>
<img src="http://b5.img.v4.skyrock.net/b55/sangokusayain/pics/1417292763_small.jpg" width="293" height="400"></td>

<td><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Informations</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Inscriptions DB 300</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Bonjour</div>
<div id="co_2" class="mon_contenu"><FONT size=2>La publicité pour les membres est désactivée jusqu'au 13 septembre 2011


Dernière phase de bêta-test pour le système de jeu.
</FONT></div>
<div id="co_3" class="mon_contenu"><center><STRONG><FONT size=2.5>Inscriptions à Dragon Ball 300</font><br><br><FONT color=00FF00 size=4>Ouvertes</FONT></STRONG>
<br><br><FONT size=2.5>14 places restantes</font></center></div>
</div></div></ul></div></td></tr></table>

Merci d'avance pour l'aide apportée.


Dernière édition par Avhdotisab le Mar 23 Aoû 2011 - 15:02, édité 1 fois

Avhdotisab
Nouveau membre

Messages : 2
Inscrit(e) le : 23/08/2011

http://avhdotisab.forumperso.com
Avhdotisab a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage onglet message d'accueil

Message par Invité le Mar 23 Aoû 2011 - 14:34

Bonjour,

Il vous manque un petit bout de code dans vos contenu 2 et 3 style="display: none;". Cela permet de les masquer Wink .

Essayez comme ceci:
Code:
<table>
<tr valign="top"><td>
<img src="http://b5.img.v4.skyrock.net/b55/sangokusayain/pics/1417292763_small.jpg" width="293" height="400"></td>

<td><div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Informations</li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Inscriptions DB 300</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Bonjour</div>
<div id="co_2" class="mon_contenu"  style="display: none;"><FONT size=2>La publicité pour les membres est désactivée jusqu'au 13 septembre 2011


Dernière phase de bêta-test pour le système de jeu.
</FONT></div>
<div id="co_3" class="mon_contenu"  style="display: none;"><center><STRONG><FONT size=2.5>Inscriptions à Dragon Ball 300</font><br><br><FONT color=00FF00 size=4>Ouvertes</FONT></STRONG>
<br><br><FONT size=2.5>14 places restantes</font></center></div>
</div></div></ul></div></td></tr></table>

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage onglet message d'accueil

Message par Avhdotisab le Mar 23 Aoû 2011 - 15:01

Parfait. Merci beaucoup !

Avhdotisab
Nouveau membre

Messages : 2
Inscrit(e) le : 23/08/2011

http://avhdotisab.forumperso.com
Avhdotisab 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