Gracias ElfA 4Ever, Pero una cosa, la cabecera es elástica no sólo a lo ancho, sino también a lo alto, es decir, tiene una altura en "em". Si yo cambio el tamaño de la fuente, el banner va a crecer en altura y ya no kedaría bien. Que tengo que hacer? ¿Establecer la altura de la cabecera en pixeles? No sé si me valdría porque el logo tiene que estar alineado tanto con el menu como con el banner y como el ancho del menu está en em, al logo tambien le he puesto un ancho en em. Por tanto, si yo modifico el tamaño de la fuente, el logo creceria en anchura pero no en altura y se vería mal ....
Que me recomendías ? Saludos ----- Mensaje original ----- De: ElfA 4EvEr Para: Ovillo, la lista de CSS en castellano Enviado: domingo, 30 de marzo de 2008 18:09 Asunto: [Ovillo] RE: Cabecera elástica con imágen de fondo Hola Pablo, en tu caso, lo que yo haría es recortar la imágen http://mbrown.iespana.es/img/bsb/cabecera_bsbp.jpg por la izquierda con un píxel de ancho y de alto lo que hace la propia imagen; posteriormente esta imágen de 1px de ancho y 167px de alto la pondría como background, y por último alienaría la imágen http://mbrown.iespana.es/img/bsb/cabecera_bsbp.jpg siempre a la derecha, de tal manera que en el caso de que la página se haga más ancha saldrá como background la imágen de 1px, estéticamente queda bien. Saludos. > From: [EMAIL PROTECTED]> To: ovillo@lists.ovillo.org> Date: Sun, 30 Mar 2008 14:14:57 +0100> Subject: Re: [Ovillo] Cabecera elástica con imágen de fondo> > Hola Pablo, > > Muy buen diseño en roccodonna, sos un gran profesional.> > El ejemplo que me das no creo que me valga para mi diseño, porque en mi caso, la imagen de fondo tiene un diseño y unas proporciones determinadas. Podes ver una pagina en http://mbrown.iespana.es/Noticias.htm. El servidor web en la que está hospedada me retoca un poco el diseño, pero lo importante es que veas como queda la cabecera. ¿Es necesario que tenga que cambiarlo para poder adaptarse a un diseño elástico?> > Gracias por tu ayuda, > > Jorge> ----- Mensaje original ----- > De: Pablo Impallari > Para: Ovillo, la lista de CSS en castellano > Enviado: domingo, 30 de marzo de 2008 8:01> Asunto: Re: [Ovillo]Cabecera elástica con imágen de fondo> > > 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> _______________________________________________> 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 _________________________________________________________________ Tecnología, moda, motor, viajes,…suscríbete a nuestros boletines para estar siempre a la última http://newsletters.msn.com/hm/maintenanceeses.asp?L=ES&C=ES&P=WCMaintenance&Brand=WL&RU=http%3a%2f%2fmail.live.com _______________________________________________ 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 _______________________________________________ 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
