[RESOLU] Interférences de CSS

Bonjour tout le monde,
Là je craque et j'ai vraiment besoin de vous :

Le style du pied de page de mon site n'est pas pris en compte si certains styles associés à des <div> en amont sont définis.

Pour faire simple, mon site est ici : http://poussine.apinc.org

Sur la page d'accueil, le pied de page est bleu, en petite taille par rapport au reste

Par contre, si on suit le lien "Bien démarrer" du menu à gauche, le style du pied de page n'est plus défini (on retrouve en fait celui défini dans le body)

Et là où je ne comprend plus rien, c'est qu'il "suffit" de supprimer un bloc CSS, celui associé au formulaire de recherche par exemple (mais il y en a d'autres) et là, le style du pied de page revient.

Pourquoi ? je n'en sais strictement rien. J'ai ce pb de puis pas mal de temps, j'y ai réfléchi à différentes occasions, et le temps passé n'y a rien fait.

Pour ceux qui voudront y jeter un coup d'oeil, j'ai un flux html ici :
http://poussine.apinc.org/test_css.html qui est beaucoup plus lisible que la source dynamique du site en lui même (j'ai pris le temps de mettre des tab partout)

Un très grand merci à ceux qui pourront m'aider.
Gilles
PS : tout le css est stocké dans une BDD et il est généré dynamiquement ; ceci explique le grand nombre de <style>...</style>
Modifié par gilles74 (29 Sep 2007 - 01:14)

Salut,

Ton code ext illisible pour un humain, et surement pour les navigareurs.

Met de l'ordre dans ta page. Tu as des déclarations CSS partout et entre autre dans le body.

Récupère tout ça dans un seul fichier externe et accroche-le à la page.

Après on verra.
Modifié par papyjo (28 Sep 2007 - 02:55)

papyjo a écrit :
Tu as des déclarations CSS partout et entre autre dans le body.

C'est parce que chaque "bloc" (top, gauche, droit, etc...) a son propre style de défini et que l'interface d'administration du site propose un jeu de cases à cocher pour faire apparaître ou non tel ou tel bloc.
Concernant le body, est-il déconseillé de lui affecter un style ?

papyjo a écrit :
Récupère tout ça dans un seul fichier externe et accroche-le à la page.

Impossible : le site est un CMS complètement automatisé ; le CSS est stocké en base de donnée (et éditable depuis l'interface d'admin sans avoir à ouvrir des fichiers .css ou autre)

J'ai pleine consience que le code de http://poussine.apinc.org/test_css.html ne paraît pas du tout optimisé, mais c'est le prix à payé pour l'automatisation complète du site.

A nouveau, la source de http://poussine.apinc.org/test_css.html est plus lisible qu'une source directe du site http://poussine.apinc.org car j'ai justement pris le temps de la tabuler.

Concrètement, si on enlève le style associé au formulaire de recherche :

<style type="text/css">
.div_recherche_formulaire {
....
}
.div_recherche_formulaire input {
....
}
</style>

le pied de page "retrouve ses couleurs", mais on pourrait en enlevé un autre, ce que je ne comprends pas.
Que faire ?
Merci d'essayer de m'aider.
Gilles
Modifié par gilles74 (28 Sep 2007 - 11:47)

gilles74 a écrit :
J'ai pleine consience que le code de http://poussine.apinc.org/test_css.html ne paraît pas du tout optimisé, mais c'est le prix à payé pour l'automatisation complète du site.

Ce n'es pas qu'il n'est pas optimisé, c'est qu'il est complètement, totalement invalide. Pour être clair: l'élément STYLE ne peut pas être placé ailleurs que dans le HEAD. Pas possible. Pas moyen. Niet.

Si tu tiens à placer tes éléments style dans le body ou directement dans tel ou tel bloc, ça passera peut-être avec certains navigateurs permissifs, ou bien pas du tout, ou bien ça passera partiellement. Bref, c'est la merde. Il ne faut pas procéder ainsi.

Je pense que je suis clair.

Il va falloir que tu réfléchisse aux moyens de garder un système automatisé MAIS via des styles CSS correctement définis, pas via une bouillie de code invalide.
Mais ça ne devrait pas être bien compliqué si ton site est un CMS maison.

Notons tout de même qu'un moyen pour rendre ce code valide sans tout bouleverser au niveau de l'organisation serait d'utiliser l'attribut style et non pas l'élément du même nom.

Code pas valide:

<style type="text/css">
	.div_bloc_top1 {
		clear:both;
		text-align:left;
		background-image: url(styles/defaut/bg_top.jpg);
		background-repeat: no-repeat;
		height:100px;
		color:white;
		font-size:3em;
		padding-left:10px;
		padding-right:10px;
		margin-top:0px;
	}
	</style>
<div class="div_bloc_top1">
	...
</div>

Code valide:

<div style="
	clear:both;
	text-align:left;
	background-image: url(styles/defaut/bg_top.jpg);
	background-repeat: no-repeat;
	height:100px;
	color:white;
	font-size:3em;
	padding-left:10px;
	padding-right:10px;
	margin-top:0px;
">
	...
</div>

Mais ça reste effectivement pas le moins du monde optimisé, et on peut faire mieux... même avec les contraintes organisationnelles mentionnées.
Modifié par Florent V. (28 Sep 2007 - 12:06)

Tout d'abord, merci pour l'intérêt porté à mon problème.
Pour le CMS, il est maison et j'ai la main sur tout.
Les css sont appelés au cas par cas avec include(), c'est pour ça qu'il sont dans le body.
Je vais faire des essais en les passant tous dans le <head></head> (l'autre solution est plus délicate et plus longue à mettre en oeuvre)

Je ne pense pas que ça résoudra le pb, mais ça apportera de la rationalité, ce qui n'est pas rien.

Post à venir pour dire ce qu'il en est.

Merci

gilles j'ai comme projet avec un pote de créer aussi un CMS

quel est ton objectif à toi pour ce cms ??

es-tu seul à le coder ?

Gouri a écrit :
gilles j'ai comme projet avec un pote de créer aussi un CMS

quel est ton objectif à toi pour ce cms ??

es-tu seul à le coder ?

Oui je suis seul, pas informaticien (prof de méca).
Objectifs ici : http://s2p2.apinc.org
PS : si l'accès au site mouline, ce n'est pas le site mais l'hébergement mutualisé...

Bon, je m'attèle à remonter tout le CSS dans le <head>.
A plus tard...
Modifié par gilles74 (29 Sep 2007 - 00:39)

Ok, intêressant, bon courage

J'ai passé tout le CSS dans le <head>
Compte tenu de l'automatisation (CMS oblige), certains styles sont chargés inutilement.
Bien que certains ont quand même pu être affectés d'un "IF" (php) selon le cas (je ne rentre pas dans les détails) et donc ils ne sont pas intégrés au flux.
C'est presque un détail dans la mesure où le CSS est chargé une seule fois par le nav.
le poids est de 12 ko (pour une charte globalement complète) donc ça ne va pas non plus mettre l'Internet mondial en vrac.
Bref, tout ça pour dire que j'ai remonté tout le CSS, qu'après ça mon problème persistait et que j'ai modifié mon code php pour faire en sorte de n'avoir qu'un seul <style type="text/css"> au début et qu'un seul </style> à la fin, à la place dans avoir 50000.
Et maintenant, ça marche !!
Et en plus mon outil à gagné en cohérence (et en lisibilité)
Donc un grand merci à ceux qui ont pris de le temps de regarder mon camboui (ce n'était pas gagné à priori)
Gilles
Pour ceux qui veulent en savoir plus sur mon CMS :
http://s2p2.apinc.org
PS : si l'accès au site est lent, c'est la faute à l'hébergeur...Salutations,
Gilles
Modifié par gilles74 (29 Sep 2007 - 01:32)

gilles74 a écrit :
Compte tenu de l'automatisation (CMS oblige), certains styles sont chargés inutilement.

Si tu places tous les styles dans une feuille de style externe, cette feuille de style sera mise en cache par le navigateur. Quand bien même elle ferait 15 Ko (ce qui est tout de même rare pour une feuille de style, ou alors il faut vraiment qu'elle ne soit pas optimisée ou bien que le site soit énorme!), ça représentera un unique chargement de 15 Ko, donc pas la mer à boire. Surtout si on compare au chargement d'images...

Florent V. a écrit :

Si tu places tous les styles dans une feuille de style externe, cette feuille de style sera mise en cache par le navigateur.

Et ce n'est pas le cas si le CSS est dans le fichier PHP à l'aide <style type="text/css">...</style> ?
Perso, je pense que oui car j'ai mis une condition (php) qui fait que les styles sont appelés que s'ils ne l'ont pas encore été ; en d'autres termes, la définition des styles n'a lieu qu'une fois...

Concernant l'optimisation, je pense que tu fais référence au fait qu'on peut avoir par exemple un seul "margin:12 12 0 0" à la place d'avoir un "margin-left" puis un "margin-right", etc...
C'est ça ?
Modifié par gilles74 (29 Sep 2007 - 16:35)