Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2759 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Cacher une classe CSS à l'impression

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Cacher une classe CSS à l'impression

n°1064019
bepimaco
Festina lente
Posté le 28-04-2005 à 11:20:51  profilanswer
 

Avec l'aide d'un tutoriel d'Alsacreation, j'ai fait mes propres "infos bulles" : lors du passage de la souris sur du texte, une petite bulle d'info apparaît et en donne la définition. Le problème, c'est que lorsqu'on imprime la page, la définition s'incruste juste après le mot en question.
 
Un exemple :

Code :
  1. Le<a class="detail" href="vocabulaire.html"> vercors <span>massif montagneux a cote de Grenoble</span></a>est un ancien maquis.


 
A l'impression, ça donne : Le vercors massifmontagneux a cote de Grenobleest un ancien maquis, alors que je ne voudrais que Le vercors est un ancien maquis.
 
J'utilise 2 feuilles CSS : une pour l'écran, une pour l'impression. Sur la première, le classe détail est :
 

Code :
  1. a.detail {
  2. position: relative;
  3. text-decoration: none;
  4. color: black;
  5. border-bottom: 1px gray dotted;
  6. }
  7. a.detail span {
  8. display: none;
  9. }
  10. a.detail:hover {
  11. background: none;
  12. }
  13. a.detail:hover span {
  14. display: inline;
  15. position: absolute;
  16. z-index: 500;
  17. top: 2em;
  18. left: 1em;
  19. background: orange;
  20. text-align: center;
  21. color: white;
  22. padding: 2px;
  23. }


 
Je n'arriva pas à trouver les réglages pour la feuille d'impression. J'ai essayé :
 

Code :
  1. a.detail span, a.detail:hover span
  2. {
  3. display : none;
  4. }


 
mais ça laisse un gros blanc à la place du mot!
 
Merci de votre aide


Message édité par bepimaco le 28-04-2005 à 11:21:53

---------------
Bepimaco
mood
Publicité
Posté le 28-04-2005 à 11:20:51  profilanswer
 

n°1064311
fafane84
Posté le 28-04-2005 à 14:47:28  profilanswer
 

Salut  :hello:  
 
Pourquoi à la place de

Code :
  1. Le<a class="detail" href="vocabulaire.html"> vercors <span>massif montagneux a cote de Grenoble</span></a>est un ancien maquis.

n'utilises-tu pas

Code :
  1. Le<a class="detail" href="vocabulaire.html" title="massif montagneux a cote de Grenoble">vercors</a>est un ancien maquis.

 :??:  
 
Cela fait le même effet le style en moins, mais peut-être qu'avec le CSS il y a moyen, je ne sais pas.
 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
n°1064316
FlorentG
Unité de Masse
Posté le 28-04-2005 à 14:48:40  profilanswer
 

P'tête qu'il voulait un peu de style sur ses infobulles ;) Sinon spanormal, avec display none ça vire. Limite si t'aurais mis visibility: hidden ce serait compréhensible, mais là :??:

n°1064358
fafane84
Posté le 28-04-2005 à 15:16:48  profilanswer
 

FlorentG a écrit :

P'tête qu'il voulait un peu de style sur ses infobulles ;) Sinon spanormal, avec display none ça vire. Limite si t'aurais mis visibility: hidden ce serait compréhensible, mais là :??:


Oui c'est bizarre.
 
D'autant que chez en "Aperçu avant impression" je n'ai pas un gros paté blanc mais le lien qui s'affiche.
 
Doit y avoir un truc, mais lequel ?


---------------
Mon Topic de Vente Hardware
n°1064361
FlorentG
Unité de Masse
Posté le 28-04-2005 à 15:17:25  profilanswer
 

T'as bien mis ton CSS ? Envoi ton <head>

n°1064381
fafane84
Posté le 28-04-2005 à 15:27:09  profilanswer
 

FlorentG a écrit :

T'as bien mis ton CSS ? Envoi ton <head>


