Estilo sismaule HU

by Felipe Zura

HTML

<script src="http://malsup.github.io/jquery.corner.js"></script>
<div id="encabezado"> PACIENTES HOSPITALIZADOS DESDE </br>UNIDAD DE EMERGENCIA</div>
<div id="cuerpo">
    <form method="post" name="formulario">
        <div><label class="titulos">Buscar Fecha</label></div>
        <div><label for="id_fdesde">Desde:</label><input name="fdesde" id="id_fdesde" maxlength="30" size="30"/></div>
        <div><label for="id_fhasta">Hasta:</label><input name="fhasta" id="id_fhasta" maxlength="30" size="30"/></div>
        <div><label class="titulos">Rango Horario</label></div>
        <div><label for="id_hdesde">Desde:</label><input name="hdesde" id="id_hdesde" maxlength="30" size="30"/></div>
        <div><label for="id_hhasta">Hasta:</label><input name="hhasta" id="id_hhasta" maxlength="30" size="30"/></div>
        <div><label class="titulos">Motivos</label></div>
        <div>
            <label for="id_opciones">Ver:</label>
            <select name="opciones" id="id_opciones"/>
                <option value="0">Seleccione</option>
                <option value="1">Uno</option>
                <option value="2">Dos</option>
                <option value="3">Tres es la opción que usted debería elegir!!!</option>
            </select>
        </div>
        <div><label class="titulos">Tipo de informe</label></div>
        <div>
            <label for="id_informes">Ver:</label>
            <select name="informes" id="id_informes"/>              
            <option value="0">Pantalla</option>
                <option value="1">PDF</option>
                <option value="2">Excel</option>
            </select>
        </div>
        </br>
        <div id="linea"></div>
        </br>
        <ul id="botonera">
            <li>
                <input type="submit" name="enviar" value="Enviar Consulta" class="boton" />
                <input type="reset" name="limpiar" value="Limpiar" class="boton" />
            </li>
        </ul>
    </form>
</div>
<div id="pie"></div>

CSS

body {
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 12px;
    background-image: url("https://sismaule.ssmaule.cl/SALUD/imagenes/bg.png");
    
}

#cuerpo{
	background: #dae2e4;
	font-family: Verdana, Arial, Tahoma, sans-serif;
	margin: 0 auto;
	padding: 15px;
	color: #1b4464;
}
	
#encabezado{
	background: #a2ccee;		
	margin: 0 auto;
	color: #0000a0;
	font-weight: bold;
	text-align: center;
	padding: 5px 15px;
}

#pie{
	background: #a2ccee;	
	margin: 0 auto;
	padding: 5px 15px;
	height: 0 auto;
	display: block;
	border: 0px;
}

#linea {
    background:  #1b4464;
    margin: 0 auto;
	padding: 1px;
	height: 0 auto;
	display: block;
	border: 0px;    
}

label {
    display: inline-block;
    text-align: right;
    vertical-align: middle 
}

.titulos {
    text-align: left;
    font-weight: bold;
}

.arriba {
    vertical-align: top;
}

input, select, textarea{
    margin-top: 5px;
    margin-bottom: 5px;    
    display:inline-block; 
    *display: inline; /* IE7 */    
    zoom:1; /* IE7 */             
    vertical-align:middle;
    margin-left:20px
}

.boton {
	border: 1px solid #1B4464;
	background-color:#A2CCEE;
    color: #1B4464;
    
}
.boton:hover {
	border: 1px dotted #0000A0;
	color:#0000A0;	
}

#botonera {	
	margin: 0px;	
}

#botonera li {
	list-style: none;
	text-align: right;
}
	
#botonera input {
	margin-left: 10px;
    cursor: pointer;
}

JavaScript

$('#encabezado').corner("top");
$('#pie').corner("bottom");

var padding = 20;
var label = 0;
var titulos = 0;
var ancho = 0;
var otros = 0;

$('label:not([class])').each(function()
{
    if ($(this).width() > label)
        label = $(this).width();
});
$('label:not([class])').width(label+padding);   

$('label.titulos').each(function()
{
    if ($(this).width() > titulos)
        titulos = $(this).width();
});

$('input,select').each(function()
{
    if ($(this).width() > otros)
      	otros = $(this).width();    
});

/*alert($('select[name=opciones]').width());*/

if(titulos > (label + otros + padding))
    ancho = titulos;
else
    ancho = label + otros + padding*2;

var cuerpo_padding = (parseInt($("#cuerpo").css('padding-right'))+parseInt($("#cuerpo").css('padding-left')))/2;
$("form,#encabezado,#cuerpo,#pie").width(ancho+cuerpo_padding);
$("textarea").width($("select").width());