Plantilla de factura a4 a formato de impresora... - Procura-se Freelancer

Sobre este projeto

Aberto

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>

Categoria TI e Programação
Subcategoria Web Design
Qual é o alcance do projeto? Pequena atualização de um design existente
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Necesidad específica Atualizar um site

Prazo de Entrega: Não estabelecido

Habilidades necessárias

CSS HTML

Plantilla de Factura A4 a formato de Impresora Termica 80mm

Sobre este projeto

it-programming / web-design

Aberto