CSS Impression du texte d'une div en overflow:auto

[MV]

Bonjour,

Suite à mes premiers posts sur WRI (très content de l'avoir découvert celui là! :lol: ), je me suis mis au CSS. J'ai jusqu'à présent réussi à faire plus ou moins ce que je voulais mais là je bloque: je veux créer un bouton imprimer qui imprime uniquement une div qui est en fait le contenu principal (le site sans la navigation...). Pour compliquer l'histoire, la div en question est d'une hauteur fixe, donc j'utilise la fonction overflow. Mais lorsque je lance l'impression, j'ai bien uniquement cette div qui s'imprime mais pas tout le texte (ce qui dépasse reste caché :cry: )
Quelqu'un peut m'aider? Merci d'avance.

 

[demax]

Salut,

Quel attribut as tu associé à l'élément overflow? (hidden, scroll, etc...)
Tu peux utiliser une feuiller de style CSS réservée à l'impresion (media="print"), en supprimant ton attribut overflow.

Voici un bon article: http://www.openweb.eu.org/articles/css_impression/

 

[MV]

Tu veux que je copie mon code de ma feuille css?

 

[demax]

Un lien vers la page concernée serait plus simple, je ne suis pas certain d'avoir correctement saisi ton problème :?

 

[MV]

Je suis c.., ça ira surement mieux si ceux qui s'y connaissent voient mon code!!!
Donc le voilà:

/* CSS Document */

/* CSS pour l'impression */

@media print {
body {
color:#000000;
background-color:#FFFFFF;
margin:10px;
padding:5px;
}

#header, #navigation, #arbores, #pub, #pied { display:none; } 
#entourage, #contenant {
     background-color:#FFFFFF;
	 position:relative;
     display:block;
     clip:auto; 
     overflow:auto; 
	 color:black;
	 	 
 }

}

/* CSS pour les balises HTML */
body  {
	width: 770px;
	border: #000000 1px solid;
	margin: auto;
	font-family: verdana, courier, monospace; 
	font-size: 12px;
	color:#000000;	
	letter-spacing: 1px;
	margin-top: 5px;
    margin-bottom: 5px;
	text-align:justify; 
}




/* CSS pour le header */

#header {
height: 60px;
background-image:url(images/fond.gif);
padding:5px;

}

.texte {
font-size: 14px;
font-weight:bold;
text-align:center;
color: #FFFFFF;
margin-top:25px;
}

.banniere {
float: right;
border:0
}

/* CSS pour la navigation sur le site */

#navigation {
height: 15px;
background-color: #000000;
font-size:10px;
font-weight:bold;
text-align:center;
color:#FFFFFF;
margin: 0px;
padding: 0px;
padding-right: 5px;
padding-left: 5px;
border: 0;
}




.blc a{
text-decoration:none;
color:#FFFFFF;
}
.blc a:hover{
text-decoration:none;
color:#FF0000;
}
.bleu {
color: #00CCFF;
}

.bleu a  {
color: #00CCFF;
text-decoration:none;}

.bleu  a:hover {
text-decoration:none;
color: #FF0000;
}
/* CSS pour l'arborescence*/

#arbores {
	border-top: #FFFFFF 1px solid;
	font-family: verdana, courier, monospace;
	font-size:10px;
	color:#FFFFFF;
	background-color:#000000;
	padding-top: 1px;
	padding-bottom: 1px;
		
}

#arbores a, arbores a:hover, arbores a :visited {
text-decoration:none;
font-weight:bold;
color:#FF0000;
}

/* CSS pour le contenu*/

#entourage {
background-image:url(images/fond.gif);
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
height:390px;
border: 0;}

#contenant {
background-color:#FFFFFF;
border: 0;
height:350px;
overflow:auto;
padding:10px;
padding-right: 5px;
}

#contenant a, #contenant a:visited {
color:#000000;
text-decoration:none;
}

#contenant a:hover {
color:#00CCFF;
text-decoration:underline;
}

#pub {
 float:right;
 background-color: #FFFFFF;
 height:280px;
 width:260px;
 text-align:center;
 border: 0}
 
.sansbordure {
border:0;
}
 
h1 {
color:#FF0000;
font-size:14px;
text-decoration:underline;
}
 
/* CSS pour le pied*/
#pied {
background-image:url(images/fond.gif);
color:#FFFFFF;
padding: 5px;
height:30px;
text-align:center;
border-top: 1px solid #FFFFFF;
font-size:10px;
}

#pied a, pied a:visited {
color:#FFFFFF;
text-decoration:none;}

#pied a:hover {
color:#00CCFF;
text-decoration:none;
}

Quand j'imprime, j'ai une bordure ( autour de mon body je crois :roll: ), le texte apparent de ma div #contenant (qui est dans la div #entourage) et la barre de défilement.

 

[MarvinLeRouge]

Salut,

Pas la peine de supprimer l'attribut overflow, il suffit de mettre height : auto; sur une css pour impression.

 

[MV]

Salut,

Pas la peine de supprimer l'attribut overflow, il suffit de mettre height : auto; sur une css pour impression.

Fonctionne pas

@media print {
body {
color:#000000;
background-color:#FFFFFF;
margin:10px;
padding:5px;
}

#header, #navigation, #arbores, #pub, #pied { display:none; } 
#entourage, #contenant {
     background-color:#FFFFFF;
	 position:relative;
     display:block;
    height:auto;
	 color:black;
	 	 
 }

}

 

[MV]

J'ai trouvé ! :lol:

pour ceux que ça intéresse: j'ai fait une feuille externe print.css, j'ai supprimé donc le @media print sur la feuille de style pour l'affichage, et le code qui fonctionne c'est:

/* CSS Document */

/* CSS pour l'impression */


body {
color:#000000;
background-color:#FFFFFF;
margin:10px;
padding:5px;
}

#header, #navigation, #arbores, #pub, #pied {
 display:none; 
} 

#entourage {
     background-color:#FFFFFF;
	 color:black;
	 	 
}

#contenant {
     background-color:#FFFFFF;
	 color:black;
	 overflow:visible;}

avec la page xhtml

<link media="print" href="print.css" type="text/css"  rel="stylesheet"  />

Merci à ceux qui ont essayé de me donner un coup de main!