28173 sujets

CSS et mise en forme, CSS3

Impression coupée sur mozilla et ok sur IE

Bonjour

Quand j'imprime le contenu d'une page celui est tronqué à une seule page sur Mozilla et bien complet (2 pages) sur IE.

Voici un exemple :

<body>
<div id="principal_conteneur">
	<div id="principal">
             ici contenu sur plusieurs pages
            </div>
</div>
</body>

avec pour css :

body {
margin: 0;
padding: 0;
font: 12px verdana, arial, sans-serif;
background-color: #EFEFEF;
}
#principal_conteneur {
position:absolute;
top : 40px;
left: 0px;
right: 0px;
width: 100%;
}
#principal {
position:relative;
margin: 7px 7px 7px 7px;
padding-right:7px;
padding-left:7px;
color: #000;
border: 1px solid gray; 
z-index: 2;
text-align:center;
height: 100%;
}
#ligne_informations {
position: absolute;
top : 20px;
left : 0px;
background-color: #AAAAAA;
width: 100%;
z-index: 181;
font: 10px verdana, arial, sans-serif;
color: 000000;
line-height: 18px;
margin-right: 10px;
text-align: right;
}

Avez vous une idée du comportement de mozilla ?

Merci

Thierry
Modifié par DuckLeCanard (14 Nov 2006 - 17:53)
Bonjour,
Mets ton code entre balises [code] stp,
Pour ne pas tronquer il faut que tu aplique à body une taille, ici pour ton code tu n'as pas une taille fixe donc un 100% pour le body pour qu'il prenne toute la place dans le flux Smiley smile
J'ai ajouter dans body 

width: 100%;
height:100%;


Et pareil même avec l'apercu de mozilla 1page/1 et le texte est coupé

Tu as une idée ?

Thierry
J'ai pas trop le temps de voir,

Mais je crois que dans la declaration media screen, mais pour être franc je n'y connais rien donc je crois que quelqu'un de plus competant que moi va te repondre.


UP
Damned Smiley cligne

Une précision avec mozilla : dans l'aperçu avant impression la zone principale sort de la page en dessous comme si le saut de page n'était pas généré.

Dans IE pas de pb.

Thierry
Modifié par DuckLeCanard (15 Nov 2006 - 10:13)
DuckLeCanard a écrit :
Damned Smiley cligne

Une précision avec mozilla : dans l'aperçu avant impression la zone principale sort de la page en dessous comme si le saut de page n'était pas généré.

Dans IE pas de pb.

Thierry

Modifié par DuckLeCanard (15 Nov 2006 - 10:13)
Bonjour,
j'ai le même problème :

a écrit :
Quand j'imprime le contenu d'une page celui est tronqué à une seule page sur Mozilla et bien complet (2 pages) sur IE.


voici me feuille de style :

* { margin:0; padding:0; }

body {
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:11px; margin:0; padding:0; 
	background:#C3D8ED url(../Pictures/bg.jpg) repeat-x top left;
}

#container { width:1000px; height:600px; margin:0 auto; padding:0; }

#header { height:24px; background:#3E78B1 url(../Pictures/bgHeader.jpg) repeat-y top left;
	color:#FFF; font-size:9px; padding:0 6px; }
#header ul { margin:0; }
#header li { float:right; display:inline; list-style-type:none; color:#FFF; line-height:2.2em; 
	padding:0 3px 0 0; margin:0; }
#header a { color:#FFF; text-decoration:none; }
#header a:hover { text-decoration:underline; }

#mainHome {
	height:555px; 
	margin:0 auto; 
	background:#5995CB url(../Pictures/bgMainHome.jpg) no-repeat top left;
}
#main { height:555px; margin:0 auto; background:#5995CB url(../Pictures/bgMain.jpg) repeat-x top left; }

#footer { height:21px; font-size:9px; line-height:2.2em; background:#005998 url(../Pictures/bgFooter.jpg) repeat-y top left; 
	color:#FFF; padding:0 6px; }
#footer p {	float:left; margin:0; padding:0; line-height:2.2em; }
#footer ul { margin:0; }
#footer li { float:right; display:inline; list-style-type:none; color:#FFF; padding:0 6px 0 0; 	margin:0; }
#footer a { margin:0 0 0 6px; color:#FFF; text-decoration:none; } 
#footer a:hover { text-decoration: underline; }

#menuFooter { padding:0 540px 0 0; margin:0; }
#menuFooter li { display:inline; list-style-type:none; color:#004C80; padding:0; margin:0; font-weight:bold; }
#menuFooter li a { margin:0 3px 0 6px; color:#FFF; font-weight:normal; text-decoration:none; }
#menuFooter li a:hover { text-decoration:underline; color:#FFD800; }

