• Lunes 18 de Noviembre de 2024, 09:32

Autor Tema:  uso de print() con estilos css  (Leído 4500 veces)

cesand

  • Miembro MUY activo
  • ***
  • Mensajes: 127
    • Ver Perfil
uso de print() con estilos css
« en: Sábado 25 de Junio de 2011, 13:35 »
0
Gente del foro como estan?

vengo con una consulta sobre unos estilos css que no me toma al
imprimir un area con la funcion print() de Js. lo que estoy haciendo
es aplicar unos estilos css en un div contenedor general y luego con
java scriprt imprimo solo el contenido de esa div.. todo bien hasta
ahi imprime bien la zona deseada, pero el tema es que el contenido  es
una imagen chica  y las alinneaciones de los textos(inzquierda o
derecha) tipos de fuente, tamaños etc.. todo eso lo hago con css pero
a la hora de imprimir, imprime todo el contenido alineado a la
izquierda uno abajo de otro..

Si me pueden dar una mano muy muy agradecido.

Por que sera? les muestro el codigo que uso:

<style type="text/css">

#cont-print{
    width:90%;
    height:400px;
    border:1px solid #333;
    margin-left:10%;
    margin-top:5px;
}

#cont-print #encabezado{
    width:100%;
    height:70px;
    margin:0;
    padding:0;
    float:left;
}

#cont-print #encabezado img{
    margin:20 0 0 10;
    width:74px;
    height:74px;
}

#cont-print #encabezado p.fecha{
    float:right;
    margin:0;
    padding:0;
    font-size:12px;
    margin-right:5px;
    width:100%;
    text-align:right
}

#cont-print #encabezado p.titu{
    float:right;
    margin:0;
    padding:0;
    font-size:18px;
    font-weight:bolder;
    margin-right:5px;
    text-decoration:underline;
}

#cont-print #cuerpo{
    width:100%;
    float:left;
}

#cont-print #cuerpo p{
    font-size:16;
    text-align:left;
    margin-left:15px;
}

#cont-print #cuerpo p.primero{
    margin-top:10px;
}

#cont-print #pie{
    width:100%;
    float:left;
    margin:0;
    padding:0;
}

#cont-print #pie .l{
    width:50%;
    margin:0;
    padding:0;
    float:left;
    margin-left:5px;
}

#cont-print #pie .r{
    width:40%;
    margin:0;
    padding:0;
    float:left;
}

</style>

<script type="text/javascript">

function vista_imp(){
    window.showModalDialog("vista_imprimir/ticket_tosca.asp", "Vista
para imprimir ticket de tosca", "dialogWidth=600px;
dialogHeight=600px");
}

function imprime(){
  var ficha = document.getElementById('cont-print');
  var ventimp = window.open(' ', 'popimpr');
  ventimp.document.write( ficha.innerHTML );
  ventimp.document.close();
  ventimp.print();
  ventimp.close();

}

</script>

<div id="cont-print">
    <div id="encabezado">
        <p class="titu">Autorizacion para retiro de tosca</p>
        <img src="escudo.jpg" />
        <p class="fecha"><%=now()%></p>
    </div>
    <div id="cuerpo">
        <p class="primero">parrafo de arriba</p>
        <p> <strong>Tosquera: <%=tosquera%></strong> <strong>Chofer: </
strong><%=chofer%></p>
        <p> <strong>Delegacion: </strong><%=delegacion%></p>
        <p> <strong>Metros&sup3;: </strong><%=metros%></p>
        <p> <strong>Descripcion: </strong><%=descripcion%></p>
    </div>
    <div id="pie">
        <div class="l">l</div>
        <div class="r">r</div>
    </div>
</div>