Pb affichage fiche détaillé d'articles (CSS/Java)

Bonjour,

J'essaie de créer des fiches détaillés pour nos articles présent sur le site http://www.electrodom.fr
Pour ce faire un programme en javascript génère une liste de page en html qui sont ensuite mise en page via du css et du javascript.

http://www.mediafire.com/download/9y89o ... 20HTML.rar

Ci-dessus le pack comportant la page html en question.
J'imagine que les problèmes d'affichages sur notre site viennent du fait qu'une partie du code est généré en javascript mais je voulais avoir votre avis concernant les modifications à faire sur ces différents codes sources.

l'exemple d'article affichés sur le site qui ne fonctionne pas:

http://www.electrodom.fr/ELECTRODOM/Article/100330.aspx?

Bonne journée et merci

Bonjour,

Sans pousser très loin l'analyse des sources de votre HTML "article" et de ses CSS associées (c'est tout de même super fastidieux...), il y déjà deux règles fondamentales qui ne sont pas respectées dans vos pages.

Le postulat de base est, rappelons-le, que vos pages HTML "article" sont "fusionnées" dans un site.

1/ Attention aux conflits et surchages de CSS.
Exemple dans votre cas : je vois dans votre page HTML : body { margin:0px; width: 850px; }
Il y a déjà une classe BODY dans la feuille de style générale du site.

Conseil : revoir tous vos styles et les encapsuler par un ID global à votre page pour différencier vos classes.

2/ Il y a toujours recalcul des chemins relatifs (on est sur un site dynamique, sur une plate-forme mutualisée).
Donc attention aux chemins de vos éléments (par ex, de vos images).
Exemple dans votre cas : je vois "background-image: url('./background.jpg');".
Ce chemin n'est pas forcément valide. (Tout dépend de la balise qui utilise le chemin).

Conseil : appliquez plutôt des chemins absolus.
Exemple : background-image: url('http://commerce.sage.com/ELECTRODOM/upload/items/fra/background.jpg');".
pour une image qui se trouverait dans le même répertoire que votre page HTML.
(Ou plus proprement... on placerait ces images dans un sous-répertoire "images"...
Et on écrirait : background-image: url('http://commerce.sage.com/ELECTRODOM/upload/items/fra/images/background.jpg');".
Et plus proprement encore, on nommerait par exemple l'image "background_items" pour signifier que c'est l'image de fond de la page article.)

Très généralement, je vous invite à bien "identifier" tous les éléments HTML/CSS/SCRIPTS/Images etc... propres à vos pages HTML.

Et tout ira bien mieux.

Dernière remarque : la largeur exploitable pour la fiche article dans votre site paraît être 785 pixels. (à l'oeil...)
Il n'est pas cohérent de lire dans votre page HTML, par exemple, un "body { margin:0px; width: 850px; }".
Il faut donc redoubler de cohérence et de précision dans vos pages HTML toujours en considérant que...

Le postulat de base restant : vos pages sont "fusionnées" dans un site qui contient déjà une foule de styles, scripts... et qui sont hébergées dans un espace mutualisé. Vous devez avoir une vision "globale" de votre HTML.

Bon travail...