css print sur même page [Résolu]

[zekabyle]

j'ai une page html et j'utilise un css pour le print et le screen.

Je voudrais afficher le contenu du <div id="rootline"> quand la page se lance le contenu de <div id="rootline2"> s'affiche par exemple avec tout le contenu qui sera précisé dans le css print sur la même page.


voilà un extrait de mon html

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen,print" />
.
.
.
.
 
<div id="rootline">
				<div class="bottomrootline">
					<a href="#" class="linkroot">Accueil</a>&gt;
					<em>Recherche</em>
					<ul>
						<li><a href="#" class="print" title="Imprimer la page">Imprimer la page</a></li>
						<li><a href="#" class="sendto" title="Envoyer la page à un ami">Envoyer la page à un ami</a></li>
					</ul>
				</div>
			</div>
			<!--BOUTON IMPRESSION :
			à afficher via la css 'print' uniquement en mettant display:block;
			dans la css 'style' il doit être en display:none; par défaut-->
			<div id="rootline2">
				<div class="bottomrootline">
					<a href="#" onclick="javascript:window.print()" class="print" title="Imprimer la page">Imprimer la page</a>
				</div>
			</div>

voilà le css

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
/* CSS Document */
 
/*************************************************************************/
/******************************** GENERAL ******************************/
/************************************************************************/
body,div,p,span,a {font-family:Verdana, Arial, "Times New Roman", Times, serif;font-size:11px;}
img {border:0;}
form {padding:0;margin:0;}
fieldset {border:0;margin:0;padding:0;}
.clearing {clear:both;}
 
/*************************************************************************/
/********************************** HEADER ********************************/
/*************************************************************************/
#global-header #header a.logo {display:block;padding:20px 0 0 3px;width:136px;height:61px;}
#global-header #header ul {position:absolute;left:170px;top:24px;list-style:none;margin:0;padding:0;}
#global-header #header ul li {margin-right:15px;display:inline;}
#global-header #header form {position:absolute;right:0;top:37px;width:152px;}
#global-header #header form input {font-size:10px;background:url(../img/bkg_search.gif) no-repeat top right;width:122px;height:15px;border:1px solid #AEAEAE;padding:2px 0 0 10px;float:left;}
#global-header #header form a {display:block;background:url(../img/btn_search.png) no-repeat 0 0;width:15px;height:15px;text-indent:-3000px;float:right;margin-top:2px;}
#global-header #header a.entree-offres {display:block;position:absolute;right:0;bottom:0;}
/*#global-header #header div {width:100%;position:absolute;text-align:center;margin-left:auto;margin-right:auto;top:75px;height:33px;letter-spacing:-1px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;text-transform:uppercase;font-size:32px;font-family:"Trebuchet MS", Verdana, Arial, "Times New Roman";}*/
 
 
/*************************************************************************/
/******************************** CONTENT *********************************/
/*************************************************************************/
 
