28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème | css impression

Bonjour,

J’ai quelques problèmes avec mon css impression, le problème vient principalement dans Firefox.

1) Certains mots dépassent la zone d’impression du format d’impression

http://www.pascalandreallaire.com/bug/bug_2.gif

2) Les balises input sont décaler et perdrent leurs mise en page

http://www.pascalandreallaire.com/bug/bug_3.gif

3) Certains mots s’empile lorsqu’on utilise une balise <a>

http://www.pascalandreallaire.com/bug/bug.gif

On dirait que firefox garde la mise en page Web sans s’adapter pour la mise en page Impression. Pour ce qui est des inputs, ils sont en float left comme les label.

Note : Je ne suis pas trop familier avec les css impressions

Voici une page pour exemple : http://www.pascalandreallaire.com/rq5r_v3/html/adhesion.html

CSS screen : Vu qu'il était assez long, j'ai préféré ne pas le mettre

CSS impression




body
{
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	
	
}

img{display:none}

input{margin-left:5px;}
#header,#menuZone,#footer{display:none}

#contenu
{
	float : none !important ;
	width : 100% ;
	margin:0px;
	padding:0px;
}

#contenu p
{
	margin:0px;
	padding:0px;
}

#tarif td
{
	font-size:12px;
}


#membre_no1 input{margin-left:5px;}

#info_rassemblements label
{
	 text-align:right;
	 float: left;	
	 width: 35%;	
	 margin-top:8px;
	
}

#info_rassemblements input, #info_rassemblements textarea
{
	 float: left;	
	 margin-top:5px;
	 margin-left:2px;
	 width: 250px;
}

#formulaire
{
	width:350px;
}

#formulaire label
{
	 text-align:right;
	 float: left;	
	 width: 150px;	
	 margin-top:8px;
}

#formulaire input, #formulaire  textarea
{
	 float: left;	
	 margin-top:5px;
	 margin-left:2px;
	 width: 150px;
}

#membre_no1
{
	width:350px;
	float:left;
}

#membre_no1 input,#membre_no2 input,#information input
{
	 float: left;	
	 margin-top:5px;
	 margin-left:2px;
	 width: 150px;
}

#membre_no1 label,#membre_no2 label,#information label
{
	 text-align:right;
	 float: left;	
	 width: 150px;	
	 margin-top:8px;
}

#soumettre
{
	 width: 100px !important;
}

Modifié par Sgtcook (10 May 2007 - 21:22)
Florent V. a écrit :
body {
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
}

Les pixels ne sont pas adaptés aux styles pour l'impression. Travailler avec des points (pt) aidera peut-être.

Pour la CSS Screen, cette fois-ci :
http://css.alsacreations.com/Accessibilite-du-Web/Agrandissement-de-la-taille-des-polices
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em


Merci beaucoup, je vais lire cela et je vous donne des nouvelles Smiley biggrin
Sujet clos
Aller à