La Feuille de Style CSS : Elle ne marche plus !

[Nuit Étoilée <3]

Rappel du premier message :

Bonjour, je suis desepérée, j'essaye en vain de mettre ma nouvelle PA, mais ça ne s'affiche pas !

Voilà le code de ma PA :

Spoiler:

Sur mon forum test, ça marche très bien, tandis que sur mon fow' officiel, ça donne :



Pourtant, il n'y a aucune différence entre les deux, niveaux codes et comme il n'y a aucune structure, je suppose que c'est de la faute du CSS ...

Merci d'avance ...

[kheino]

Dans ce cas, essayez de désactivé la Gestion des JS. Toutes les possibilités sont à faire... Verifiez bien vos deux codes, enlevez toutes vos balises <!--- et -->

Pourriez-vous nous mettre les deux codes JS dans un seul message ?

Tout cela a été fait Manka ! Sauf de désactiver le JS, sinon ça ne peut pas fonctionner forcément.

Sinon je laisse ma place parce que je ne voit pas du tout...

Euh, je pense que là ce serait mieux, parce que ça ne fait que rendre le tout plus compliqué.

[Nuit Étoilée <3]

@Final Blonde = Bien sûr, prennez votre temps, et merci beaucoup.
@Manka = J'ai bien suivi vos instructions, mais ça ne fonctionne pas. :S
Merci tout de même. =)
Les deux scripts ? Je l'ai ai donné plus haut.

[Manka77]

Le code Html:

Code:

<div class="onglets">

Est-elle censé s'appliquez t'elle au code CSS suivant:

Code:

.onglet
        {
                display:inline-block;
                margin : auto;
                padding:2px;
                font-variant:small-caps;
              font-family : Verdana;
        }

Si c'est le cas, c'est une faute d'orthographe qui fait foirer votre code... Car dans votre code CSS, les paramètres s'applique à la classe "Onglet" or dans votre code HTML celle-ci est nommé "Onglets"

Cordialement
Manka

[kheino]

Tout d'abord, attention à tes tableaux parce que tu as omis les balises de lignes (<tr> et </tr>).
Ensuite, certains blocs "div" n'étaient pas refermés ce qui avec certains navigateurs ne pardonnent pas.
Enfin, tu as mis trop de "class", donc de blocs, qui n'apparaissent pas dans le CSS que tu as donné. Anyway, autant essayé de regrouper les propriétés dans un même identifiant afin de mieux t'y retrouver.

Dans le CSS, certaines propriétés comme le "radius", "transition", "opacity" requièrent quelques lignes en plus qui permettent alors à un maximum d'invités (navigateurs) de lire ces propriétés.

Au vu de tout, ça, il te faudra certainement ajuster certaines propriétés, notamment ce qui concerne le texte, car je n'ai pas vraiment touché au CSS.

Allons y :
- Commence par tout supprimer partout, HTML, CSS et JS

- Dans la gestion des JS, voici le nouveau script :

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    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';
            }
        }
    }     
}

- Dans le CSS :

Spoiler:

Je te laisse compléter les "radius" à l'instar de celui de la fin.

- Dans le message d'accueil, le HTML .

Code:

<table align="center"><tr><td><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Nom Du Forum</span>
<span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">News & Annonces</span>
<span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Staff</span>
<span id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Partenaires/Crédits</span></td></tr>
<tr><td>
    <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
