[Résolu] Le CSS s'affiche sur la page ! par Torajio Bangani - page 1

Bonjour.

Hier, j'allais sur mon site pour voir si il n'y avait pas de problème. Super, tout marche correctement. Mais c'est là que je l'actualise une demi-heure après sans avoir touché quoi que ce soit, et le CSS s'affiche à la place du menu !

Voyez-vous même !

Quelqu'un saurait-il ce qu'il s'est passé ? Je n'ai pas touché au code.

Bon je rajoute quand même celui de index.html et de design.css (je vous préviens, je n'ai pas mis de commentaires et beaucoup de pubs :lol:

)

<!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" xml:lang="fr">
<head>
<title>SimilGames - Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="keywords" content="similgames, jeu, jeux, jeux vidéos, jeux consoles, logiciel, logiciels, télécharger" />
<meta name="description" content="Sur ce site, vous pourrez télécharger des logiciels, des jeux vidéos ou des jeux console GRATUITEMENT ! Venez aussi vous inscrire et ainsi avoir une page personnelle dont vous pourrez changer le design si cela vous chante sur demande au wabmaster (inscription en bas de page) ..." />

<link rel="shortcut icon" type="image/x-icon" href="Images/Favicon.ico" />

<link rel="stylesheet" media="screen" type="text/css" title="Défaut" href="design_défaut.css" />
</head>
<body>

<div id="en_tete">
</div>

<div id="menu">

<div class="element_menu">

<h3>Catégories</h3>
<h4>Retour</h4>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="http://www.swisstools.net/annuaire.asp?id=6045">Annuaire</a></li>
</ul>
<h4>Logiciels</h4>
<ul>
<li><a href="Logiciels - Programmes normaux.html">Programmes normaux</a></li>
<li><a href="Logiciels - Programmes consoles.html">Programmes consoles</a></li>
</ul>
<h4>Jeux</h4>
<ul>
<li><a href="Jeux - Programmes normaux.html">Programmes normaux</a></li>
<li><a href="Jeux - Programmes consoles.html">Programmes consoles</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Autres</h3>
<ul>
<li><a href="Packs d'icônes.html">Packs d'icônes</a><span class = "new"><sup>NEW !</sup></span></li>
<li><a href="http://www.similgames.kanak.fr">Forum</a></li>
<li><a href="Liens externes.html">Liens externes</a></li>
</ul>

<h4>Publicité<br /></h4>



<center>
<p><a href = "http://www.annonces-de-france.net/annuaire_liens_durs_et_backlinks_gratuits/gestion/in.php?url_id=2907">Annuaire de sites gratuit</a></p>

<p><a href="http://www.denicher.com">Référencement gratuit sur Denicher.com</a></p>


<iframe src='http://www.verase.be/pub/autopromo/bouton-ravecrow2-88x31.html' width='88' height='31' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'><a href="http://www.verase.be/statiques/part_services/petites_annonces.php">Petites annonces</a> | <a href="http://www.verase.be">Vérase le portail</a> | <a href="http://www.verase.be/statiques/webmasters">webmasters affiliations</a> | <a href="http://www.verase.be/statiques/part_services/rencontres.php">Rencontre gratuites</a> | <a href="http://www.ravecrow.com">Référencement gratuit</a> | <a href="http://www.ravecrow.com/ad_by_word">Achat des mots clés</a></iframe>


<iframe src="http://www.verase.be/pub/autopromo/bouton-88x31.html" width="88" height="31" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"><a href="http://www.verase.be/statiques/part_services/petites_annonces.php">Petites annonces</a> | <a href="http://www.verase.be">Vérase le portail</a> | <a href="http://www.verase.be/statiques/webmasters">webmasters affiliations</a> | <a href="http://www.verase.be/statiques/part_services/rencontres.php">Rencontre gratuites</a> | <a href="http://www.ravecrow.com">Référencement gratuit</a> | <a href="http://www.ravecrow.com/ad_by_word">Achat des mots clés</a></iframe>


<script language="javascript" src="http://www.swisstools.net/livecounter_logo.asp?id=51531" alt = "Swisstools"></script>
<script language="javascript" src="http://www.swisstools.net/counter_logo.asp?id=123399" alt = "Swisstools"></script>

<br />

