28172 sujets

CSS et mise en forme, CSS3

Imprimer les images en background

Bonjour,

Je sais que c'est un sujet abordé x fois et qu'on ne peut pas imprimer les images mises en background, mais c'est pourtant ce dont j'aurai besoin !
De plus, je viens de tomber sur cet article http://web-graphics.com/mtarchive/001703.php. J'ai testé et cela fonctionne, sauf pour ma problématique.... Smiley bawling

Voici mon problème, j'ai créé un calendrier annuel en html pour des réservations de chambres d'hôtel. Celui-ci comporte des couleurs de fond différentes selon des statuts (indisponible, haute saison, moyenne saison...), sachant que les samedi, j'ai 2 couleurs, d'où l'utilisation d'images :
<table border="0" class="calendrier"><tbody>
<tr><td>Janv.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>F&eacute;v.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Mars</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Avril</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Mai</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Juin</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Juill.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Ao&ucirc;t</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Sep.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Oct.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>Nov.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
<tr><td>D&eacute;c.</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr></tbody></table>


Pour que le webmaster, puisse modifier ces couleurs, j'ai créé des styles CSS pour son éditeur texte (TinyMce), exemple : .hautesaison { background: url(monimage.gif); }

Tout fonctionne bien, sauf que je viens de me rendre compte que lorsque l'on veut imprimer la page... il y a rien !!!! Et c'est normal...

J'ai donc voulu adapter la solution de cet article cité plus haut, mais je n'y arrive pas, les images sont générés les unes à la suite des autres verticalement dans les cellules, lorsque j'ajoute un style par Tiny Mce.

Est-ce qu'une âme charitable, pourrais m'aider ? Ou je suis ouverte à toute autre solution ?
Si j'ai bien compris il pourrait peut-être exister quelque chose en CS3 ? Si oui laquelle et peut-elle être interprétée par les navigateurs actuels ?

Merci d'avance
Bonjour,

Le plus simple, et le plus logique si les images apportent une information, c'est de mettre les image dans le HTML et non dans le CSS.
Bonjour,
Merci à vous 2

Pfoofen : les images en background ne s'imprime pas même avec une feuille de styles en media print. C'est malheureusement le fonctionnement normal...

Laurie-Anne : Bien sûr, c'est ce que je fais habituellement. Mais là l'inconvénient c'est la mise à jour de ces images. Cela voudrait dire, mettre une image dans chaque case quotidienne du calendrier = 365, à faire une fois par an, puis à mettre à jour régulièrement... Ce n'est pas envisageable.

Je ne pense pas qu'il y ait un moyen non plus de spécifier que si telle image est en background, je mets le contenu textuel "xyz" ?
Je m'arrache les cheveux...
Tu peux forcer sur certains navigateurs l'impression avec :
display:list-item;
list-style-position:inside;
list-style-image:url(../img/bg/print.jpg);
Mais ça me semble quand même une mauvaise pratique tout ça.

-----

Oups : lu de travers. Tu connais déjà l'astuce.
En effet, si tu changes le display sur des cellules de tableau, ça tombe à l'eau.
Modifié par Vincent Valentin (05 Oct 2009 - 13:06)
Bonjour Vincent Valentin,

C'est bien ce que j'essaie de faire (cf. l'article plus haut).
Avez-vous pu l'essayer avec un éditeur texte comme TinyMce, en appliquant ce style à plusieurs cellules d'un tableau ? Car c'est là que cela ne fonctionne pas...
Sinon, il faut que tu passes par une page d'impression spécifique que tu traiteras avec un langage de programmation côté serveur (PHP, ASP...) ou client (JS) pour qu'elle soit facilement imprimable (si tu utilise des classes/id pour les cases spécifiques c'est possible).
A Laurie-Anne,

Merci, oui j'utilise des classes, par exemple :
.basse_saison {ma définition CSS avec mon image d'arriereplan basse_saison}
.moyenne_saison {ma définition CSS avec mon image d'arriereplan moyenne_saison}
que le webmsaster applique depuis l'éditeur TinyMCE.

Mais après, je ne vois pas comment les traiter pour les rendre imprimable ? Si tu as une idée en Php (pas asp) ?
Je ne savais pas que php pouvait faire cela...
J'ai recherché sur le web mais je n'arrive pas à trouver la fonction correspondante et comme je début en php je ne sais pas de quelle fonction il s'agit. Je tombe sur les classes Php...
Tu aurais une piste pour moi ?
Merci
Je ne pense pas qu'il y ait une fonction PHP définie pour faire ça

Par contre JS peut le faire plus simplement.
Bonjour,
Oui, de toute façon, la page étant déjà chargée, le php ne peut plus être utile, il n'y a que JS qui peut peut-être faire quelque chose?
Mais je n'arrive pas à trouver, vu que je n'ai pas d' "id", la fonction qui permet d'atteindre la class d'un élément, puis si c'est la class "x", écrire <img monimagex />
Bonjour,
Laurie-Anne, je reviens vers toi, aurais-tu une piste pour m'aider ?
J'ai trouvé -> getelementsbyclass, est-ce cela ? mais je n'arrive pas à faire le script...

Merci d'avance, si tu peux m'aider...
Sujet clos
Aller à