<table><tr><td><br />
  <div class="titroes">Bienvenue sur Nom du Forum, {USER&amp;#8288;NAME}.</div>
  <div class="descriptionsforum">
Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. </div></td><td><div class="titres">Liens utiles</div><div class="tableau"><a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br /></div></td></tr></table></div>

  <div id="co_2" class="mon_contenu" style="display: none;">
<table><tr><td><br />
  <div class="titres">Les nouveautés</div>
  <div class="cadres">Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  </div></td><td><div class="titres">Les Annonces</div><div class="cadres"> Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla </div></td></tr></table></div>

  <div id="co_3" class="mon_contenu" style="display: none;">
<table><tr><td><br />
  <div class="titres">Administrateur(s)</div>
  <div class="cadres"><a class="info" href="lien du profil"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br />
Autres infos<br /></span></a> <a class="info" href="http://templactif.forumgratuit.org/"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br />
Autres infos<br /></span></a></div></td><td><div class="titres">Modérateurs</div><div class="cadres"><a class="info" href="lien du profil"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br />
Autres infos<br /></span></a> <a class="info" href="http://templactif.forumgratuit.org/"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br /></div></td></tr></table></div>

  <div id="co_4" class="mon_contenu" style="display: none;">
<table><tr><td><br />
  <div class="titres">Partenaires</div>
  <div class="cadres"><a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a></div></td><td><div class="titres">Crédits</div><div class="cadres">Vos crédits. + Page d'Accueil faite par -Yuffie-Kisaragi- sur <a href="http://templactif.forumgratuit.org/">Templactif</a> & <a href="http://cssxhtml.org/">CSSxHTML</a></div></td></tr></table></div>

</div></div></div>
</td></tr></table>

L'essentiel y est.

N'oublie surtout pas de supprimer tout ce qu'il y avait avant.

[Nuit Étoilée <3]

J'ai tout supprimer.
J'ai tout fait comme vous m'avez dit.
Et ça donne :



Je suis désolée, je ne comprend pas du tout quel est le problème, j'ai vraiment fait tout ce que vous avez dit !
Excusez moi ...

[kheino]

Mais je le vois bien à cette adresse :
http://rpg-aventure-lgdc.forumgratuit.org/



EDIT : Il y a une erreur au premier class="titres" dans le HTML qui doit venir de moi.
EDIT2 : J'ai amélioré un peu le CSS :

Code:

.mon_onglet {
display:inline;
margin : auto;
padding:4px 7px; /*raccourci top right bottom left et écrit ainsi signifie que le top et bottom seront identiques pareil pour le right et lefet*/
font: italic small-caps bold 14px verdana; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre */
border-radius : 10px 10px 0px 0px;
-moz-border-radius : 10px 10px 0px 0px;
-webkit-border-radius : 10px 10px 0px 0px;
background : #6d1c22;
color : white;
height : 18px;
width : 150px;
cursor: pointer;
}
.mon_onglet_selected {
display:inline;
margin : auto;
padding:4px 7px;
font: italic small-caps bold 14px verdana; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre */
border-radius : 10px 10px 0px 0px;
-moz-border-radius : 10px 10px 0px 0px;
-webkit-border-radius : 10px 10px 0px 0px;
background : #6d1c22;
color : white;
height : 18px;
width : 150px;
cursor: pointer;
}

Ensuite pour le HTML, le voici corrigé :

Code:

<table align="center"><tr><td align="center"><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Nom Du Forum</span>
<span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">News & Annonces</span>
<span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Staff</span>
<span id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Partenaires/Crédits</span></td></tr>
<tr><td style="margin-top: 0px;">
    <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
<table><tr><td><br />
  <div class="titres">Bienvenue sur Nom du Forum, {USER&amp;#8288;NAME}.</div>
  <div class="descriptionsforum">
Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. Ici la description du forum. </div></td>
<td><div class="titres">Liens utiles</div><div class="tableau"><a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br />
<a href="lien">Nom du lien</a><br /></div></td></tr></table></div>

  <div id="co_2" class="mon_contenu" style="display: none;">
<table><tr><td><br />
  <div class="titres">Les nouveautés</div>
  <div class="cadres">Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  </div></td>
<td><div class="titres">Les Annonces</div><div class="cadres"> Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla  Blablabla </div></td></tr></table></div>

  <div id="co_3" class="mon_contenu" style="display: none;">
<table><tr><td><br />
  <div class="titres">Administrateur(s)</div>
  <div class="cadres"><a class="info" href="lien du profil"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br />
Autres infos<br /></span></a> <a class="info" href="http://templactif.forumgratuit.org/"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br />
Autres infos<br /></span></a></div></td>
<td><div class="titres">Modérateurs</div><div class="cadres"><a class="info" href="lien du profil"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br />
Autres infos<br /></span></a> <a class="info" href="http://templactif.forumgratuit.org/"><img src="http://s4.noelshack.com/uploads/images/15978801420054_icone120.png" /><span>Pseudo<br />
Rang<br /></div></td></tr></table></div>

  <div id="co_4" class="mon_contenu" style="display: none;">
<table><tr><td><br />
  <div class="titres">Partenaires</div>
  <div class="cadres"><a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a> <a href="lien du forum"><img src="http://s4.noelshack.com/uploads/images/15443960289516_logopa.png" alt="Nom Du Forum" class="partenaires" /></a></div></td>
<td><div class="titres">Crédits</div><div class="cadres">Vos crédits. + Page d'Accueil faite par -Yuffie-Kisaragi- sur <a href="http://templactif.forumgratuit.org/">Templactif</a> & <a href="http://cssxhtml.org/">CSSxHTML</a></div></td></tr></table></div>

</div></div></div>
</td></tr></table>

Si 4a ne fonctionne toujours pas, je m'inscrirai rapidement sur le forum en question et il faudra supprimer le compte une fois fini.

[Nuit Étoilée <3]

Il est vrai que dans des cas comme ça, j'ai presque envie de vous donner mon MP d'administration *s'enterre*

Ok, mais vu que en attendant je met mon ancienne PA, vous risquez pas tout le temps de voir le résultat de vos codes.

J'éditerais ce message pour vous donner des news!

[kheino]

A quelle adresse dois-je m'inscrire ?
Ok, j'ouvre ma mp ici.

[Nuit Étoilée <3]

http://rpg-aventure-lgdc.forumgratuit.org/

^^

J'ai essayé les codes, rien de changé. :S

[Nuit Étoilée <3]

Je vous envoie un MP?

[kheino]

Oui, je vois ça et je crois savoir pourquoi.
Ne touche à rien pour l'instant, je suis sur ton forum, va dans tes mp là-bas.

[Nuit Étoilée <3]

Super.

Je fais rien, et je t'ai répondu

[Nuit Étoilée <3]

Un grand merci à Final Blonde qui a résolut mon problème, elle est trop forte!<3
Bonne soirée, et merci encore!!<3

[kheino]

Non, rien de bien sorcier, je n'ai fait que du copié-collé de ce qui est plus haut.
En fait tout était bon, sauf le CSS compressé sur une seule ligne...
Serait-ce parce que je l'ai mis entre les balises "code" ? Pourtant il est bien en colonne là aussi.

Bref, je crois que tu peux supprimer mon compte sur ton forum.

Bonne continuation.