La Feuille de Style CSS : Elle ne marche plus !

Page 2 sur 2 Précédent  1, 2

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

Résolu La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Mer 15 Fév 2012 - 16:26

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:


Code:
<center><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>P.A en Onglets by -Yuffie-Kisaragi-</title>
    <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>

</head>
<body>
        <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_leforum" onmouseover="javascript:change_onglet('leforum');">Nom Du Forum</span>
            <span class="onglet_0 onglet" id="onglet_news" onmouseover="javascript:change_onglet('news');">News & Annonces</span>
            <span class="onglet_0 onglet" id="onglet_staff" onmouseover="javascript:change_onglet('staff');">Staff</span>
            <span class="onglet_0 onglet" id="onglet_partenaires" onmouseover="javascript:change_onglet('partenaires');">Partenaires/Crédits</span>

         
        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_leforum"><br />
                <table><td><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></table>
            </div>

  <div class="contenu_onglet" id="contenu_onglet_news"><br />
<table><td><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></table>
            </div>

 <div class="contenu_onglet" id="contenu_onglet_staff"><br />
              <table><td><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></table>
</div>


            <div class="contenu_onglet" id="contenu_onglet_partenaires"><br />
            <table><td><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></table>
       

            </div>
        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'leforum';
                change_onglet(anc_onglet);
        //-->
        </script>
</body>
</html></center>



et le CSS :



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

        .onglet_0 {
  border-radius : 10px 10px 0px 0px;
  background : #6d1c22;
  color : white;
  height : 18px;
  width : 150px;
  font-size : 14px;
}

        .onglet_1 {
  border-radius : 10px 10px 0px 0px;
  background : #8a292f;
  color : white;
  height : 18px;
  width : 150px;
  font-size : 14px;
}

        .contenu_onglet {
  background:#6d1c22;
  padding:5px;
  display:none;
  border-radius : 30px;
  height : 300px;
  width : 700px;
  overflow : auto;
  -moz-transition : background 1s;
  -webkit-transition : background 1s;
  border : 1px dotted black;
        }

        .titres {
  text-align : center;
  color : white;
  text-shadow : 0px 0px 5px white;
  text-transform : uppercase;
  font-size : 20px;
  font-family : Calibri;
}
 
        .descriptionsforum {
  width : 500px;
  height : 200px;
  background : #8a292f;
  overflow : auto;
  border : 2px solid black;
  border-radius : 10px;
  padding : 6px;
  text-align : justify;
  font-variant : small-caps;
  font-family : Calibri;
}

      .cadres {
  width : 320px;
  height : 200px;
  background : #8a292f;
  overflow : auto;
  border : 2px solid black;
  border-radius : 10px;
  padding : 6px;
  text-align : justify;
  font-variant : small-caps;
  font-family : Calibri;
}

        .tableau {
  width : 150px;
  height : 200px;
  background : #8a292f;
  overflow : auto;
  border : 2px solid black;
  border-radius : 10px;
  padding : 6px;
  text-align : center;
}

a.info{
position:relative;
z-index:24;
color : black;
text-decoration:none
}
 
a.info:hover{
z-index : 25;
background :#FFF
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
border:1px solid #000;
background : rgba(255,255,255,0.2);
color:#000;
text-align: justify;
font-weight:none;
top : -105px;
left : 0px;
width : 113px;
height : 113px;
padding : 3px;
}
 
        .partenaires {
opacity : 0.5;
-moz-transition : opacity 1s;
-webkit-transition : opacity 1s;
}

.partenaires:hover {
opacity : 1;
}

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

Merci d'avance ...


Dernière édition par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 19:01, édité 1 fois

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Final-Blonde le Jeu 16 Fév 2012 - 11:20

@Manka77 a écrit: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.
@Manka77 a écrit: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é.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 11:22

@Final Blonde = Bien sûr, prennez votre temps, et merci beaucoup. Smile
@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. Smile

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Manka77 le Jeu 16 Fév 2012 - 11:30

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

Manka77
*****

Masculin
Messages : 580
Inscrit(e) le : 20/12/2008

