[Résolu] Probleme bizzare avec la propriété display

Bonjour,

j'ai un problème avec javascript ou bien avec css au choix...

expliquation : j'ai une page dans laquelle je masque du contenu en employant : document.getElementById('contenu').style.display = 'none';

ça fonctionne bien, mais j'aimerai que lorsque l'utilisateur imprime le document, tout le contenu s'imprime (juste à l'imression)
pour cela, j'utilise une feuille de style pour l'imrpession (media=print)
dans laquelle je précise :
.contenuOnglet {
display: inline;
}

voici la div en question :
<div id="contenu" class="contenuOnglet">gnagnagna</div>

je suis sûr que ma css fonctionne, je l'ai testé, mais on dirait bien que lorsque le display est gèré par le javascript la feuille de style pour l'impression n'a pas d'effet sur cette propriété....

sauriez vous m'éclairer ?

merci d'avance

Raph331
Modifié par raph331 (16 Feb 2006 - 09:50)

raph331 a écrit :
Bonjour,
pour cela, j'utilise une feuille de style pour l'impression (media=screen)

Bonjour,

Pour une feuille de style d'impression, il faut utiliser media="print", et non "screen".

Tony Monast a écrit :

Pour une feuille de style d'impression, il faut utiliser media="print", et non "screen".

oui désolé j'ai fait un copier/coller trop rapide j'ai bien utilisé la bonne syntaxe dans la déclaration de la CSS :
<link rel="stylesheet" href="./css/print.css" media="print" type="text/css" />
encore désolé...

je suis sûr que la css marche sans le javascript...

Si tu testes sur IE, c'est presque normal.

QuentinC a écrit :
Si tu testes sur IE, c'est presque normal.

sur FireFox aussi j'ai le même problème... je pense qu'il faudrait trouver moyen de se passer du javascript pour arriver à mes fins.. mais je vois pas comment pour le moment

salut,
Et pourquoi sur contenuOnglet et non plutôt sur contenu dans la print.css
Modifié par Alan (16 Feb 2006 - 00:57)

Alan a écrit :
salut,
Et pourquoi sur contenuOnglet et non plutôt sur contenu dans la print.css

Salut,

tu veux dire que je devrais essayer de donner l'id de la div à ma css ? comme cela ?
.contenu {
display: inline;
}

je viens d'essayer, ça ne va toujours pas

Le problème viens sans doute de la gestion de la présséhance des styles. Avec Java script, tu agit sur les style "en ligne" (equivalent a ceux présent dans l'attribut style des balises) et comme ces style sont appliqués prioritairement aux class... tu n'obtiens pas le resultat voulut !

La technique la plus efficasse consiste à utiliser d'autre classes :

Définie une class "nodisplay" pour le media print.

.nodisplay{display:none;}

En suite, au lieu de modifier le style de ta balise, modifie le nom de sa class

document.getElementById('truc').className = 'nodisplay'

Ainsi, la class n'étant définie que pour le media Screen, elle n'entrera pas en conflit avec le media Print

Jep a écrit :
...au lieu de modifier le style de ta balise, modifie le nom de sa class

document.getElementById('truc').className = 'nodisplay'

Ainsi, la class n'étant définie que pour le media Screen, elle n'entrera pas en conflit avec le media Print

ça fonctionne !!! grand merci à toi pour ton aide et ton explication! c'était somme toute logique, seulement je ne savais pas qu'il existait className en JavaScript

encore merci, bonne journée!