28220 sujets

CSS et mise en forme, CSS3

CSS et ligne coupée à l'impression

Bonjour !!

J'ai un Intranet de monté avec un problème d'impression, du au design du site.
J'ai résolu 95% du problème.
par contre il m'en reste un...
Certaines lignes sont coupées en 2 horizontalement à l'impression...

Si quelqu'un avait une idée...
j'ai regardé au niveau des fonctions page mais rien ne semble fonctionner.
j'utilise une feuille de style print.css attirbuée au média print.

Merci !
Bonjour,

est ce que tu pourrais nous montrer un bout de ton code pour qu'on puisse voir le problème en situation ? merci Smiley cligne
Hello !
Désolé pour le délai, j'étais en week-end Smiley smile
Qu'est-ce que tu entends par code ?
Mon fichier CSS ou le HTML ?

Le CSS

body
{
margin: 0 0 0 0;
background-color: #D4DCE4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
#impr_non
{
visibility: hidden;
}
#impr_oui
{
visibility:visible;
float: left;
position: absolute;
top: 10;
left: 10;
}
table
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
input, textarea
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #006699;
}
select
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid black;
}
hr
{
color: #D9E0E7;
}
a, a:visited
{
color: blue;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.bouton
{
border: none;
background-color: #95AEC4;
}
.fond_login
{
background-image:url(img/titre_login_02.jpg);
background-repeat: no-repeat;
}
.cellule_centre
{
background-color: #FFFFFF;
text-align: justify;
padding-right: 9px;
padding-bottom: 10px;
}
.cellule_ajout_marche_public_1
{
background-color: #D9E0E7;
}
.cellule_ajout_marche_public_2
{
background-color: #E3E8ED;
}
.titre_bleu
{
background-color: #EBE9E9;
width: 100%;
height: 15px;
font-weight: bold;
padding: 2px 5px 2px 5px;
margin-bottom: 5px;
}
.objet_nature
{
border: none;
}
.synthese_double
{
padding: 5 5 5 5;
background-color: #A2BAD4;
}
.synthese_simple
{
padding: 5 5 5 5;
background-color: #E3E8ED;
}
.titre_bleu_fonce
{
background-color: #A2BAD4;
width: 100%;
height: 15px;
font-weight: bold;
padding: 2px 5px 2px 5px;
}
.titre_orange
{
background-color: #FFCC66;
width: 100%;
height: 15px;
font-weight: bold;
padding: 2px 5px 2px 5px;
}
.titre_orange_fonce
{
background-color: #FF9933;
width: 100%;
height: 15px;
font-weight: bold;
padding: 2px 5px 2px 5px;
}
.titre_vert
{
background-color: #339933;
width: 100%;
height: 15px;
font-weight: bold;
padding: 2px 5px 2px 5px;
}
.titre_vert_fonce
{
background-color: #336600;
width: 100%;
height: 15px;
font-weight: bold;
padding: 2px 5px 2px 5px;
}
h3
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}
.reserve
{
background-color: #CC6699;/*#00CC66; #009900;*/
background-image: url(modules/planningsalles/images/valide.gif);
background-repeat: repeat-x;
}
.provisoire
{
background-color: #FFCC00;/*#FFFF66;*/
background-image: url(modules/planningsalles/images/attente.gif);
background-repeat: repeat-x;
}
#calendrier td
{
text-align: center;
border: 1px solid #FFFFFF;
background-color: #D9E0E7;
}
.infos_resa
{
visibility: hidden;
position: absolute;
float: right;
text-align: left;
background-color: #E3E8ED;
border: 1px dashed black;
margin: -5 2 2 10;
padding: 5px 5px 5px 5px;
width: 356px;
}
.titre_infos_resa
{
background-color: #D9E0E7;
text-align: center;
font-weight: bold;
padding: 1px 1px 1px 1px;
}
.texte_infos_resa
{
background-color: #FFFFFF;
padding: 1px 1px 1px 1px;
}


