Mon code CSS ne s'applique pas à mes div

Version imprimable

20/04/2014, 16h12
encoremoi21258

Mon code CSS ne s'applique pas à mes div

Bonjour

Je possède un site depuis déjà plus d'un an et étant donné que j'ai un peu de temps libre et que mes connaissances ont augmenté, je souhaite refaire le design.
J'ai déjà créé une seconde page d'index, pour le moment je reste que sur cette page tant que j'ai pas résolu mes problèmes.
Voici la page : http://www.fan-de-mixmaster.legtux.org/index_1.php

J'ai encore conservé les pages de mon site avec le design actuel : http://www.fan-de-mixmaster.legtux.org/

Vous constatez que sur la page d'accueil il y a un tableau. (Je sais que les couleurs son pas belles). J'ai utilisé le CSS afin de régler sa taille et faire apparaître la scollbar.

Je souhaite conserver ce tableau, j'ai donc fais copier/coller du code html et css afin de l'intégrer sur la page index_1.php.

Mais le problème (et c'est pour cela que je viens vous demander de l'aide) c'est que ni les lignes, ni les couleurs, ni la scollbar ne s'affichent. J'ai fais un test en faisant une page avec uniquement le tableau avec exactement le même code et tout fonctionne, pourtant intégré sur ma page d'accueil avec le nouveau design ça ne fonctionne pas. Pour le moment je l'ai intégré avec une iframe sur ma page index_1.php. Dessous j'ai mis le tableau sans iframe, avec les mêmes div, le même code html et css et vous voyez que seul le texte s'affiche.

Sur la page http://www.fan-de-mixmaster.legtux.org vous voyez que j'ai mis un bouton noir qui fonctionne avec 2 images et un peu de CSS. Ici également les images ne s'affichent pas (elles sont spécifiées dans le code CSS).

Le plus étrange, c'est qu'avec le developper tools de Google Chrome, lorsque je vais sur le haut du tableau sur la page où le tableau s'affiche correctement, j'ai le code CSS qui s'affiche à droite pour l'id marqué :

http://cjoint.com/14av/DDuktybfTqS.htm

Mais sur la page avec le nouveau design où le tableau ne s'affiche pas, le code CSS n’apparaît pas pour l'id concerné : http://cjoint.com/14av/DDukBRZnffq.htm

Donc je suppose que c'est "normal" que le tableau ne s'affiche pas avec des couleurs et avec la scollbar puisque le CSS semble ne pas être prit en compte ... mais pourquoi ... ça je ne trouve pas.

Avez vous une idée de la raison pour laquelle le CSS semble ne pas avoir d'effet ?
Une solution ?

Merci à tous ceux qui voudront m'aider.
21/04/2014, 06h15
Muchos

Chez moi (FF 20), il n'y a aucun problème avec le tableau ou le bouton.

ps: faites des messages plus simples la prochaine fois svp :?
21/04/2014, 12h20
encoremoi21258

Oui c'était trop long mais je voulais bien expliquer.

En faite j'ai mit le tableau sur une autre page et je l'ai intégré avec une iframe. Sous le tableau vous voyez des dizaines de lignes de texte avec à gauche des dates et à droite du texte. C'est exactement ce qu'il y a dans le tableau avec le même code html et css que le tableau intégré avec une iframe mais je l'ai mis directement sur la page.

J'aimerais bien enlever cette iframe mais le tableau ne s'affiche pas ...

Le soucis c'est que ça fait la même chose pour tout le reste, si par exemple dans le grand cadre blanc qui contient ce qu'il y a sur ma page je veux mettre un rectangle rouge et écrire du texte dedans, la couleur du rectangle ne s'affiche pas ni le bord si j'en met un, la seule propriété css qui s'applique c'est le centrage du texte mais rien concernant une couleur, une bordure, etc etc
Je parle bien sûr du cadre blanc sur la page http://www.fan-de-mixmaster.legtux.org/index_1.php
21/04/2014, 14h38
rodolphebrd

Bonjour,

en gros si je comprends bien vous voulez intégrer un tableau sans iframe ?
21/04/2014, 15h17
encoremoi21258

