Cacher une classe CSS à l'impression

Cacher une classe CSS à l'impression - HTML/CSS - Programmation

Marsh Posté le 28-04-2005 à 11:20:51    

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
Reply

Marsh Posté le 28-04-2005 à 11:20:51   

Reply

Marsh Posté le 28-04-2005 à 14:47:28    

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
Reply

Marsh Posté le 28-04-2005 à 14:48:40    

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à :??:

Reply

Marsh Posté le 28-04-2005 à 15:16:48    

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
Reply

Marsh Posté le 28-04-2005 à 15:17:25    

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

Reply

Marsh Posté le 28-04-2005 à 15:27:09    

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
Reply

Marsh Posté le 28-04-2005 à 15:37:26    

Où est la CSS media="print" ?

Reply

Marsh Posté le 28-04-2005 à 16:11:49    

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
Reply

Marsh Posté le 28-04-2005 à 16:12:08    

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
Reply

Marsh Posté le 28-04-2005 à 16:24:43    

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
Reply

Marsh Posté le 28-04-2005 à 16:24:43   

Reply

Marsh Posté le 28-04-2005 à 16:28:52    

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
Reply

Marsh Posté le 28-04-2005 à 16:34:28    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed