Ajouter une balise pour ignorer le style de la page...

Bon le titre n'est pas très clair, je suppose mais je vais essayer d'etre plus précis

Tout d'abord bonjour a tous, et je remercie les créateurs de ce site et la communauté qui font de ce site une vrai bible

Je m'explique, sur mon site, on peut exporter certaines informations ( un peu a la maniere de dailymotion mais pas de flash) pour les mettre sur son site. C'est un tableau avec une mise en forme particuliere (certaines div se chevauchent etc...)

Et mon probleme, c'est que quand certains utilisateurs ajoutent ce script :

<script src="http://www.monsite.com/tableau.php" language="JavaScript"></script>

a leur site, c'est que toute la mise en page du tableau qui echoue.
Je pense que ca doit venir de la feuille de style de la page...

J'aimerai savoir s'il existe une balise ou quelque chose qui puisse dire au navigateur d'ignorer les style de la page la ou est placé le script.
J'aimerai au maximum eviter les frames (object / div / iframe) car je rencontre un autre probleme avec celles cis, notamment : la hauteur qui ne varie pas en fonction du contenu.

J'espere avoir été assez clair je mettrai des screens shots si ca n'est pas assez parlant

Merci d'avance
Modifié par Sunny (25 May 2007 - 19:29)

Bonsoir,

Sunny a écrit :
J'espere avoir été assez clair

Pas vraiment.

Sunny a écrit :
sur mon site, on peut exporter certaines informations ( un peu a la maniere de dailymotion mais pas de flash) pour les mettre sur son site.

Si je reformule correctement (et plus clairement) : tu proposes aux utilisateurs d'importer sur leur site des informations venant du tien.

La première information qui serait utile est donc : par quel moyen se fait l'export, et dans quel format ?

Comme tu ne donnes pas ces informations, je vais essayer de les déduire...

<script src="..." language="JavaScript"></script>

Le format importé est donc du code Javascript qui sera interprété comme tel par le navigateur. Il serait mieux interprété encore si l'attribut language (qui n'existe pas en HTML) était remplacé par quelque chose de valide :

<script src="..." type="text/javascript"></script>

Bon. Maintenant, si je regarde le script JS qui est appelé, ça donne ça :

src="http://www.monsite.com/tableau.php"[/quote]
Tu confirmes que le fichier PHP tableau.php génère bien un script JS et rien d'autre (pas de HTML sauf via document.write() ou autre fonction, pas de CSS...), servi comme tel par le serveur, grâce à un en-tête Content avec la valeur "text/javascript" ?

Si ça n'est pas le cas, tu as quelques questions à te poser.

Si c'est le cas, ce script inséré dans la page devrait au final générer du code HTML, en l'occurrence un tableau. Et tu aurais donc un problème de mise en forme de ce tableau, une fois inséré dans les pages des utilisateurs.

Dans ce cas, deux sources de problème :
- le fait que ton tableau soit transmis sans les styles CSS associés ;
- le fait que les styles CSS des pages des utilisateurs s'appliquent au tableau généré.

Pour régler les deux problèmes, il te faut fournir aux utilisateurs un code CSS pour styler ton tableau. Ce code devra être suffisamment large et avec des sélecteurs suffisamment précis pour prendre le pas sur les styles des utilisateurs pour les éléments visés.

Si ton code HTML généré est comme suit :
[code]<table id="supertableau">...</table>

Il faudra au minimum commencer tes sélecteurs CSS comme suit :

table#supertableau {...}
table#supertableau td {...}
table#supertableau td p {...}

etc.

Ensuite, c'est aux utilisateurs d'intégrer les styles du tableau dans leur propre feuille de style.


Voili voilou, fin du jeu de piste. Alors, j'ai bon ?

a leur site, c'est que toute la mise en page du tableau qui echoue.
Je pense que ca doit venir de la feuille de style de la page...

J'aimerai savoir s'il existe une balise ou quelque chose qui puisse dire au navigateur d'ignorer les style de la page la ou est placé le script.
J'aimerai au maximum eviter les frames (object / div / iframe) car je rencontre un autre probleme avec celles cis, notamment : la hauteur qui ne varie pas en fonction du contenu.
je mettrai des screens shots si ca n'est pas assez parlant