<style>.grad {font-size:8px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#9999FF',EndColorStr='#FFFFFF');} span.uu td,span.uu a {text-align:center;font-size:8px;font-family:Arial;color:#6666FF;text-decoration:none;}</style><span class="uu"><table cellspacing="0"><tr><td bgcolor="#9999FF"><a href="http://www.refmarketing.com" style="font-size:9px;color:#333333;">referencement</a></td></tr><tr><td class=grad><a href="http://www.m-sonneries.com">sonneries</a> <a href="http://www.une-sonnerie.com">sonnerie</a> <a href="http://www.secrets-du-casino.com/">casino</a> <br> <a href="http://www.gratuit-referencement.com">referencement gratuit</a> <a href="http://www.credit-perso.info">credit</a><br></td></tr></table></span>


</center>


</div>

</div>

<div id="corps">
<p>Vous êtes ici : Accueil<br /></p>
<p><a href = "http://www.swisstools.net/annuaire.asp?id=6045">Voir l'annuaire des sites (et référencez le vôtre !)</a></p>
<h1>Présentation</h1>

<p>Bonjour et bienvenue sur ce site <em>(qui est le mien !)</em> !<br />
Ici, vous trouverez un annexe de jeux et des logiciels triés par catégories <em>(pour s'y retrouver)</em> que j'ai créés <em>(les jeux et les logiciels bien sûr, les catégories, on s'en fiche)</em>. Par contre, il y a aussi mes logiciels <em>(plus ou moins utiles...)</em>. Et puis un site qui ne contitent que ça n'aura pas un franc succès, je rajoute quelques liens vers des sites que j'aime bien et qui peuvent être utiles. D'ailleurs, il y a aussi les partenaires.<br />
Au passage, vous pouvez devenir un de mes partenaires en m'écrivant à cette adresse <em>(e-mail, of course)</em> :</p>
<p style = "text-align:center"><a href = "mailto:similgames@wb.st">M'écrire</a></p>

<h2>Info importante :</h2>
<p>
Quand vous verrez les deux parties "Programmes normaux" et "Programmes consoles", ne vous dites pas :<br />
</p>

<p>
<span class = "voix_lecteur">"OUAAAAAH ! Je peux télécharger des jeux de PS2 GRATUITEMENT !!!"</span>
</p>

<p>
Je vous arrête <strong>TOUT DE SUITE</strong> <em>(et je vous casse le moral par la même occasion)</em>. En fait, les programmes consoles sont des programmes où on ne peut QUE écrire et qui sont en noir et blanc <em>(comme les premiers ordinateurs... Ca fait froid dans le dos !)</em>. Mais ça n'empêche pas que les jeux soient aussi intéressants <em>(peut-être un peu, en fait)</em>. Ils sont plus simples mais sympa quand même <em>(jeu du Pendu, c'est marrant ça !)</em>.</p>

<p>Roooooooh... Faites pas cette tête, ce ne sont pas les seules choses qu'il y a <em>(à moins que vous soyez venu alors que le site n'est lancé ou référencé depuis moins d'un mois...)</em>.</p>

<h2>Internet Explorer</h2>

<p>Je vois déjà les utilisateurs d'Internet Explorer 6.0 ou inférieur arriver :
<p>
<span class = "voix_lecteur">"Héé ! Pourquoi qu'il est tout moche le site ?"</span>
</p>

<h4>La raison</h4>

<p>Internet Explorer 6.0 ou inférieur est trop "bête" pour comprendre certains fragments de codes du langage <a href="#info" class="info"><u>CSS</u><span><u><strong>Cascade Style Sheets :</strong></u> Feuille de style.<br /><br />Il faut savoir que le HTML ou le XHTML ne font qu'écrire du texte brut sur une page blanche !</span></a> utilisé sur mon site. Ensuite, il dit : "Oh, je ne connais pas ça, alors je ne lis pas le style est je l'affiche en noir et blanc (et bleu pour les liens).". C'est pour cela que je vous conseille d'installer un navigateur plus à jour tel que Mozilla Firefox. Pourquoi lui et pas un autre ? Simplement parce qu'avec toutes ses extensions, ses thèmes et plein d'autres avantages, il est classé dans les meilleurs.</p>

<p>Tiens, voici un joli lien qui passe. Oh ! C'est celui pour téléchargé Mozilla FireFox ! Quelle coïncidence !</p>

<div id = "Mozilla"><script type="text/javascript">
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

<p><span class = "petit">--> Si vous ne voyez pas le lien, c'est que votre navigateur est configuré pour ne pas accepté le langage Javascript, que vous êtes hors connection, que vous avez déjà Mozilla FireFox, ou encore que vous avez un navigateur trop vieux pour le voir <em>(dans ce dernier cas, vous devriez voir du code directement taper sur la page d'accueil car les anciens navigateurs ne connaissent pas ces balises et les considèrent comme du texte)</em>. Alors je vous conseille de l'activer, au moins pour ce site. Ne vous inquiétez pas, je ne l'utilise que TRES rarement, et ce n'est pas pour ouvrir des pop-ups ou des pop-unders dans tous les sens. Vous pouvez me faire confiance.</span></p>

<h2>Le but du site</h2>
<p>J'ai créé ce site pour voir si mes jeux et loigicieles sont appréciés et avoir des commentaires dessus, des suggestions pour les améliorer, ... Et surtout faire plaisir aux internautes <em>(dont vous !)</em> en leur proposant des jeux pour les divertir et des logiciels pour leur faciliter la vie. J'espère juste que vous pourrez y trouver votre bonheur.
</p>

<h2>Se connecter/s'inscrire</h2>

<span class = "connect"><center><table border="0" width="300" cellspacing="0" cellpadding="0"><tr><td width="100%">
<script LANGUAGE="javascript">function controleformulairemdp(cur){
if (cur.login.value==''){alert('Il vous faut indiquer votre nom d\'utilisateur !');cur.action.value='Se connecter';cur.login.focus();cur.login.select();return false;}
if (cur.password.value==''){alert('Il vous faut indiquer votre mot de passe !');cur.action.value='Se connecter';cur.password.focus();cur.password.select();return false;}
}</script>
<table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#000000"><tr>
<form method="POST" action="http://www.swisstools.net/motdepasse.asp" onsubmit="return controleformulairemdp(this)"><input type="hidden" name="id" value="15465">
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="2"><tr><td width="100%" colspan="2" bgcolor="#000000"><p align="center"><b><font face="Arial" size="2" color="#FFFFFF">Connection / Inscription</font></b></td></tr>
<tr><td width="60%" bgcolor="#336600"><p align="right"><font face="Arial" size="2" color="#CCFF00">Pseudo</font></p></td><td width="44%" bgcolor="#336600"><p align="left"><font face="Arial" size="2"><input type="text" name="login" size="10"> </font></p></td></tr>
<tr><td width="60%" bgcolor="#336600"><p align="right"><font face="Arial" size="2" color="#CCFF00">Mot de passe</font></p></td><td width="44%" bgcolor="#336600"><p align="left"><font face="Arial" size="2"><input type="password" name="password" size="10"> </font></p></td></tr>
<tr><td width="100%" colspan="2" bgcolor="#336600"><p align="center"><input type="submit" value="Se connecter" name="action" onclick="this.value='Patientez...'"></td></tr>
<tr><td width="100%" colspan="2" bgcolor="#000000"><p align=center><font size="2" face="Arial" color="#FFFFFF">

[ <a style="color:#FFFFFF" href="#" onClick="window.open('http://www.swisstools.net/motdepasse/inscription.asp?id=15465&color1=000000&color2=336600&texte1=FFFFFF&texte2=CCFF00&style=Arial&size=2','gerer','scrollbars=1, resizable=1, width=500, height=500');return(false)">Inscrivez-vous</a> ]<br>

[ <a style="color:#FFFFFF" href="#" onClick="window.open('http://www.swisstools.net/motdepasse/gerer.asp?id=15465&color1=000000&color2=336600&texte1=FFFFFF&texte2=CCFF00&style=Arial&size=2','gerer','scrollbars=1, resizable=1, width=500, height=500');return(false)">Gérer votre compte</a> ]<br>

[ <a style="color:#FFFFFF" href="#" onClick="window.open('http://www.swisstools.net/motdepasse/perdu.asp?id=15465&color1=000000&color2=336600&texte1=FFFFFF&texte2=CCFF00&style=Arial&size=2','motdepasse_perdu','scrollbars=1, resizable=1, width=500, height=210');return(false)">Oublié ?</a> ]

[ <a style="color:#FFFFFF" href="http://www.swisstools.net/fr/membre/motdepasse/acces_moderateur.asp?id=15465" target=_blank>modérateur</a> ]
<br>[ Fournit par <a href="http://www.swisstools.net" target="_blank" style="color:#FFFFFF">Swisstools.net</a> ]</font></td>
</tr></table></td></form></tr></table></td></tr></table></center></span>
<p> Remplissez les champs pour vous connecter. Si vous n'êtes pas encore inscrits, cliquez sur "Inscrivez-vous" <em>(Pfiou ! J'aurais jamais devinez tout seul !)</em>.</p>

