css print sur même page

[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

 
<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

 
/* 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.