Merci d'avance

Merci florent d'avoir répondu et d'avoir pris le temps de mettre tout ca en forme

Bon je vais donc expliquer en image et en code pour que ca soit plus clair !
Donc voici ce que je propose aux membres d'importer sur leur site :
http://www.kirin-tor.com/aide/1small.jpg

Voici un exemple d'integration qui marche :
http://www.kirin-tor.com/aide/2small.jpg

Et voici un exemple ou l'intégration ne marche pas :
http://www.kirin-tor.com/aide/3small.jpg

voici l'adresse du script :

http://www.kirin-tor.com/exemple.php?id=5&instance_id=8

Suite a ta suggestion j'ai essayé definir des id sur mes tableaux et cellules mais ca ne resoud pas mon probleme...
Et en effet le script généré est de l'html !

Je m'excuse d'avance sur ma syntaxe, et mon codage ( j'ai honte )

Sunny a écrit :
Et en effet le script généré est de l'html !

Ne faudrait-il pas le servir en "text/javascript", justement ? Si je suis le lien que tu donnes, j'ai un document servi avec l'en-tête HTTP suivant :

Content-Type: text/html

Or, le code en question est bien du Javascript (fonction document.write() avec plein de HTML dedans, certes...).

Voir du côté de la fonction PHP header().
N'oublie pas de corriger le code HTML qui appelle tes scripts, tant qu'à faire (attribut language non valide).


Pour les styles CSS : tous tes styles sont en inline (directement dans les attributs style des éléments), ils seront donc prioritaires par rapport aux styles de la page. Par contre, les propriétés CSS spécifiées dans la feuille de style de la page mais non spécifiées dans les styles inline de ton tableau seront pris en compte, à moins de les annuler préventivement pour chaque élément.

Par exemple, si un utilisateur intègre ton tableau dans une barre latérale dont le code HTML est le suivant :

<div id="sidebar">...</div>

et qu'il a également un style CSS comme suite :

#sidebar table {margin: 20px 0;}

alors tu auras des marges de 20px en haut et en bas de chaque tableau, sauf si tu as précisé à chaque fois dans tes styles inline : margin: 0.

Je vois mal comment tu pourrais prévoir de compenser tous les styles que pourraient employer les utilisateurs sur leurs pages.


Quoi qu'il en soit, tu as raison de penser qu'au niveau du code c'est assez pittoresque.
À quoi ça doit servir tout ça, à part à s'afficher tel quel ? Est-ce que construire tout un machin tarabiscoté en HTML (à coup de tableaux et de divs occasionnels) et CSS inline (avec propriétés non standard pour IE à la clef, sans se soucier des différences IE6/7 semble-t-il...) vaut vraiment la peine ?

Il me semble qu'il serait beaucoup plus simple de générer une simple image via une utilisation un peu poussée de PHP+gd. Et si on a besoin de caser des liens sur les différentes cases, on pourra utiliser une image map, par exemple.

Encore merci florent

Le fait c'est que le tableau est dynamique, il n'affichera pas le meme contenu pour chaque utilisateur et ce contenu changera regulierement...
c'est pour ca qu'il y a un code un peu lourd... Prise de tete, avec la transparence des pngs... Quant a la compatibilité IE 6 / 7 et FF ca m'a l'air ok chez moi

Sunny a écrit :
Le fait c'est que le tableau est dynamique, il n'affichera pas le meme contenu pour chaque utilisateur et ce contenu changera regulierement...

Script PHP + librairie GD de PHP + mise en cache de l'image générée correspondant à un jeu de paramètres déterminés.

À la rigueur, si tu as une centaine de possibilités d'images, autant générer les 100 images en question (en automatisant au maximum), et faire un script PHP qui va retourner un telle ou telle image (avec le bon Content-type, bien sûr) en fonction des paramètres reçus.

Je sais pas trop faire tout ça, mais je sais que c'est possible. Et surtout, le résultat sera de bien meilleure qualité (moins lourd, plus fiable, plus accessible).