/* --- NAV HOME --- */
div#nav {
	position:absolute; 
	top:132px; 
	width: 19em; 
	margin:0 0 0 184px!important; 
	background: transparent; 
	behavior:url(Scripts/csshover.htc);/* WinIE behavior call */
}
div#nav ul {
	margin:0; 
	padding:0; 
	width:19em; 
	background:transparent;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	font-weight:bold; 
	color:#FFF; 
	font-size:13px;
}
div#nav ul li span img {
	margin-right:5px; 
	cursor: pointer;
}
div#nav li {
	position:relative; 
	list-style:none; 
	margin:0;
	border-bottom:0px solid #A9C6E4; 
	padding:11px 0 8px 0px; 
	color:#FFF;
}
div#nav li:hover {
	background:transparent;
}
/*div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}*/

div#nav li.submenu:hover {
	background-color:transparent;
}
div#nav li a {
	display: block; 
	text-decoration: none; 
	width: 18.5em; 
	color:#FFF;
}
div#nav li a {
	display: block; 
	text-decoration: none; 
	width: 18em; 
	padding:0;
	color:#FFF;
}
div#nav>ul a {width: auto;}
div#nav ul ul {
	position: absolute; 
	top: 13px; 
	left: 21.5em;
	display: none; 
	font-size:11px; 
}
div#nav ul ul li {
	list-style:none; 
	margin:0 0 0!important 0; 
	padding:0 0 0 5px; 
	border-left:1px solid #D2E2F1; 
	line-height:1.7em; 
	font-size:11px;
}
div#nav ul ul li a:hover { 
	padding: 0 0 0 10px; 
	background:url(../Pictures/picto_arrow.gif) no-repeat 0 50%; 
	color:#FFF; 
}
div#nav ul.level1 li.submenu:hover ul.level2 {display:block;}
/* -------------------------------------------------------------- */

#frameLeft { position: absolute; top:21px; width:208px; height:540px; margin:0; padding:21px 0 0 17px; }
.rightHome { float:right; margin:0 20px 0 0!important; margin:0 10px 0 0; padding:0; }

#global { position:absolute; top:43px; margin-left: 225px; width:748px; height:513px; padding:5px; }
#global #content { overflow:auto; padding:0 10px; margin:0; height:442px; width:730px; }

#logo { position:relative; margin:-198px 0 10px 8px; padding:0; }

/* boutons bas gauche */
#boutonsHome {display:block; position:absolute; top:435px; width:450px!important; height:140px; margin:0 0 0 35px; padding:0; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#FFD800; }
#boutonsHome h5 {font-size:18px; color:#FFD800; font-weight:normal; padding:0; margin:-10px 0 -12px 0;}
#boutonsHome h5 a {color:#F5D56B; text-decoration:none;}
#boutonsHome h5 a:hover {text-decoration:underline;}
#boutonsHome span img {padding:10px 10px 0 0;}
#boutonsHome p {font-size:10px; color:#FFF; padding:0; margin:0 58px 0 0; text-align:right;}

/* block breves */
#breves {display:block; position:absolute; top:62px; font-size:9px; width:223px!important; height:166px; margin:0; padding:0;}
#breves h6 {background:url(../Pictures/picto_breves.gif) no-repeat 0 50%; font-size:10px; color:#005998; margin:0 0 5px 0; padding:0 0 0 18px; font-weight:bold; line-height:1.4em;}
#breves #contenu {overflow:auto; height:130px; width:225px; }
#breves #contenu h2 {background:url(../Pictures/puce_breves.gif) no-repeat 0 4px; margin:0; padding:0 0 0 7px; font-weight:normal; color:#005998; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.2em; }
#breves #contenu p {margin:0 0 4px 7px; font-size:9px; color:#666;}

/* block fil d'actu */
#fil {position:relative; top:228px; font-size:9px; width:223px!important; height:62px; margin:0; padding:0;}
#fil h6 {background:url(../Pictures/picto_rss.gif) no-repeat 0 50%; font-size:10px; color:#005998; margin:0 0 5px 0; padding:0 0 0 18px; font-weight:bold; line-height:1.4em;}
#fil #contenu2 {overflow:auto; height:120px; width:225px; }
#fil #contenu2 h2 {background:url(../Pictures/puce_breves.gif) no-repeat 0 4px; margin:0; padding:0 0 0 7px; font-weight:normal; color:#005998; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.2em; }
#fil #contenu2 p {margin:0 0 4px 7px; font-size:9px; color:#666;}

/* block download + podcast + rss + newsletter */
#download {position:relative; top:336px!important; top:260px; font-size:9px; width:223px!important; margin-left:-3px!important;margin:0; padding:0; }
#download h6 {background:url(../Pictures/picto_download.gif) no-repeat 0 50%; font-size:10px; color:#FFF; margin:0 0 5px 5px; padding:0 0 0 18px; font-weight:bold; line-height:1.6em;}
#download h6 a {color:#FFF; text-decoration:underline;}
#download h6 a:hover {color:#FFF; text-decoration:none;}