http://forum.forumactif.com
Manka77 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Final-Blonde le Jeu 16 Fév 2012 - 15:05

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:
.mon_onglet {
display:inline;
margin : auto;
padding:2px;
font-variant:small-caps;
font-family : Verdana;
border-radius : 10px 10px 0px 0px;
background : #6d1c22;
color : white;
height : 18px;
width : 150px;
font-size : 14px;
cursor: pointer;
}
.mon_onglet_selected {
display:inline;
margin : auto;
padding:2px;
font-variant:small-caps;
font-family : Verdana;
border-radius : 10px 10px 0px 0px;
background : #6d1c22;
color : white;
height : 18px;
width : 150px;
font-size : 14px;
cursor: pointer;
}
mon_.onglet_1 {
border-radius : 10px 10px 0px 0px;
background : #8a292f;
color : white;
height : 18px;
width : 150px;
font-size : 14px;
}
.clear {
clear: both;
}
.mon_contenu {
background:#6d1c22;
padding:5px;
border-radius : 30px;
-moz-border-radius : 30px;
-webkit-border-radius : 30px;
height : 300px;
width : 700px;
line-height: normal;
overflow : auto;
transition : background 1s ease-in;
-o-transition : background 1s ease-in;
-moz-transition : background 1s ease-in;
-webkit-transition : background 1s ease-in;
-htm-transition: background 1s ease-in;
border : 1px dotted black;
}
#mes_contenus, #mes_onglets {
height: 100%;
width:100%;
}
.titres {
text-align : center;
color : white;
text-shadow : 0px 0px 5px white;
text-transform : uppercase;
font-size : 20px;
font-family : Calibri;
}
.descriptionsforum {
width : 500px;
height : 200px;
background : #8a292f;
overflow : auto;
border : 2px solid black;
border-radius : 10px;
padding : 6px;
text-align : justify;
font-variant : small-caps;
font-family : Calibri;
}
.cadres {
width : 320px;
height : 200px;
background : #8a292f;
overflow : auto;
border : 2px solid black;
border-radius : 10px;
padding : 6px;
text-align : justify;
font-variant : small-caps;
font-family : Calibri;
}
.tableau {
width : 150px;
height : 200px;
background : #8a292f;
overflow : auto;
border : 2px solid black;
border-radius : 10px;
padding : 6px;
text-align : center;
}
a.info{
position:relative;
z-index:24;
color : black;
text-decoration:none
}
a.info:hover{
z-index : 25;
background :#FFF
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
border:1px solid #000;
background : rgba(255,255,255,0.2);
color:#000;
text-align: justify;
font-weight:none;
top : -105px;
left : 0px;
width : 113px;
height : 113px;
padding : 3px;
}
.partenaires {
opacity : .5;
-moz-opacity : .5;
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)"; /* IE après 8 */
filter : alpha(opacity=50); /* IE avant 8 */
transition : opacity 1s linear;
-o-transition : opacity 1s linear;
-moz-transition : opacity 1s linear;
-webkit-transition : opacity 1s; linear;
-htm-transition : opacity 1s linear;
}
.partenaires:hover {
opacity : 1;
-moz-opacity : 1;
-khtml-opacity: 1;
-ms-filter: "alpha(opacity=100)"; /* IE après 8 */
filter : alpha(opacity=100); /* IE avant 8 */
transition : opacity 1s linear;
-o-transition : opacity 1s linear;
-moz-transition : opacity 1s linear;
-webkit-transition : opacity 1s; linear;
-htm-transition : opacity 1s linear;
}
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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 15:41

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 ! Sad
Excusez moi ... Confused

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Final-Blonde le Jeu 16 Fév 2012 - 15:47

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 16:30

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!

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Final-Blonde le Jeu 16 Fév 2012 - 16:34

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 16:47

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

^^

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


Dernière édition par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 17:01, édité 1 fois

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 16:55

Je vous envoie un MP?

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Final-Blonde le Jeu 16 Fév 2012 - 17:04

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 17:10

Super. Very Happy

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

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Nuit Étoilée <3 le Jeu 16 Fév 2012 - 18:59

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

Nuit Étoilée <3
***

Féminin
Messages : 175
Inscrit(e) le : 22/12/2011

http://rpg-aventure-lgdc.forumgratuit.org
Nuit Étoilée <3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La Feuille de Style CSS : Elle ne marche plus !

Message par Final-Blonde le Jeu 16 Fév 2012 - 19:03

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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

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