Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

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