<p>Vous ne trouvez pas ce que vous voulez ? Et bien utilisez la recherche Google que je me suis embêté à trouver rien que pour vous <em>(c'est pas grave, ça m'a pas vraiment embêté : ça me faisait un bon prétexte pour aller sur l'ordinateur)</em></p>
<p><span class = "petit">--> Ceci est un champ de recherche externe au site. Il n'est pas conçu pour rechercher les mots-clés dans les pages de SimilGames.</span></p>


<center>
<FORM method=GET action="http://www.google.fr/search">
<TABLE bgcolor="#2e5a26"><tr><td>
<A HREF="http://www.google.fr">
<IMG SRC="Images/Google recherche.jpg" border="0"
ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=15 maxlength=30 value="">
<INPUT TYPE=hidden name=hl value=fr>
<INPUT type=submit name=btnG VALUE="Recherche Google">
<br /></td></tr></TABLE>
</FORM>
</center>


<p>Et un deuxième champ de recherche, celui de Vachercher, de qualité différente <em>(à vous de dire si c'est Vachercher ou Google le meilleur)</em> pour changer un peu de moteur de recherche <em>(peut-être que vous trouverez sur Vachercher un truc que vous ne trouverez jamais sur Google ?)</em></p>
<p><span class = "petit">--> Pareil que pour le champ de recherche Google.</span></p>

<center><script language="javascript" src="http://www.vatrouver.com/webmaster/moteur.js"></script><br /></center>


</div>

<div id="pied_de_page">

<p>Copyright "SimilGames" 2006 tous droits réservés.<br />
<span class = "petit">Toute copie totale ou partielle est inderdite sans l'autorisation de l'administrateur
que vous pouvez contacter en cliquant <a href = "mailto:similgames@wb.st">ici</a></span></p>
<p>Depuis le lancement du site, il y a eu
<script language="javascript" src="http://www.swisstools.net/counter.asp?id=123399&type=7&digits=4&cache=no"></script> visiteurs uniques qui ont visualisés cette page.
<center><script language="javascript" src="http://www.swisstools.net/livecounter.asp?id=51531&1=1&2=&3=&4=&5=&6=ok&7=1&8=000000&9=1&10=Verdana&11=1&12=1&13=CCFF00&14=336600&15=000000&16=000000&17=55CC11&18=FFFFFF&19=Il y a&20=visiteur actuellement sur le site&21=visiteurs actuellement sur le site&22=Livecounter&23="></script><br /></center>

<span class = "XHTML-CSS_valid"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Page XHTML 1.0 valide" title = "Page XHTML validée par W3C" height="31" width="88" /></span>

<span class = "XHTML-CSS_valid"><img src = "http://jigsaw.w3.org/css-validator/images/vcss" alt = "Feuille de style CSS valide" title = "Feuille de style CSS validée par W3C" height = "31" width = "88"/></span>
</p>
</div>
</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("Images/fond.png");
}

#en_tete
{
width: 756px;
height: 102px;
background-image: url("Images/Titre.png");
border: 2px ridge;
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menu
{
float: left;
width: 132px;
}

.element_menu
{
background-color: #2e5a26;
background-image: url("Images/motif.png");
background-repeat: repeat-x;

border: 2px ridge black;
margin-bottom: 20px;
padding-bottom: 5px;
}

.element_menu h3, .element_menu h4
{
color: #10b700;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu u
{
list-style-image: url("Images/puce.ico");
padding: 0px;
padding-left: 30px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
color: #8cf600;
}

.element_menu a:hover
{
background-color: green;
color: yellow;
}

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;

color: #72c400;
background-color: #2e5a26;
background-image: url("Images/motif.png");
background-repeat: repeat-x;
border: 2px ridge black
}

#corps h1
{
color: #10b700;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 32px;

background-image: url("Images/titre1.ico");
background-repeat: no-repeat;

padding-left: 36px;
color: #729600;
text-align: left;
}

#corps h4
{
height: 24px;

background-image: url("Images/titre2.ico");
background-repeat: no-repeat;

padding-left: 36px;
color: #729600;
text-align: left;
}

#pied_de_page
{
padding: 5px;

text-align: center;

color: #72c400;
background-color: #2e5a26;
background-image: url("Images/motif.png");
background-repeat: repeat-x;

border: 2px ridge black;
}

.voix_lecteur
{
color : blue;
font-weight : bold;
font-size : 1em;
}

li
{
font-family : arial, verdana, serif;
font-size : 0.8em;
}

p
{
font-family : verdana, arial, serif;
font-size : 0.9em;
}

h2
{
font-family : arial, serif;
}

h4
{
font-family : arial, serif;
}

.petit
{
font-size : 0.6em;
color : yellow;
text-indent : 15px;
}

.pseudo
{
color : yellow;
}

.XHTML-CSS_valid
{
border : none;
}

#Mozilla
{
text-align : center;
}

dl
{
font-family : verdana, arial, serif;
font-size : 0.9em;
}
dl a
{
color : #8cf600;
}

dl a:focus
{
background-color : yellow;
color : green;
}

dl a:hover
{
background-color : green;
color : yellow;
}

.mauvais_exemple
{
color : red;
}

.bon-exemple
{
color : green;
}

.Erreur404
{
color : red;
font-weight : bold;
text-align : center;
}

.question
{
color : red;
}

.e-mail:focus
{
background-color : yellow;
color : green;
}

.e-mail:hover
{
background-color : green;
color : yellow;
}

#PS
{
font-size : 0.8em;
}

.connect
{
Text-align : center;
}

a.info {
position: relative;
color: #72c400;
text-decoration: none;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;

a.info:hover {
background: none;
z-index: 500;
cursor: help;
}
a.info:hover span {
display: block;
position: absolute;
white-space: nowrap;
background: yellow;
color: green;
padding: 3px;
border: 1px ridge green;
border-left: 2px solid green;
}

.new
{
color : red;
font-size : 0.8em;
padding-left : 2px;
text-decoration : blink;
}

Torajio Bangani

21 avril 2006 à 7:14:49

Silver_Error

21 avril 2006 à 7:26:32

Je vois pas de probleme sur le site

21 avril 2006 à 7:37:13

Moi ça m'affiche le CSS suivi du corps.

Image utilisateur

MaitreZur

21 avril 2006 à 7:48:09

Je n'ai pas le même problème, mais sous IE, le CSS ne passe tout simplement pas du tout chez moi (à moins que ce soit IETab qui déconne, mais je doute...). Déjà à ta place je renommerais le fichier en design_defaut, les accents sont parfois mal digérés :-°

strucky

21 avril 2006 à 10:45:14

Salut,

Il ne faut pas mettre de caractères accentués et spéciaux dans les noms de répertoires et fichiers.

St!L1g

21 avril 2006 à 11:14:30

Citation : MaitreZur

<link rel="stylesheet" media="screen" type="text/css" title="Défaut" href="design_défaut.css" />

Je n'ai pas le même problème, mais sous IE, le CSS ne passe tout simplement pas du tout chez moi (à moins que ce soit IETab qui déconne, mais je doute...). Déjà à ta place je renommerais le fichier en design_defaut, les accents sont parfois mal digérés

Ce n'est pas IE Tab qui déconne, au début je le croyais mais j'ai ouvert le vrai IE 6 et ça donne le même résultat. Et oui, il faudrait que tu renome ton fichier CSS.

atly

21 avril 2006 à 11:36:18

IE Tab se base sur le moteur d'IE, donc de toute manière...

Norrecix

21 avril 2006 à 12:01:22

Salut,

Moi de mon côté je n'ai aucun problème. Mais comme l'a signalé strucky, il est bon d'être très très stric au niveau de ses noms de répertoires et de fichiers quand on créé des pages internet.

Pas de caractères spéciaux
Pas de majuscules
Pas d'espaces (à la place on utilise un underscore)

Ca simplifie tout de suite la vie lorsque l'on code ensuite. Ce sont de bonnes habitudes à prendre qui peuvent éviter ce genre d'erreur (enfin je ne sais pas, je n'ai jamais eu ça) et qui serviront partout ! Surtout si tu veux te lancer dans la programmation après (j'entend par là le cours de C / C++ de M@teo par exemple).

A+

Cordialement, Norrecix

21 avril 2006 à 16:08:04

J'ai déjà remarqué que ça ne fonctionnait pas sous IE

Merci beaucoup à tous. Je crois bien que c'était l'accent du design : je l'ai changé et ça s'est arrangé.

Le CSS s'affiche sur la page !

Le CSS s'affiche sur la page !

Supprimer

Modérer

Signaler le message aux modérateurs