.podcast {background:url(../Pictures/picto_podcast.gif) no-repeat 0 50%; font-size:10px; color:#FFF; margin:0 0 5px 5px; padding:0 0 0 18px; font-weight:bold; line-height:1.8em;}
.podcast a {color:#FFF; text-decoration:underline;}
.podcast a:hover {color:#FFF; text-decoration:none;}
.rss {background:url(../Pictures/picto_rss.gif) no-repeat 0 50%; font-size:10px; color:#FFF; margin:0 0 5px 5px; padding:0 0 0 18px; font-weight:bold; line-height:1.8em;}
.rss a {color:#FFF; text-decoration:underline;}
.rss a:hover {color:#FFF; text-decoration:none;}
.newsletter {background:url(../Pictures/picto_newsletter.gif) no-repeat 0 50%; font-size:10px; color:#FFF; margin:0 0 5px 5px; padding:0 0 0 18px; font-weight:bold; line-height:1.8em;}

/* --- N-1 --- */
#navLeft { margin:0; padding:180px 0 0 0; height:255px; }
#navLeft dl, #navLeft dt, #navLeft dd{ font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
#navLeft ul, #navLeft li { font: 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; }
#navLeft dt { color:#FFF; cursor: pointer; line-height: 0.6em; text-align:left; font-weight: bold;
	padding:8px 0; display: block; margin:0; }
#navLeft dt span { padding:0 5px 0 0; margin:0; }
#navLeft dt a {color:#FFF; text-decoration: none; }
#navLeft dt a:hover {color: #FFF;}
#navLeft dt.current a {color: #FFD800;}
#navLeft ul { list-style-position: outside; padding:0 0 0 30px; margin:0;	}
#navLeft li {	display: block; list-style-type:none; color: #FFF; margin:0; padding-left:5px; 
				text-align:left; font-weight: bold; border-left:1px solid #D2E2F1; }
#navLeft li.current a {	margin: 0; padding:0 0 0 12px; 
						background:url(../Pictures/picto_arrow.gif) no-repeat left 50%;
						color: #FFF; }
#navLeft li a {	text-decoration: none; color: #D2E2F1; }
#navLeft li a:hover {	padding: 0 0 0 12px; background:url(../Pictures/picto_arrow.gif) no-repeat left 50%;
						color: #FFF; }

#downloadLeft {font-size:9px; width:172px; height:70px; margin:12px 0 0 8px; padding:8px 0 0 10px; }
#downloadLeft h6 {background:url(../Pictures/picto_download.gif) no-repeat 0 50%; font-size:10px; color:#FFF; margin:0 0 5px 5px; padding:0 0 0 18px; font-weight:bold; line-height:1.6em;}
#downloadLeft h6 a {color:#FFF; text-decoration:underline;}
#downloadLeft a:hover {color:#FFF; text-decoration:none;}


puis celle pour l'impression :

@page { margin: 2cm; /*size: portrait;*/ size :21.0cm 29.7cm; }

body { background-color:#FFF; background-image:none; color:#000; font-size:9pt; }
#main { background-color:#FFF; background-image:none; }
#global { padding:0; margin:0 !important; height:100% !important; height:auto; }
#global #content { overflow:visible; margin:0; width:640px; width:17.0cm !important; }
#global #content #tablist li, #global #content #tablist2 li  { padding: 0 20px 0 5px; margin:0 0 0 0px; font-size:7pt;}
#global #content p, li {font-size:9pt;}
h1 { font-size:8pt; }
h2 { font-size:15pt; }
h3, h4, h5 { font-size:9pt; }
caption { font-size:7pt; width:95% !important; }

/*a:after { content: " (" attr(href) ") "; }*/

#frameRight { padding:0 0 30px 30px; }
#frameRight #contenu { padding:0; margin:0; }
#frameRight #contenu h4 { font-size:10pt; }
#frameRight #contenu p { font-size:7pt; }

table { width:95%; }
h1, h2, h3, h4, h5, h6 {page-break-after:avoid;}
p {orphans: 2;}

/* Eléments cachés */
#header, #footer, #frameLeft, #enHaut { display:none; }

#frameRight {
	float:right; 
	width:30%; 
	margin:0 -5px 0 15px; 
	padding:0; 
	height:97%; 
	/*height:100%!important;*/
}


Pouvez-vous m'aider ?
Merci d'avance
En fait, j'ai trouvé le problème.

FireFox pour l'impression ne tolère pas la position:absolute;
 donc il faut mettre dans la feuille de style une position:fixed;
par exemple et cela imprime le nombre de page qu'il y a.

Tchô
Je vais vérifier

En tous cas merci pour l'info !!!

Thierry

ctito17 a écrit :
En fait, j'ai trouvé le problème.

FireFox pour l'impression ne tolère pas la position:absolute;
 donc il faut mettre dans la feuille de style une position:fixed;
par exemple et cela imprime le nombre de page qu'il y a.

Tchô
Sujet clos
Aller à