Le HTML est carrément crade, c'est l'ancien Webmaster qui a mis des tableaux dans des tableaux (jusqu'à 9 niveaux) pour la mise en page, donc je gère comme je peux...
La partie impression se situe dans #impr_non et #impr_oui.
Modifié par BruceFeuillette (28 Nov 2005 - 12:04)
Hum, difficile de juger sans le html...
tu pourrais isoler les parties du html et du css qui posent problème, sans t'encombrer avec le reste des éléments ?
Bonjour,

#impr_oui
{
visibility:visible;
float: left;
position: absolute;
top: 10;
left: 10;
}


Un bloc peut soit flotter, soit être positionné en absolu. Mais pas les deux simultanément. Ici, seul le positionnement absolu sera retenu.

Par ailleurs, la règle @page a été sérieusement revue à la baisse par CSS2.1 faute d'implémentations.

Et les CSS print ont pour le navigateur une valeur presque uniquement indicative.
Modifié par Laurent Denis (28 Nov 2005 - 14:48)
Laurent Denis a écrit :
Et les CSS print ont pour le navigateur une valeur presque uniquement indicative.

Je ne savais pas cela, en tout cas j'utilise le print.css depuis quelque temps et cela fonctionne assez bien.
Laurent Denis a écrit :
Bonjour,
Un bloc peut soit flotter, soit être positionné en absolu. Mais pas les deux simultanément. Ici, seul le positionnement absolu sera retenu.


Effectivement...
j'ai empilé du code parce que ça commençait de me prendre la tête Smiley smile
Bon, je vous mets le code HTML, attention les yeux...
Je vais essayer de commenter les parties vitales


<html>
<head>
<title>:: Intranet de la Ville de M&acirc;con ::</title>
<script language="JavaScript">
<!--
blablablablablablabalbalablablalabblablablablalbalbalba
//-->
</script>
<script language="JavaScript1.2" src="modules/include/menu.js"></script>
<script language="JavaScript">
<!--
function na_restore_img_src(name, nsdoc)
{
  var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
  if (name == '')
    return;
  if (img && img.altsrc) {
    img.src    = img.altsrc;
    img.altsrc = null;
  } 
}

function valid_login()
{
if ((document.form_login.login.value=="login") || (document.form_login.login.value=="")){
alert('Veuillez saisir votre identifiant.');
return false;
} else if ((document.form_login.pass.value=="plouf") || (document.form_login.pass.value=="")) {
alert('Veuillez saisir votre mot de passe');
return false;
} else return true;
}

// --></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="print.css" media="print" rel="stylesheet" type="text/css">
<script language="JavaScript" src="mm_menu.js"></script>
</head>
<body>

<!-- Début de la balise pour ne pas imprimer -->
<div id="impr_non">
<!-- Début de la balise pour ne pas imprimer -->

<table width="788" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td width="11" rowspan="11" valign="top" background="img/template_01.jpg"><img src="img/template_01.jpg" width="11" height="1"></td> 
    <td height="33" colspan="3" valign="top"><a href="./"><img src="img/template_03.jpg" width="209" height="33" border="0"></a><img src="img/template_04.jpg" width="557" height="33"></td> 
    <td width="11" rowspan="11" valign="top" background="img/template_02.jpg"><img src="img/template_02.jpg" width="11" height="1"></td> 
  </tr> 
  <tr> 
    <td height="29" colspan="3"><script language="JavaScript1.2">mmLoadMenus();</script> 
      <a href="./"><img src="img/template_05.jpg" width="174" height="29" border="0"></a><a href="?page=procedures" onMouseOut="MM_startTimeout(); na_restore_img_src('menu3_r1_c1', 'document')" onMouseOver="MM_showMenu(window.mm_menu_0306104910_0,0,29,null,'image1')"><img src="img/bouton_01.jpg" name="image1" width="102" height="29" border="0" id="image1"></a><a href="?page=drh" onMouseOut="MM_startTimeout();; na_restore_img_src('menu3_r1_c9', 'document')" onMouseOver="MM_showMenu(window.mm_menu_0306105107_4,0,29,null,'image2')"><img src="img/bouton_02.jpg" name="image2" width="103" height="29" border="0" id="image2"></a><a href="?page=ressources" onMouseOut="MM_startTimeout();; na_restore_img_src('menu3_r1_c3', 'document')" onMouseOver="MM_showMenu(window.mm_menu_0306105107_1,0,29,null,'image3')"><img src="img/bouton_03.jpg" name="image3" width="104" height="29" border="0" id="image3"></a><a href="?page=mon_intranet" onMouseOut="MM_startTimeout(); na_restore_img_src('menu3_r1_c5', 'document')" onMouseOver="MM_showMenu(window.mm_menu_0306105153_2,0,29,null,'image4')"><img src="img/mon_intranet.jpg" name="image4" width="104" height="29" border="0" id="image4"></a><a href="?page=projets" onMouseOut="MM_startTimeout(); na_restore_img_src('menu3_r1_c7', 'document')" onMouseOver="MM_showMenu(window.mm_menu_0306105233_3,0,29,null,'image5')"><img src="img/projets.jpg" name="image5" width="104" height="29" border="0" id="image5"></a><img src="img/template_06.jpg" width="75" height="29"></td> 
  </tr> 
  <tr> 
    <td height="16" colspan="3" valign="top"><a href="./"><img src="img/template_07.jpg" width="175" height="16" border="0"></a><img src="img/template_08.jpg" width="591" height="16"></td> 
  </tr> 
  <tr> 
    <td height="59" colspan="3" valign="top"><img src="img/template_09.jpg" width="175" height="59"><img src="img/template_10.jpg" width="591" height="59"></td> 
  </tr> 
  <tr> 
    <td height="10" colspan="3" valign="top"><img src="img/template_11.jpg" width="175" height="10"><img src="img/template_12.jpg" width="591" height="10"></td> 
  </tr> 
  <tr> 
    <td height="20" colspan="2" background="img/template_14.jpg"><img src="img/template_13.jpg" width="191" height="20"></td> 
    <td height="20"><img src="img/template_15.jpg" width="22" height="20"></td> 
  </tr> 
  <tr> 
    <td width="191" height="100%" valign="top" background="img/template_17.jpg"> <!--  
	Tableau permettant d'avoir un design potable, quelque soit la hauteur du tableau.
	--> 
      <table width="191" height="196" border="0" cellpadding="0" cellspacing="0" background="img/template_17.jpg"> 
        <tr> 
          <td height="68" valign="top"><img src="img/template_16.jpg" width="191" height="58"></td> 
        </tr> 
        <tr> 
          <td height="35" background="img/titre_login_02.jpg"><img src="img/titre_login_01.jpg" width="174" height="35"></td> 
        </tr> 
        <tr> 
          <td height="10" background="img/template_17.jpg"><img src="img/space.gif" width="10" height="10"></td> 
        </tr> 
        <tr> 
          <td height="192" background="img/template_17.jpg"><table width="160" height="192" border="0" cellpadding="0" cellspacing="0" class="fond_login"> 
              <tr> 
                <td width="7" height="192"><img src="img/space.gif" width="10" height="10" border="0"></td> 
                <td width="153" align="left" valign="top">  		<div align="left">

                  <form name="form_login" action="?page=login" method="POST" onSubmit="javascript: return valid_login();"> 
                    <div align='left'> 
                      <table border='0' width='171'> 
                        <tr> 
                          <td width='171' align="left"><input type='text' name='login' maxlength='255' value='identifiant' size='19' onFocus="if (this.value=='identifiant'){this.value=''};"></td> 
                        </tr> 
                        <tr> 
                          <td width='170' height='23' align="left"><p align="left"> 
                              <input name='pass' type='password' value='plouf' size='15' maxlength='10' onFocus="if (this.value=='plouf'){this.value=''};"> 
                              <input type="image" src="img/bouton_ok.jpg" align="absmiddle" class="objet_nature"> 
                            </p></td> 
                        </tr> 
                      </table> 
                    </div> 
                    <input type="hidden" name="url_redirect" value="page%3Dmarchespublics_procedures_appeloffres"> 
                  </form></div>

                   
</td> 
              </tr> 
            </table></td> 
        </tr> 
        <tr> 
          <td>&nbsp;</td> 
        </tr> 
      </table></td> 
    <td width="553" height="100%" rowspan="2" valign="top" class="cellule_centre">

<!-- Début de la balise pour imprimer -->
<div id="impr_oui">
<!--  Début de la balise pour imprimer -->

<p><a href="?page=procedures_internes"><img src="img/titre_procedures_internes.jpg" width="544" height="34" border="0"></a></p>
<p class="titre_bleu">LA PROCEDURE D'APPEL D'OFFRE </p>
<p><i>L'Unit&eacute; March&eacute;s Publics assure tout au long de la proc&eacute;dure une fonction d'aide et de conseils pour l'ensemble des services gestionnaires. Cette proc&eacute;dure s'applique obligatoirement pour les march&eacute;s &gt; &agrave; 230 000&euro; HT</i>.<br> 

</p>
<p align="center" class="titre_bleu">LA PROCEDURE A SUIVRE</p>
<div class="titre_bleu">Etape n&deg;1 : Initiative de la d&eacute;cision de passation d'un Appel d'Offres</div>
<br> 
Le service doit consulter au pr&eacute;alable l'&eacute;lu de secteur et l'&eacute;lu r&eacute;f&eacute;rent concern&eacute;s par le march&eacute;.
</p> 
blablablablablablalba


<!--  Fin de la balise pour imprimer -->
    </div>
<!--  Fin de la balise pour imprimer -->

</td> 
    <td width="22" rowspan="2" valign="top" background="img/template_24.jpg"><img src="img/template_24.jpg" width="22" height="4"></td> 
  </tr> 
  <tr> 
    <td width="191" height="36" valign="bottom" background="img/template_17.jpg"><img src="img/template_18.jpg" width="191" height="36"></td> 
  </tr> 
  <tr> 
    <td height="10" colspan="3" background="img/template_20.jpg"><img src="img/template_19.jpg" width="191" height="10"></td> 
  </tr> 
  <tr> 
    <td height="32" colspan="3" background="img/template_21.jpg"><img src="img/template_21.jpg" width="1" height="32"></td> 
  </tr> 
  <tr> 
    <td height="36" colspan="3" background="img/template_23.jpg"><img src="img/template_22.jpg" width="240" height="36"></td> 
  </tr> 

</table> 

<!--  Fin de la balise pour ne pas imprimer -->
</div>
<!--  Fin de la balise pour ne pas imprimer -->

</body>
</html>


C'est un joyeux souk !
Et encore j'ai nettoyé le code, si si ! Smiley cligne

Ah oui, je vous explique ce que j'ai fait !
J'ai mis une balise DIV autour du tableau de mise en page, qui contient les images de fond.
A l'impression il est caché.
J'ai mis une balise DIV autour du contenu utile qui doit être imprimé.
Donc à l'impression, le design est caché, le contenu glisse en haut de page et voilà.
Sinon j'avais la moitié des phrases imprimées...
C'est la seule solution que j'ai sous la main, à part recoder le tout, mais j'ai d'autres projets prioritaires Smiley cligne
Modifié par BruceFeuillette (29 Nov 2005 - 11:59)
youpiouh a écrit :
documente toi sur @page et le page-break ;o)

Ca ne fonctionne pas, j'ai essayé, l'effet est le même...
Coupé en plein milieu Smiley ohwell
Sujet clos
Aller à