Hola!
estoy maquetando web que lleva un diseño elástico. La cabecera contiene el
típico logo a la izquierda y un "banner" a la derecha. Éste último tiene una
imagen de fondo de un tamaño determinado, el problema es que al ser el div
"banner" elástico, el espacio sobrante del mismo keda "vacío", rellenado con el
color de fondo.
¿Que mejores opciones hay cuando uno opta por un diseño elástico o líquido y
tiene que maquetar un banner con una imagen de unas proporciones y diseño
establecidas?
Muchas Gracias,
Saludos
#wrapper {
width: 99em;
margin: .5em auto;
text-align: left;
}
#cabecera {
margin:0;
margin-bottom: 1.5em;
padding:0;
height: 16.8em;
position: relative;
}
#cabecera #logo {
position: absolute;
height: 16.8em;
left:0;
}
#cabecera #logo img {
width: 16em;
height: 16.8em;
}
#banner {
margin-left: 17em;
height:14.5em;
background: url(img/banner.png) no-repeat 0 0;
border: .1em solid #777;
border-bottom: none;
}
#cabecera .barra {
height:2em;
margin-left:17em;
line-height: 2em;
padding: 0 1em;
background: url(../img/fondomenusup1.gif) repeat-x left 50%;
border: 0.1em solid #777;
text-align: right;
}
#cabecera #banner_bottom {
margin-bottom: 0em;
padding-right: .5em;
}
-----------------------------------------------------------
...
...
...
<div id="wrapper">
<div id="cabecera">
<div id="logo">
<a title="Portal web principal de mi empresa"
href="www.empresa.com"> <img alt="Logotipo de la empresa"
src="img/logo.gif"></a>
</div>
<div id="banner"></div>
<div class="barra" id="banner_bottom">
...
</div>
</div> <!-- Fin Cabecera -->
...
...
...
</div> <!-- Fin wrapper -->
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