Oui voilà mais la seule chose qui fonctionne c'est positionner le texte (centrer ou à gauche ou à droite) mais ni les lignes du tableau ni les couleurs ne s'affichent alors que sur la page que j'ai intégré avec l'iframe (page sur laquelle il n'y a QUE le tableau) tout s'affiche comme il faut.
21/04/2014, 16h28
rodolphebrd

Ça s'affiche bien chez moi... :koi:
21/04/2014, 17h57
encoremoi21258

1 pièce(s) jointe(s)

Pièce jointe 143591

On voit le tableau intégré avec l'iframe mais dessous normalement il devrait y avoir le même tableau mais sans iframe.

Chez moi il ne s'affiche pas ...
21/04/2014, 18h05
rodolphebrd

Dans votre page supprimez l'IFRAME et copiez le css du tableau que vous collez dans le HTML principal.
21/04/2014, 18h42
encoremoi21258

Ça fonctionne ...

Donc si je résume, le code CSS placé dans le fichier CSS dit d'afficher les lignes du tableau et des couleurs et de positionner le texte (dans la class historique) et aucune ligne de code n'a de l'effet sauf le positionnement du texte.

Je prend exactement le même code CSS et je le place dans le head et là tout s'affiche.

Avez vous une idée de l'origine de ce soucis ?

Si besoin je peux vous envoyer la totalité des fichiers de mon ftp afin que vous puissiez le constater par vous même car j'imagine qu'à force vous ne me croyez pas ...
21/04/2014, 20h32
rodolphebrd

Ça s'affiche chez moi.

Sur quel navigateur êtes-vous ?
Avez-vous vidé votre cache ?
21/04/2014, 20h37
encoremoi21258

Citation:

Envoyé par rodolphebrd

Ça s'affiche chez moi.

Sur quel navigateur êtes-vous ?
Avez-vous vidé votre cache ?

J'ai modifié mon message. J'avais fermé la balise style avec /script à la place de /style ...
21/04/2014, 20h59
rodolphebrd

Postez le lien vers la page en question.
21/04/2014, 22h11
encoremoi21258

http://www.fan-de-mixmaster.legtux.org/index_1.php

Lorsque le code CSS du tableau se trouve dans le head, les couleurs, les lignes du tableau et le placement du texte sont bons mais si le même code CSS je le met dans le fichier CSS seul le placement du texte fonctionne.

C'est très embêtant comme problème car j'aurais certainement besoin de mettre des choses en couleur sur mon site et j'ai pas envie de mettre tout le CSS dans le head ... surtout que c'est déconseillé.

Je sais que les couleurs du tableau sont moches mais au moins il se voit bien pour tester le temps de trouver une solution au problème du CSS, je modifie ça à la fin.
21/04/2014, 22h29
Muchos

Citation:

Lorsque le code CSS du tableau se trouve dans le head, les couleurs, les lignes du tableau et le placement du texte sont bons mais si le même code CSS je le met dans le fichier CSS seul le placement du texte fonctionne.

À part que "chez nous, ça marche"™, ça peut être un problème de priorité des styles (ceux de la page HTML priment sur ceux de la feuille CSS).
21/04/2014, 23h04
rodolphebrd

Comment est appelée la feuille Css ?

Est-elle créée conventionnellement du type : <link type="text/css" rel="stylesheet" href="default.css">
22/04/2014, 10h20
encoremoi21258

Citation:

Envoyé par Muchos

À part que "chez nous, ça marche"™, ça peut être un problème de priorité des styles (ceux de la page HTML priment sur ceux de la feuille CSS).

Donc vous pensez que quelque chose dans le CSS annule le code du tableau et l'empêche ainsi de s'afficher ?

Je viens de tester en mettant le code de mon tableau à la fin du CSS et en enlevant le CSS du fichier index_1.php mais le résultat est le même, seul le texte s'affiche et seul le CSS qui positionne le texte a de l'effet. Logiquement si quelque chose dans le CSS du tableau rentre en conflit avec une autre chose marquée au début du CSS, en mettant le code du tableau à la fin il devrait s'afficher car annulerait alors le reste.

J'ai aussi testé en enlevant le grand cadre blanc et en mettant le CSS du tableau dans le fichier CSS mais il y a encore le même problème donc l’absence de lignes et de couleurs ne provient pas du CSS du cadre blanc, du coup là je suis à cours d'idée.
22/04/2014, 10h21
encoremoi21258

Citation:

Envoyé par rodolphebrd

Comment est appelée la feuille Css ?

Est-elle créée conventionnellement du type : <link type="text/css" rel="stylesheet" href="default.css">

Oui j'utilise

Code:

<link rel="stylesheet" type="text/css" href="test1.css" media="all"/>
22/04/2014, 10h24
rodolphebrd

Sur quel navigateur testez-vous ?
22/04/2014, 10h34
encoremoi21258

google chrome, firefox, internet explorer et safari :?

En faite à chaque fois que j'ai testé et que je vois que le problème est encore le même, je reviens en arrière et je remet le CSS dans le head.
22/04/2014, 10h51
rodolphebrd

Y'a un problème dans votre environnement de tests.

Chez nous tout passe bien.
22/04/2014, 11h01
encoremoi21258

Citation:

Envoyé par rodolphebrd

Y'a un problème dans votre environnement de tests.

Chez nous tout passe bien.

Si vous enlevez le CSS du head et le mettez dans le fichier CSS tout s'affiche correctement ??

Bien sûr que en ce moment le tableau s'affiche, comme j'ai dis, après que j'ai testé et vu que le problème est encore présent j'ai remis le CSS dans le head.
22/04/2014, 11h13
rodolphebrd
Faites deux pages tests :
- une avec le css dans le head
- une avec le css dans le fichier externe
Je pourrai peut-être comprendre le problème.
22/04/2014, 11h49
encoremoi21258

Ce que je viens de trouver est vraiment bizarre, je paris que vous n'avez jamais vu ça ...

Les trois pages suivante possèdent l'ensemble du code CSS à l'intérieur d'un fichier CSS.

Voici la page index_1.php :
http://www.fan-de-mixmaster.legtux.org/index_1.php
Son fichier CSS se nomme test1.css

Voici la page index_2.php :
http://www.fan-de-mixmaster.legtux.org/index_2.php
Son fichier CSS se nomme test2.css

Voici la page index_2.html :
http://www.fan-de-mixmaster.legtux.org/index_2.html
Son fichier CSS se nomme test2.css, exactement le même fichier que pour index_2.php qui est exactement le même (copier/coller) que le test1.css

Vous vous doutez bien que je n'ai pas réécris mon code, j'ai tout sélectionné et j'ai fais copier/coller pour le HTML et le CSS.

index_1.php possède le même code que index_2.php et index_2.html à la lettre près.
test1.css possède le même code que test2.css à la lettre près.

Pourtant, sur index_1.php (la seule page avec test1.css) que j'ai utilisé depuis le début de mon problème afin de faire des tests, le tableau ne s'affiche pas ...

J'ai créé index_2.html et .php en pensant que c'est un problème d'extension mais les 2 solutions fonctionnent.

Je pense que chercher une explication est une perte de temps puisque les fichiers sont identiques ...

Si vous n'avez rien à rajouter je pense mettre en résolu malgré le fait que index_1.php ne s'affiche pas comme il faut ...
C'est trop bizarre.
22/04/2014, 11h56
rodolphebrd

Si test1.css = test2.css pourquoi test1.css ne contient-il pas le css du tableau ?

Note : vous pouvez supprimer les balises CENTER qui sont dépréciées depuis un bout de temps.

Citation:

Je pense que chercher une explication est une perte de temps puisque les fichiers sont identiques ...

Ben non car le problème peut se reproduire...
22/04/2014, 12h10
encoremoi21258

Oh que je suis tête en l'air ...

Le fichier test1.css que j'ai ouvert dans notepad++ contient bien le CSS du tableau mais ... il se trouve sur le bureau alors que le test1.css (celui que je réupload après chaque test) se trouve dans le dossier sur mon PC qui contient tous les fichiers qui sont sur mon ftp ...

Du coup quand je modifie test1.css et que je le reupload, c'est pas le fichier modifié que je reupload ... :boulet::pastaper::merci:

Plusieurs heures à chercher ... juste pour ça ...

En tout cas merci d'avoir consacré autant de temps à chercher d'où vient le problème ... j'ai honte :(

Pour les balises center j'ai remarqué ça, je vais y remédier après avoir mangé.

Bonne journée :resolu:

Ceux qui ont un soucis inexplicable sur votre site, vérifiez d'abord que vous mettez le bon fichier fichier sur votre serveur ...