Si c'est à moi que tu demande, voilà le code "test" (d'après le code de bepimaco) :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <title></title>
  7.   <style type="text/css" media="screen">
  8.   <!--
  9.     a.detail {
  10.     position: relative;
  11.     text-decoration: none;
  12.     color: black;
  13.     border-bottom: 1px gray dotted;
  14.     }
  15.     a.detail span {
  16.     display:none;
  17.     }
  18.     a.detail:hover {
  19.     background: none; 
  20.     }
  21.     a.detail:hover span {
  22.     /*display: inline;*/
  23.     display:none;
  24.     position: absolute;
  25.     z-index: 500;
  26.     top: 2em;
  27.     left: 1em;
  28.     background: orange;
  29.     text-align: center;
  30.     color: white;
  31.     padding: 2px;
  32.     }
  33.   -->
  34.   </style>
  35.   </head>
  36.   <body>
  37.    Le<a class="detail" href="vocabulaire.html"> vercors<span>massif montagneux a cote de Grenoble</span></a> est un ancien maquis.
  38.   </body>
  39. </html>


---------------
Mon Topic de Vente Hardware
n°1064409
FlorentG
Unité de Masse
Posté le 28-04-2005 à 15:37:26  profilanswer
 

Où est la CSS media="print" ?

n°1064485
bepimaco
Festina lente
Posté le 28-04-2005 à 16:11:49  profilanswer
 

Bonjour et merci, voici le head :
 

Code :
  1. <!--déclaration du format d'encodage de la page (HTML 4.01 strict) et de la langue (français)-->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3. "http://www.w3.org/TR/html4/strict.dtd">
  4. <html lang="fr">
  6. <!--informations générales et importation des différents éléments-->
  7. <head>
  8. <!--titre de la page-->
  9. <title>titretitle>
  10. <!--description de la page permettant l'indexation dans les moteurs de recherche-->
  11. <meta name="keywords" content="x
  12. <meta name="description" content="x">
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  14. <meta http-equiv="Content-Script-Type" content="text/javascript">
  15. <meta http-equiv="Content-Style-Type" content="text/css">
  16. <!--importation des feuilles de style CSS correspondant aux différents affichages-->
  17. <link href="../styles/vence/ecran.css" title="Vence" rel="stylesheet" media="screen" type="text/css">
  18. <link href="../styles/vence/imprimer.css" title="Vence" rel="stylesheet" media="print" type="text/css">
  19. <link rel="alternate stylesheet" type="text/css" href="../styles/quaix/ecran.css" media="screen" title="Quaix">
  20. <link rel="alternate stylesheet" type="text/css" href="../styles/quaix/imprimer.css" media="print" title="Quaix" >
  21. <link rel="alternate stylesheet" type="text/css" href="../styles/moderne/ecran.css" media="screen" title="Moderne">
  22. <link rel="alternate stylesheet" href="../styles/moderne/imprimer.css" media="print" title="Moderne" type="text/css">
  23. <link rel="alternate stylesheet" type="text/css" href="../styles/girieux/ecran.css" media="screen" title="Girieux">
  24. <link rel="alternate stylesheet" href="../styles/girieux/imprimer.css" media="print" title="Girieux" type="text/css">
  25. <link rel="alternate stylesheet" type="text/css" href="../styles/authentique/ecran.css" media="screen" title="Authentique scout">
  26. <link rel="alternate stylesheet" href="../styles/authentique/imprimer.css" media="print" title="Authentique scout" type="text/css">
  27. <!--importation des scripts Javascripts-->
  28. <script type="text/javascript" src="http://www.scouts-stegreve.com/styleswitcher.js"></script>
  29. <script type="text/javascript" src="http://www.scouts-stegreve.com/agrandissement.js"></script>
  30. <script type="text/javascript">
  31. <!--
  32. window.onload=montre;
  33. function montre(id) {
  34. var d = document.getElementById(id);
  35. for (var i = 1; i<=10; i++) {
  36.  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  37. }
  38. if (d) {d.style.display='block';}
  39. }
  41. function cache(id) {
  42. var x = document.getElementById(id);
  43. if (x) {x.style.display='none';}
  44. }
  45. function menu(id) {
  46. document.getElementById('smenu5').style.display='block';
  47. }
  48. //-->
  49. </script>
  50. <style type="text/css">
  51. .ajout1{
  52.  text-align: center;
  53.  font-size: 2.5em;
  54.  font-weight: bold;
  55.  line-height: 100px;
  56. }
  57. </style>
  58. </head>


 
Le contenu de la feuille de style d'impression en ce qui conerne la classe detail :

