CSS imbrication sur la balise BODY

**bouliz** · 17/02/2008, 12h52

Bonjour,

Je suis développeur J2EE mais j'ai un soucis CSS dont je ne vois pas la solution après avoir cherché un petit bout de temps donc je fais appel à vos connaissances !!

J'utilise tinyMCE, c'est une éditeur WYSIWYG qui permet de mettre en forme un texte via javascript à la manière de celui utilisé sur ce forum pour créer des messages.

Ce logiciel créé un flux html de ce type qui j'inclue ensuite directement dans une page jsp :

Code :

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

1
2
3
4
5
6
7
8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"><head>
<title>Paragraphe</title><meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /><LINK rel="stylesheet"
type="text/css" href="content.css" /></head><body style="font-family:
Arial;font-size: 9pt;" text="black">Ceci est un
exemple</body></html>

La feuille de style content.css associé à l'éditeur présente ces éléments :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body,td, pre {
	background-color: #FFFFFF;
	font-family: Arial;
	font-size: 	9pt;
	text-align: justify;
}
/* Fix for MS Office style paragraphs (MsoNormal) */
p {
	margin: 0;
	padding: 0;
}
 
/* Fix for MS Office UL lists */
ul,blockquote,ol {
	margin-top: 0;
	margin-bottom: 0;
}

Cette feuille me pose problème car elle applique ces styles à toute ma page et pas uniquement au texte généré.

Afin de résoudre le problème, j'avais donc pensé à créer une nouvelle feuille de style et englober le flux de réponse dans une balise div :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="mma"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"><head>
<title>Paragraphe</title><meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /><LINK rel="stylesheet"
type="text/css" href="content.css" /></head><body style="font-family:
Arial;font-size: 9pt;" text="black">Ceci est un
exemple</body></html></div>

content.css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.mma p
{
	margin: 0;
	padding: 0;
}
 
.mma ul,blocquote,ol {
{
	margin-top: 0;
	margin-bottom: 0;
}
 
.mma td,pre,body
{
	background-color: #FFFFFF;
	font-family: Arial;
	font-size: 	9pt;
	text-align: justify;
 
}

De cette manière, les styles sont appliqués uniquement dans la balise DIV et non à toute la page. MAIS .mma body ne fonctionne pas !! Ai je un moyen d'avoir accès au style du body sachant qu'il est préférable que je ne modifie pas le flux de reponse ??

**Erwan31** · 17/02/2008, 13h59

Code :

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

1
2
3
4
5
6
7
8
9
<div id="mma"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"><head>
<title>Paragraphe</title><meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /><LINK rel="stylesheet"
type="text/css" href="content.css" /></head><body style="font-family:
Arial;font-size: 9pt;" text="black">Ceci est un
exemple</body></html></div>

As tu bien regardé ton code?
balise de fermuture div aprés balise html et balise div ouvrante absente!

Tu dois englober ce qui est généré via le wysiwyg dans un div id quelquechose
et appliquer les style uniquement aux éléments descendant.
Exemple:

Code :

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

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

CSS
(j'ai changé le code et ajouté des commentaires à lire)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#wisy, #wisy td,  #wisy pre {
	background: #FFF; /*propriété raccourci*/
	font: 0.75em Arial, sans-serif; /*propriété raccourci - éviter les pt qui ne sont pas adaptés à l'affichage écran 
puis éviter les unité absolue non redimensionnables sous IE (9pt vaut 0.75em ou .75em - ne pas oublier la police générique en fin de liste)*/
	text-align: justify;
}
#wisy p {
	margin: 0;
	padding: 0;
}
 
#wisy ul, #wisy blockquote, #wisy ol {
	margin-top: 0;
	margin-bottom: 0;
}

Est ce que ça répond à ta question?

CSS imbrication sur la balise BODY

CSS

Vue hybride

Discussions similaires

Partager

Partager