Joomla intégration CSS

Bonjour, c'est mon premier message sur Alsacréations, j'espère en tout premier lieu ne pas mettre trompé de forum ^^ ...


Voilà, je me suis récement atteler à intégrer des sites web via le CMS Joomla.
J'ai déjà quelques notions en css mais pas vraiment appliqué à Joomla.
C'est donc tout nouveau pour moi et je me heurte à différents problèmes, le principal étant la différence d'interprétation des navigateurs.

Je vais essayer d'être le plus précis possible

En ce qui concerne le css général (backgrounds, polices, placements...) mon site semble à peu près correct sous Mozilla firefox 1&2, IE 6&7, et Safari 2.

Seulement voilà lorsque Joomla me génère des classes qu'il applique au contenus dynamiques (ex : bloc texte central) et que je tente de lui imposer un css plus stricte, ça devient aléatoire.

-------------------------------------------------------------------------
EX : Joomla créer la classe ".contentpaneopen" vierge.

je le modifie donc de la sorte dans mon fichier "template_css.css" pour que ça colle à ce que je souhaite et ça donne :

.contentpaneopen {
font-family:"Verdana", Arial, Helvetica, sans-serif;
color:#999999;
font-size:12px;
background:#37314A url(../images/contenurepeat.jpg) repeat scroll 0px 50%;
float:left;
height:5px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
padding:0px;
padding-left:15px;
padding-right:15px;
width:518px;

-------------------------------------------------------------------------

Mon souci est le suivant, cette classe .contentpaneopen s'applique à plusieurs blocs, donc en en modifiant j'en modifie un autre, c'est sans fin...

M'armant de patience j'entreprend une recherche dans les fichiers .php de Joomla et trouve un fichier nommé content.html.php qui semble générer les classes. je lui impose donc un ".contentpaneopen2" de force juste pour le bloc qui m'intéresse.
Je modifie le css en conséquence et rajoute :

.contentpaneopen2 {
background:#37314A url(../images/bandeauqui.jpg) repeat scroll 518px 50%;
float:left;
height:50px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
padding:0px;
width:518px;
}

MAGIE ! Firefox et Safari on bien voulu adhérer et tout est parfait ! Malheureusement il n'en est pas de même pour les IE qui ne reconnaissent, soit pas la modif du fichier PHP soit qui ne comprennent pas le fichier css, car à l'endroit où il devrait y avoir la modification, c'est juste... vide.

Voici un aperçu de la page et du code via le logiciel FireBug:



Voici l'URL actuelle du site :
http://www.kareo.fr/oghamdelort/index.php

Ce cas est très précis, j'en conviens mais j'espère que quelqu'un pourra m'aider, je ne sais plus trop comment faire.

Merci d'avance à ceux qui aurons le courage de m'aider
Modifié par mawashi (30 Oct 2007 - 11:52)

Bonjour et bienvenue, mawashi.


En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

En ce qui concerne ton problème, il faudrait nous donner le code HTML de la page générée par Joomla (ou mieux, un exemple en ligne !) pour qu'on puisse se rendre compte ...



Bonne continuation

Bonjour,

Il faudrait commencer par supprimer le prologue XML, qui n'est pas vraiment adapté ici (on utilise du XHTML 1.0 servi en "text/html", donc traité comme du HTML), et surtout qui fait passer Internet Explorer 6 en mode Quirks.

(Faire une recherche sur mode Quirks et mode Standard si ces notions ne sont pas connues.)

Merci Florent pour cet éclaircissement ... pour palier aux désagréments du mode quirks j'ai utilisé le systeme de :

* html

qui n'a pas l'air d'être le plus propre.
Bon du coup ça a refait bouger mon css et quoi qu'il en soit mon problème lié a Joomla reste entier...

mawashi a écrit :
pour palier aux désagréments du mode quirks

Je crois que tu n'as pas bien compris ce qu'est le mode Quirks. Là, il me semble que tu parles de différences de rendu entre les navigateurs et de hacks CSS pour viser certains navigateurs plutôt que d'autres. Ça n'est pas la même problématique.

On pourra lire:
http://blog.alsacreations.com/2006/10/23/296-a-propos-du-modele-de-boite-microsoft-ou-quirks
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

hum... effectivement je parlais bien de ça.

j'ai bien lu les liens que tu m'as proposé et je vois donc l'impact qu'à la ligne

echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

sur ma page. Elle semble inutile dans ce cas précis. Je l'ai donc supprimé et mon site est désormais aligné à gauche sous IE 6 malgré un hack toujours présent dans mon css.

* html body {
text-align:center;
}

Quoi qu'il en soite merci, je ne m'étais jamais réellement penché sur les doctypes et autres DTD

mawashi a écrit :
Je l'ai donc supprimé et mon site est désormais aligné à gauche sous IE 6 malgré un hack toujours présent dans mon css.

* html body {
text-align:center;
}

Tu peux supprimer ce hack inutile. Si tu as besoin d'adresser des styles spécifiques à certaines versions d'IE, pense à utiliser les commentaires conditionnels (voir la FAQ du forum à ce sujet).

J'ai un peu examiné ta page, et ton bloc div#corps est parfaitement centré (si, si!). Seulement voilà: il ne fait pas 960px de large, mais beaucoup plus, sans doute parce qu'une partie de son contenu doit être trop large et étendre div#corps en largeur (bug d'IE6 qui interprète mal la propriété CSS width, c'est-à-dire qu'il ne fige pas la largeur du bloc quelle que soit celle de son contenu). Je ne sais pas quel est l'élément qui dépasse, par contre.

Parmi les choses qui n'aident pas:
1. un prologue XML qui se balade au milieu du code (pas bien problématique, mais ça fait tâche);
2. globalement, un code HTML non valide avec quelques mauvaises imbrications d'éléments (ça peut perturber les navigateurs);
3. dans l'ensemble, une intégration qui consiste à transposer en div flottantes ce qu'on ferait avec un tableau de mise en page. Une bonne grosse divite aigüe, et une mauvaise utilisation (doublée d'une sous-utilisation) du positionnement CSS.

Bref, il y a encore du boulot avant d'arriver à quelque chose de robuste et facilement maintenable.

Un peu de lecture: Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?

Okay, merci beaucoup Florent pour le lien que tu m'as fourni (et les liens à l'intérieur) qui est définitivement essentiel.

Maintenant j'ai (encore) une question.
Puisque je ne créé pas à proprement-dit une page HTML de contenu à laquelle je vais associer une feuille CSS mais que la page en question est une page PHP (index.php) généré par le CMS Joomla, est-ce que les voies que tu ma proposé s'appliquent elles aussi?

Je prend l'exemple du prologue XML qui m'a été imposé d'entrée dans mon index.

Merci d'avance !
Modifié par mawashi (31 Oct 2007 - 15:38)

mawashi a écrit :
Maintenant j'ai (encore) une question.
Puisque je ne créé pas à proprement-dit une page HTML de contenu à laquelle je vais associer une feuille CSS mais que la page en question est une page PHP (index.php) généré par le CMS Joomla, est-ce que les voies que tu ma proposé s'appliquent elles aussi?

C'est la problématique de l'intégration HTML/CSS avec les CMS: quel est le degré de contrôle que l'on a sur le code généré par l'outil?

En général, on peut modifier un gabarit (template) global, ou plusieurs templates correspondant à plusieurs pages ou bouts de page. Il y aura toujours des contenus internes générés par le CMS, mais pour la structure on devrait être assez libre, même si plonger dans le fonctionnement des templates du CMS machin ou bidule peut demander un investissement en temps...

Donc en théorie ça ne change pas grand chose à ce que j'ai dit, mais ça veut dire que certaines choses ne seront pas forcément évidentes à corriger, voire pas du tout possibles.

J'avoue que je ne connais pas le fonctionnement de Joomla, par contre.

ok merci beaucoup, j'ai réussi à me débrouiller avec des manières pas très catholiques . Je tâcherais de faire ça plus des les règles de l'art à l'avenir, si ce foutu CMS me le permet, promis.

merci ^^