Code :
  1. a.detail {
  2. position: relative;
  3. text-decoration: none;
  4. color: black;
  5. border-bottom: 1px gray dotted;
  6. }
  7. a.detail:hover {
  8. background: none;
  9. }
  10. a.detail span, a.detail:hover span {
  11. display : none;
  12. }


Message édité par bepimaco le 28-04-2005 à 16:18:23

---------------
Bepimaco
n°1064488
fafane84
Posté le 28-04-2005 à 16:12:08  profilanswer
 

Quel c.... (andouille)  :sarcastic:  
 
Voici le code rectifié :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <title></title>
  7.   <style type="text/css" media="screen">
  8.   <!--
  9.     a.detail {
  10.     position: relative;
  11.     text-decoration: none;
  12.     color: black;
  13.     border-bottom: 1px gray dotted;
  14.     }
  15.     a.detail span {
  16.     display:none;
  17.     }
  18.     a.detail:hover {
  19.     background: none; 
  20.     }
  21.     a.detail:hover span {
  22.     display: inline;
  23.     position: absolute;
  24.     z-index: 500;
  25.     top: 2em;
  26.     left: 1em;
  27.     background: orange;
  28.     text-align: center;
  29.     color: white;
  30.     padding: 2px;
  31.     }
  32.   -->
  33.   </style>
  34.   <style type="text/css" media="print">
  35.   <!--
  36.     a.detail {
  37.     position: relative;
  38.     text-decoration: none;
  39.     color: black;
  40.     border-bottom: 1px gray dotted;
  41.     }
  42.     a.detail span {
  43.     display:none;
  44.     }
  45.     a.detail:hover {
  46.     background: none; 
  47.     }
  48.     a.detail:hover span {
  49.     display:none;
  50.     position: absolute;
  51.     z-index: 500;
  52.     top: 2em;
  53.     left: 1em;
  54.     background: orange;
  55.     text-align: center;
  56.     color: white;
  57.     padding: 2px;
  58.     }
  59.   -->
  60.   </style>
  61.   </head>
  62.   <body>
  63.    Le<a class="detail" href="vocabulaire.html"> vercors<span>massif montagneux a cote de Grenoble</span></a> est un ancien maquis.
  64.   </body>
  65. </html>


Et il fonctionne très bien avec IE 5.5 et Firefox.
 
Donc logiquement reste plus qu'à modifier les liens vers des fichiers .css externes et c'est tout bon.
 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
n°1064519
bepimaco
Festina lente
Posté le 28-04-2005 à 16:24:43  profilanswer
 

J'ai copié ton code dans ma feuille de sytle, mais j'obtient toujours un espace blanc, sou IE 6 et Firefox 1.0.3 !
 
Y'a p'têt un autre élément qui foire dans ma feuille CSS c'est possible ?


---------------
Bepimaco
mood
Publicité
Posté le 28-04-2005 à 16:24:43  profilanswer
 

n°1064524
fafane84
Posté le 28-04-2005 à 16:28:52  profilanswer
 

bepimaco a écrit :

J'ai copié ton code dans ma feuille de sytle, mais j'obtient toujours un espace blanc, sou IE 6 et Firefox 1.0.3 !
 
Y'a p'têt un autre élément qui foire dans ma feuille CSS c'est possible ?


Pour en être sûr, recopies le code, fait une page HTML à part et testes-là


---------------
Mon Topic de Vente Hardware
n°1064536
bepimaco
Festina lente
Posté le 28-04-2005 à 16:34:28  profilanswer
 

Merci de ta suggestion. Je viens de faire un test sur une page à part, et ça marche très bien. Je vais me plonger dasn le code pour voir d'où vient le bug !


---------------
Bepimaco

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Cacher une classe CSS à l'impression

 

Sujets relatifs
Comment cacher un lisbox ?[CSS] Positionnement : Relatif ou absolu ?
Problème installation classe avec JREuns scrollbar dans une fenetre+impression des JTextArea
Une taille fixe en CSS[CSS] Texte qui sort de mon bloc
envoyer un message d'une classe a une autre[CSS] Div non-centré sous Mozilla
IMplementation classe controleurImpression vbs
Plus de sujets relatifs à : Cacher une classe CSS à l'impression

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.111 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR