Plantilla de factura a4 a formato de impresora... - Se Busca Freelancer

Sobre este proyecto

Abierto

Tengo una Plantilla HTML, de una Factura que trabaja solo en A4 para imprimir en impresoras normales, ahora ocupo pasar esa misma Factura para impresión de papel de 80mm, ocupo que todos los campos se acomoden en una plantilla HTML pero para papel de 80mm.

Este es el Coding actual en Papel A4

-----------

<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">*
{
    border: 0;
    box-sizing: content-box;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    list-style: none;
    margin: 0;
    text-decoration: none;
}

h3{
font-size:16px;
font-weight:bold;
}

body{
width:100%;
height:100%;
}

body,td,th {
font-family: Arial;
font-size: 12px;
}

.table-invoice {
font-size: 85%;
table-layout: fixed;
border-collapse: collapse;
width:100%;
}

.border{
border-right: 1px solid #d9e8ed ;
}

.table-invoice td {
padding:7px 4px;
border-bottom: 1px solid #d9e8ed;
}

.table-invoice th {
    background:#eef2f3;
    font-weight:bold;
    height:30px;
    vertical-align:middle;
}
.invoice-content{
border:1px solid #d9e8ed;
margin:5px 10px;
min-height:100px;
display:inline-block;
}

.monto-letras{
font-weight:bold;
padding:10px;
padding-top:20px;
background: #eef2f3;
}

.table-total{
font-size: 85%;
table-layout: fixed;
border-collapse: collapse;
width:100%;
}

.table-total td {
padding:5px 5px;
border-bottom: 1px solid #d9e8ed;
}

.content-total{
margin:0px 10px;
}
.bold,b{
    font-weight:bold;
}
.header{
margin:10px;
}
.nopagado,.estadocss{
background: #ff5356;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
padding: 3px;
color: #fff;
right: 10px;
text-align: center;
margin-bottom: 5px;
}

.pagado{
background: #06C393;
font-size: 18px;
font-weight: bold;;
text-transform: uppercase;
width: 100%;
padding: 3px;
color: #fff;
right: 10px;
text-align: center;
margin-bottom: 5px;
}

.anulado{
background: #e4b932;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
padding: 3px;
color: #fff;
right: 10px;
text-align: center;
margin-bottom: 5px;
}

.col{
min-height:30px;
width: 46%;
float:left;
padding:10px;
margin-top:5px;
}

.mayu{
text-transform:uppercase;
}
.table-invoice .pad{
padding:5px 30px 5px 10px !important;
}

.text{
color:#565656;
line-height:inherit;
}
p{
margin: 0px;
margin-bottom: 2px;
}
</style>
<div class="header">
<div class="estadocss">{estado}</div>

<table autosize="2" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #d9e8ed;" width="100%">
    <tbody><tr><td align="left" valign="middle" width="60%"><img src="images/logofactura.png" style="width:auto;height:70px" /></td><td style="padding-right:5px;" width="50%">
        <table border="0" width="100%">
            <tbody><tr><td align="right">
                <h3>FACTURA # {nfactura}</h3>
                </td></tr><tr><td align="right">Fecha emisión <b>{emitido}</b></td></tr><tr><td align="right">Fecha vencimiento <b>{vencimiento}</b></td></tr>
            </tbody>
        </table>
        </td></tr>
    </tbody>
</table>

<div class="col border"><b>De</b>

<p class="text mayu">{nombre_empresa}</p>

<p class="text">Ruc {ruc_empresa}</p>

<p class="text">{direccion_empresa}</p>

<p class="text">Teléfono {telefono_empresa}</p>
</div>

<div class="col"><b>Para</b>

<p class="text mayu">{nombre_cliente}</p>

<p class="text">{cedula_cliente}</p>

<p class="text">{direccion_principal_cliente}</p>

<p class="text">Teléfono {telefono_cliente} / {movil_cliente}</p>
</div>
</div>

<div class="invoice-content">
<table autosize="2" class="table-invoice">
    <thead><tr>
        <th>Descripción</th>
        <th width="100px">Precio</th>
        <th width="45px">Imp%</th>
        <th width="25px">Cant.</Th>
        <th width="100px">Total</th>
        </tr>
    </thead>
    <tbody><tr><td>{items}</td></tr>
    </tbody>
</table>

<div class="monto-letras">son: {total_letras}</div>
</div>

<div class="content-total">
<table autosize="2.4" class="table-total">
    <tbody><tr><td align="center"><barcode code="{barcode}" height="3" size="0.75" type="Ean128a"></barcode>

        <div style="font-family: ocrb;font-size:14px">{barcode}</div>
        </td><td align="right" width="215px">
        <table>
            <tbody><tr><td align="right" class="bold" width="105px">subtotal :</td><td align="left" width="100px">{subtotal}</td></tr><tr><td align="right" class="bold" width="95px">impuesto :</td><td align="left" width="100px">{impuesto}</td></tr><tr class="otrosimpuestos1"><td align="right" class="bold" width="95px">otro imp. 1 :</td><td align="left" width="100px">{otro_impuesto_1}</td></tr><tr class="otrosimpuestos2"><td align="right" class="bold" width="95px">otro imp. 2 :</td><td align="left" width="100px">{otro_impuesto_2}</td></tr><tr class="otrosimpuestos3"><td align="right" class="bold" width="95px">otro imp. 3 :</td><td align="left" width="100px">{otro_impuesto_3}</td></tr><tr><td align="right" class="bold" width="95px">DESCUENTO :</td><td align="left" width="100px">{descuento}</td></tr><tr><td align="right" class="bold" width="95px">TOTAL :</td><td align="left" width="100px">{total}</td></tr>
            </tbody>
        </table>
        </td></tr>
    </tbody>
</table>
</div>

<p>{operaciones}</p>
</body>
</html>

Categoría Programación y Tecnología
Subcategoría Diseño Web
¿Cuál es el alcance del proyecto? Pequeña actualización a un diseño existente
¿Es un proyecto o una posición? Un proyecto
Actualmente tengo Tengo las especificaciones
Disponibilidad requerida Según se necesite
Necesidad específica Actualizar un sitio web

Plazo de Entrega: No definido

Habilidades necesarias

CSS HTML

Plantilla de Factura A4 a formato de Impresora Termica 80mm

Sobre este proyecto

it-programming / web-design

Abierto