/********************************** BLOC **********************************/
.bloc {background:url(../img/top_bkg_bloc.gif) no-repeat top left;width:164px;padding-top:14px;margin:0 0 20px 5px;}
.bloc .blocelastic div,.bloc .blocelastic2 div,.bloc .bloc-offre-emploi div {padding:0 0 0 10px;}
.bloc .internationalspe {padding:0 0 0 10px;background:url(../img/bkg_bloc.gif) repeat-y top left;}
.bloc .blocelastic {background:url(../img/bottom_bkg_submain.gif) no-repeat bottom left;padding-bottom:30px;}
.bloc .blocelastic2,.bloc .bloc-offre-emploi {background:url(../img/bottom_bkg_bloc.gif) no-repeat bottom left;padding:0 0 30px 1px;}
.bloc .blocelastic ul,.bloc .blocelastic2 ul,.bloc .bloc-offre-emploi ul {list-style:none;margin:0;padding:0;}
.bloc .blocelastic ul li {border-top:1px solid #BCBCBC;margin:0 5px 0 0;}
.bloc .blocelastic ul li a {display:block;text-decoration:none;padding:7px 7px 7px 10px;line-height:11px;}
.bloc .blocelastic ul li ul {margin:0 0 10px 0;padding:0;}
.bloc .blocelastic ul li ul li {border:0;}
.bloc .blocelastic ul li ul li a {display:block;padding:0 7px 0 20px;line-height:18px;font-size:12px;}
.bloc .blocelastic2 ul li a {display:block;padding:10px 10px 0 10px;margin:0;font-weight:bold;line-height:14px;text-decoration:none;}
.bloc .blocelastic2 ul li a span {display:block;border-left-width:2px;border-left-style:solid;padding-left:5px;line-height:14px;margin-top:3px;}
.bloc form {padding:5px 0 10px 10px;}
.bloc form input {font-size:10px;background:url(../img/bkg_result_search.gif) no-repeat top right;width:108px;height:15px;border:1px solid #AEAEAE;padding:2px 0 0 10px;float:left;}
.bloc form a {display:block;background:url(../img/btn_search.png) no-repeat 0 0;width:15px;height:15px;text-indent:-3000px;float:left;margin:2px 0 0 4px;}
.bloc strong {display:block;margin:0 0 15px 10px;}
.bloc .bloc-offre-emploi ul li {line-height:16px;margin-left:10px;}
.bloc .bloc-offre-emploi ul li a {display:block;background:url(../img/puce_emploi.gif) no-repeat 0 7px;text-decoration:none;padding-left:7px;}
 
.blocmore {background:url(../img/top_bkg_blocmore.gif) no-repeat top left;width:164px;padding-top:14px;margin:0 0 20px 5px;}
.blocmore .blocelastic {background:url(../img/bottom_bkg_blocmore.gif) no-repeat bottom left;padding-bottom:20px;}
.blocmorefreight {background:url(../img/top_bkg_blocmore_freight.gif) no-repeat top left;width:164px;padding-top:14px;margin:0 0 20px 5px;}
.blocmorefreight .blocelastic {background:url(../img/bottom_bkg_blocmore_freight.gif) no-repeat bottom left;padding-bottom:20px;}
.blocmoreroute {background:url(../img/top_bkg_blocmore_route.gif) no-repeat top left;width:164px;padding-top:14px;margin:0 0 20px 5px;}
.blocmoreroute .blocelastic {background:url(../img/bottom_bkg_blocmore_route.gif) no-repeat bottom left;padding-bottom:20px;}
.blocmoremess {background:url(../img/top_bkg_blocmore_mess.gif) no-repeat top left;width:164px;padding-top:14px;margin:0 0 20px 5px;}
.blocmoremess .blocelastic {background:url(../img/bottom_bkg_blocmore_mess.gif) no-repeat bottom left;padding-bottom:20px;}
.blocmorelog {background:url(../img/top_bkg_blocmore_log.gif) no-repeat top left;width:164px;padding-top:14px;margin:0 0 20px 5px;}
.blocmorelog .blocelastic {background:url(../img/bottom_bkg_blocmore_log.gif) no-repeat bottom left;padding-bottom:20px;}
.blocmore .blocelastic div,.blocmorefreight .blocelastic div,.blocmoreroute .blocelastic div,.blocmoremess .blocelastic div,.blocmorelog .blocelastic div {padding:0 0 0 10px;}
.blocmore .blocelastic span,.blocmorefreight .blocelastic span,.blocmoreroute .blocelastic span,.blocmoremess .blocelastic span,.blocmorelog .blocelastic span {padding:0 0 0 10px;}
.blocmore .blocelastic span a,.blocmorefreight .blocelastic span a,.blocmoreroute .blocelastic span a,.blocmoremess .blocelastic span a,.blocmorelog .blocelastic span a	{font-weight:bold;text-decoration:none;}
.blocmore .blocelastic ul,.blocmorefreight .blocelastic ul,.blocmoreroute .blocelastic ul,.blocmoremess .blocelastic ul,.blocmorelog .blocelastic ul {list-style:none;margin:0 10px 5px 10px;padding:0;}
.blocmore .blocelastic ul li,.blocmorefreight .blocelastic ul li,.blocmoreroute .blocelastic ul li,.blocmoremess .blocelastic ul li,.blocmorelog .blocelastic ul li {line-height:16px;}
.blocmore .blocelastic ul li a,.blocmorefreight .blocelastic ul li a,.blocmoreroute .blocelastic ul li a,.blocmoremess .blocelastic ul li a,.blocmorelog .blocelastic ul li a {display:block;background:url(../img/puce.gif) no-repeat 0 7px;text-decoration:none;padding-left:7px;}
.blocmore .blocelastic ul li a:hover,.blocmore .blocelastic span a:hover,.blocmorefreight .blocelastic ul li a:hover,.blocmorefreight .blocelastic span a:hover,.blocmoreroute .blocelastic ul li a:hover,.blocmoreroute .blocelastic span a:hover,.blocmoremess .blocelastic ul li a:hover,.blocmoremess .blocelastic span a:hover,.blocmorelog .blocelastic ul li a:hover,.blocmorelog .blocelastic span a:hover {text-decoration:underline;}
 
/********************************* SCROLLING ********************************/
.scrollgeneric {position:absolute;top:0;left:0;}
.vscrollerbase {width:9px;background-color:#FFF;background:url(../img/bkg_scroll.gif) no-repeat top left;}
.vscrollerbar {width:5px;background-color:#D1DEF3;cursor:hand;cursor:pointer;margin:2px 2px 0 2px;}
 
/********************************* ROOTLINE ********************************/
#rootline,#rootline2 {background:url(../img/top_rootline.gif) no-repeat top left;width:538px;padding-top:3px;}
#rootline .bottomrootline {position:relative;background:url(../img/bottom_rootline.gif) no-repeat bottom left;padding:0 60px 12px 6px;}
#rootline2 .bottomrootline {position:relative;background:url(../img/bottom_rootline.gif) no-repeat bottom left;padding:0 0 8px 0;}
#rootline_sitemap,#rootline2_sitemap {background:url(../img/top_rootline_sitemap.gif) no-repeat top left;width:755px;padding-top:3px;}
#rootline_sitemap .bottomrootline {position:relative;background:url(../img/bottom_rootline_sitemap.gif) no-repeat bottom left;padding:0 60px 12px 6px;}
#rootline2_sitemap .bottomrootline {position:relative;background:url(../img/bottom_rootline_sitemap.gif) no-repeat bottom left;padding:0 60px 8px 6px;}
#rootline .bottomrootline .linkroot,#rootline_sitemap .bottomrootline .linkroot {margin:0 5px 0 0;font-size:10px;}
#rootline .bottomrootline em,#rootline_sitemap .bottomrootline em {font-size:10px;font-style:normal;font-weight:bold;}
#rootline .bottomrootline ul,#rootline_sitemap .bottomrootline ul {list-style:none;position:absolute;right:0;top:0;margin:1px 12px 0 0;padding:0;}
#rootline .bottomrootline ul li,#rootline_sitemap .bottomrootline ul li {float:left;}
#rootline .bottomrootline ul li a,#rootline_sitemap .bottomrootline ul li a {display:block;width:14px;height:12px;margin-left:6px;text-indent:-3000px;}
#rootline .bottomrootline ul li a.print,#rootline_sitemap .bottomrootline ul li a.print {background:url(../img/print.gif) no-repeat top left;}
#rootline .bottomrootline ul li a.sendto,#rootline_sitemap .bottomrootline ul li a.sendto {background:url(../img/sendto.gif) no-repeat top left;}
#rootline2 .bottomrootline a.print {display:block;background:url(../img/print.gif) no-repeat 0 0;width:14px;height:12px;text-indent:-3000px;margin-left:260px;}
#rootline2_sitemap .bottomrootline a.print {display:block;background:url(../img/print.gif) no-repeat 0 0;width:14px;height:12px;text-indent:-3000px;margin-left:370px;}
 
/******************************** PAGINATION *******************************/
ul#pagination {list-style:none;margin:0;padding:0;float:right;}
ul#pagination li {float:left;}
ul#pagination li a {text-decoration:none;margin:0 2px;}
ul#pagination li em {font-style:normal;font-weight:bold;margin:0 3px;}
ul#pagination li a.firstpage {display:block;background:url(../img/pagination.gif) no-repeat 0 -3px;width:4px;height:4px;text-indent:-3000px;padding:10px 3px;}
ul#pagination li a.previewpage {display:block;background:url(../img/pagination.gif) no-repeat -10px -3px;width:2px;height:4px;text-indent:-3000px;padding:10px 3px;}
ul#pagination li a.nextpage {display:block;background:url(../img/pagination.gif) no-repeat -18px -3px;width:2px;height:4px;text-indent:-3000px;padding:10px 3px;}
ul#pagination li a.lastpage {display:block;background:url(../img/pagination.gif) no-repeat -26px -3px;width:4px;height:4px;text-indent:-3000px;padding:10px 3px;}
 
/********************************** CORPS *********************************/
h1 {text-transform:uppercase;line-height:30px;padding-bottom:5px;border-bottom-width:6px;border-bottom-style:solid;margin:10px 0 18px 0;font-size:33px;font-weight:normal;font-family:"Trebuchet MS", Helvetica, Verdana, Arial, "Times New Roman";}
h2 {margin:0;padding:0;font-size:11px;}
 
.intro {font-weight:bold;line-height:18px;margin:0 0 22px 0;}
hr {height:1px;margin:0;padding:0;color:#BCBCBC;background-color:#BCBCBC;border:0;clear:both;}
a.back {display:block;float:right;text-decoration:none;background:url(../img/back.gif) no-repeat 0 4px;padding-left:10px;margin-bottom:10px;}
a.back:hover {text-decoration:underline;}
a.suite {text-decoration:none;font-weight:bold;}
a.suite:hover {text-decoration:underline;}
 
.blocoffre {background:url(../img/top_bloc_offre.gif) no-repeat top left;width:538px;padding-top:10px;margin-left:10px;}
.blocoffre .bottomblocoffre {position:relative;background:url(../img/bottom_bloc_offre.gif) no-repeat bottom left;padding:0 10px 45px 10px;}
.blocoffre .bottomblocoffre img {position:absolute;}
.blocoffre .bottomblocoffre div {padding:0 15px 0 100px;line-height:16px;}
.blocoffre h2,.blocarticle h2 {margin:0 0 3px 0;}
.blocoffre h2 a,.blocarticle h2 a {text-decoration:none;}
.blocoffre h2 a:hover,.blocarticle h2 a:hover {text-decoration:underline;}
 
.blocarticle {padding:20px 0 30px 0;line-height:20px;}
.blocarticle img {float:left;padding:0 10px 30px 0;}
.blocarticle span {border-left-width:2px;border-left-style:solid;padding-left:5px;margin:3px 0 0 5px;}
 
ul#photos {list-style:none;margin:0;padding:0;clear:both;}
ul#photos li {float:left;margin-bottom:20px;}
ul#photos li a {text-decoration:none;}
ul#photos li em {display:block;font-style:normal;font-weight:bold;margin-bottom:5px;}
ul#photos li span {display:block;cursor:hand;font-weight:bold;background:url(../img/bkg_select_photos.gif) no-repeat top left;width:159px;height:25px;padding:3px 0 0 8px;margin-top:4px;}
ul#detailphoto {list-style:none;margin:10px 0 20px 0;padding:0;}
ul#detailphoto li {margin-bottom:8px;}
ul#detailphoto span {border-left-width:2px;border-left-style:solid;padding-left:5px;margin:3px 0 0 5px;}
ul#btn_detailphoto {list-style:none;margin:0;padding:0;}
ul#btn_detailphoto h2 {margin-bottom:10px;}
ul#btn_detailphoto a {text-decoration:none;font-weight:bold;}
ul#btn_detailphoto a:hover {text-decoration:underline;}
ul#btn_detailphoto .print_detailphoto {background:url(../img/print.gif) no-repeat top left;}
ul#btn_detailphoto .load_detailphoto {background:url(../img/load.gif) no-repeat top left;}
ul#btn_detailphoto div div a {padding:0 0 0 18px;}
ul#btn_detailphoto div {background:url(../img/top_select_photos.gif) no-repeat top left;width:171px;padding:6px 0 0 0;}
ul#btn_detailphoto div div {background:url(../img/bottom_select_photos.gif) no-repeat bottom left;padding:0 0 14px 6px;}
ul#btn_detailphoto div div ul {display:block;list-style:none;margin:0;padding:0;}
ul#btn_detailphoto div div ul li {margin:0;padding:0;line-height:18px;}
 
a.postulez {display:block;margin:-10px 0 10px 0;}
 
.rang {clear:both;margin:0;padding:0 0 1px 0;}
.rang .ordre1,.rang .ordre2 {float:left;width:260px;}
.rang .ordre1 .profil,.rang .ordre2 .profil,.rang .ordre1 .img-profil,.rang .ordre2 .img-profil {padding-bottom:20px;}
.rang .ordre1 .profil {float:left;width:176px;}
.rang .ordre1 .img-profil {float:right;width:84px;}
.rang .ordre2 .profil {float:right;width:176px;}
.rang .ordre1 .img-profil {float:left;width:84px;}
.rang .ordre1 ul,.rang .ordre2 ul {list-style:none;margin:0;padding:0;}
.rang .ordre1 ul li,.rang .ordre2 ul li {line-height:16px;}
.rang .ordre1 a,.rang .ordre2 a {background:url(../img/load2.gif) no-repeat 0 0;padding-left:20px;}
.rang .ordre1 {margin-right:18px;text-align:right;}
 
.sitemap {float:left;width:175px;margin-right:10px;}
.sitemap span {text-transform:uppercase;font-weight:bold;}
.sitemap ul {list-style:none;margin:3px 0 25px 0;padding:0;}
.sitemap ul li {margin:0;padding:0;}
.sitemap ul li a {display:block;text-decoration:none;background:url(../img/puce_sitemap.gif) no-repeat 0 7px;padding-left:8px;line-height:18px;}
.sitemap ul li a:hover {text-decoration:underline;}
 
#bkg-implantations {width:538px;height:312px;background:url(../img/bkg_liste_implantations.gif) no-repeat top left;}
#bkg-implantations .cible {text-transform:uppercase;font-weight:bold;text-align:center;padding:20px 10px 10px 10px;font-size:14px;}
#bkg-implantations a.backmap {text-align:center;font-size:10px;text-decoration:none;display:block;margin-top:17px;}
#mycustomscroll {width:520px;height:225px;overflow:auto;position:relative;}
#bkg-implantations ul {list-style:none;width:230px;margin:0;}
#bkg-implantations ul.contactmap {padding:0 0 15px 25px;position:absolute;}
#bkg-implantations ul.contactmap2 {padding:0 0 15px 255px;position:relative;top:0;left:0;}
#bkg-implantations ul.contactmap li,#bkg-implantations ul.contactmap2 li {line-height:16px;}
 
.implantations a {display:block;width:37px;background:url(../img/btn_go.gif) no-repeat top left;text-decoration:none;font-weight:bold;text-transform:uppercase;padding:6px 0 9px 13px;}
 
/*************************************************************************/
/********************************* FOOTER *********************************/
/*************************************************************************/
#global-footer #footer ul {list-style:none;margin:120px 0 0 0;padding:0;float:left;}
#global-footer #footer ul li {display:inline;margin:0 3px 0 0;}
#global-footer #footer ul li a,#global-footer #footer p a.lang {text-decoration:none;font-size:10px;}
#global-footer #footer p a.lang {padding-left:2px;}
#global-footer #footer ul li a {background:url(../img/border_footer.gif) no-repeat 100% 3px;padding-right:7px;}
#global-footer #footer p {padding:120px 0 0 0;margin:0;}
#global-footer #footer a.lienext {position:absolute;bottom:0;right:0;text-decoration:none;}
#global-footer #footer a.lienext img {margin-left:5px;}

Que faudrait-il faire avec du javascript pour que ça reconnaisse quel css la page tiendra compte?

[Katachana]

J'ai pas bien compris , quand veux tu afficher la div <div id="rootline2">
?

[_jey_]

Tu peux tester via Javascript si la page est de type "screen" ou "print" et ajouter l'appel au fichier css adapté en récupérant l'élément "head" et utilisant la fonction appendChild().

[zekabyle]

Merci pour la réponse

Je vais essayer comme ça pour voir


@Katachana:
je me suis mal expliqué à tous les coups

Ce que je veux dire, c'est que je voudrais afficher des éléments en fonction du css screen et en fonction du css print et que dans le cas du css screen, je voudrais afficher la partie définie dans le css screen notamment l'image d'imprimer qui me permettra quand je clique dessus d'afficher la même page mais en tenant compte du css print et donc d'afficher la seconde image de l'impression à la place de la première

[zekabyle]

comment on peut récupérer les éléments du head?

est-il possible d'ajouter dans le head avec le javascript des éléments comme le link pour le print css et par exemple d'enlever le link du css screen?


PS: désolé pour le double post

[_jey_]

Tu peux accéder aux éléments du head grâce à DOM...
Mais au lieu de créer un link et d'en supprimer un autre, tu ferais mieux de juste modifier ses attributs.