Hola Alejandro:
Fijate como lo he resuelto en este sitio, mirate el css y el html, tal vez
te resulte util
http://www.roccodonna.com.ar/ices/
Un Abrazo
Pablo Impallari
Soluciones en Internet
Diseño y Desarrollo | xhtml - php - mysql.
Sitio Web: www.pabloimpallari.com.ar
Teléfonos:
Si llama desde Rosario: 456 7218
Si llama desde Argentina: 0341 - 456 7218
Si llama desde otro país: 0054 - 341 - 456 7218
----- Original Message -----
From: "Alejandro Roca" <[EMAIL PROTECTED]>
To: <ovillo@lists.ovillo.org>
Sent: Wednesday, March 26, 2008 4:18 AM
Subject: [Ovillo] Cabecera elástica con imágen de fondo
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
--
No virus found in this incoming message.
Checked by AVG.
Version: 7.5.519 / Virus Database: 269.22.1/1349 - Release Date: 29/03/2008
05:02 p.m.
_______________________________________________
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
