Discussion :

[nicerico]

Bonjour,

comment inhériter un div et tout son contenu afin que celui ci ne soit pas impacté par la feuille de style de la page où il se trouve ?

en détail :
j'inclus du code (un div avec un formulaire ...) dans un site wordpress
mon code ne doit pas dépendre d'une feuille de style css
helas c'est le cas et ça casse tout mon div

comment faire pour que mon div ne dependent pas de la feuille css ?

Merci de votre aide

[sk8matt]

Bonjour,

Pour cela il te suffit de créer une classe CSS particulière pour ton div et l'ajouter sur ton site.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div >
a
<div class='son' >
b
</div>
</div>
 
<style>
div {color:blue;}
div.son {color:red;}
</style>

[nicerico]

Helas je ne peux pas agir sur la feuille css
il faudrait que je puisse le faire directement dans mon div (avec table)

c par exemple ça dans la feuille de style qui me pose probleme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
td {
    border-top: 1px solid #EDEDED;
    padding: 6px 10px 6px 0;
}

[sk8matt]

Comme ceci ! Cela ne t'es pas possible ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div >
a
<div style="color:red" >
b
</div>
</div>

[laurentSc]

Oui, et si tu ne souhaites pas faire du CSS in-line, tu peux mettre le style dans la partie head du code (voire - ce n'est pas très propre mais ça marche- dans le body).
Donc ce code-là :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<style>
div {color:blue;}
div.son {color:red;}
</style>

tu le mets dans le head ou le body.

[papajoker]

en fait tu crées un style a toi (monstyle), comme cela il n'y a que ton code html qui est modifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<style>
.monstyle td {
    border-top: 0px solid #f00;
    padding: 0;
}
</style>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<span class="monstyle">
...
<td>xxx</td>
...
</span>

[laurentSc]

Moi, j'écrierais plutôt l'inverse :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<style>
td .monstyle {
    border-top: 0px solid #f00;
    padding: 0;
}
</style>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<table><tr>
<td>
<span class="monstyle">
xxx
</span>
</td>
</tr></table>

et je répète que ce style, pas besoin de le mettre dans une feuille de style séparée (quoique je crois me souvenir que dans wordpress, on a accès à style.css)

[NoSmoking]

Bonjour,

Moi, j'écrierais plutôt l'inverse :

Bien vu Laurent mais c'est surtout parce que ta structure est inverse

Soit dit en passant papajoker une TD dans un SPAN c'est très moyen.

[laurentSc]

Oui, quand, je disais "écrire l'inverse", je pensais notamment à inverser la structure (et effectivement, je ne voulais pas laisser un <td> dans un <span>...)

[papajoker]

Bonjour,Bien vu [COLOR="Green"]Soit dit en passant papajoker une TD dans un SPAN c'est très moyen.

avant mon td il y a ... et après ..., et bien sur il est clair (pour moi) que mon td est dans un tableau

Et je préfère ma solution a celle de laurent en cas de surcharge de 2..3 balises
De plus aucune modification du code html (en dehors de la balise englobante); je cherche toujours a en faire le moins possible

[nicerico]

Merci pour vos réponses

Mais il n'existe pas la formule magique qui dit :
"tu ne toucheras pas à ce div et à tous ce qu'il contient"

afin que celui ci ne soit pas impacter par la feuille de style de la page
c'est utopique ?

[Torgar]

Mais il n'existe pas la formule magique qui dit :
"tu ne toucheras pas à ce div et à tous ce qu'il contient"

Tu as dit "Abracadabra" avant de lancer ta formule magique ? Parce que sinon ça fonctionne pas en effet

Tu as essayé les solutions proposées avant de demander si une force mystique quelconque pouvait influer sur le CSS d'un site Web ?

[laurentSc]

En fait, je suis en train de penser que si le div en question est inclus dans un élément html de classe toto et que le CSS contient .toto div {...}, la seule solution est dans la classe CSS du div de surcharger tous les attributs qui sont dans .toto div {...}

[nicerico]

le div et tout ce qu'il contient est importé dans plusieurs sites différents via un javascript (il n'est pas accompagné d'une feuille de style, tout le css est dans le div avec style="" sur les éléments)

sur les sites dont la feuille css est bien "faite", il n'y a pas de problème
mais sur les sites dont la feuille css à des trucs comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table {padding:10px}

ça agit sur la table qui se trouve dans mon div importé

comme chaque site a sa propre feuille de style, il me faudrait une solution radicale pour empêcher n'importe quel style d'interagir sur mon div

par exemple une balise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<nostyle><div>...</div></nostyle>

si ça existe pas, il faut l'inventer !

Merci de votre aide

[papajoker]

tu n'importe que le html pas la fiche css externe ?

a l'importation remplacer simplement style= par data-style=
de cette facon 95% des style inline sont supprimés rapidement

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

sinon une méthode (jquery) du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$('tabalise *').removeAttr('class');
$('tabalise *').removeAttr('style')

[nicerico]

oui que du html
tu veux dire que je remplace dans mon div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div style="padding:5px">
<table style="padding:5px"></table>
</div>

par

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div data-style="padding:5px">
<table data-style="padding:5px"></table>
</div>

[papajoker]

oui cela
en php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$html = str_replace(' style=', ' data-style=', $html);

[nicerico]

et dans le cas où ma table n'a pas de style donc pas de style=
comment je peux empêcher la feuille css du site d'agir dessus ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$('tabalise *').removeAttr('style')

pourrait etre envisageable mais ça va me supprimer tous les styles dans mon div importé ?
par ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<td align=center height=33 style="text-align:center">

va perdre style="text-align:center" ?

dans mes tests

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
data-style="font-size:20px"
data-style="text-align:center"

n'a pas l'air de fonctionner

je suis dans l'impasse

et encapsuler mon code html ?
je dis surement une bêtise mais un truc du genre
<frameset>mon html</frameset>

ou bien utiliser un javascript qui desactive temporairement le fichier css ?

[laurentSc]

Je suis surpris car je m'attendais à ce que une telle déclaration (<table style="padding:5px"></table>) écrase la déclaration table {padding:10px} faite dansla feuille de style ; je me trompe ?

[NoSmoking]

je me trompe ?

Non...sauf si tu supprimes l'attribut style de la balise avec le javascript, le CSS reprend c'est droit.