Re: [Ovillo] Cabecera elástica con imágen de fon do
Gracias de nuevo Pablo, lo único que así la imagen va a pesar mucho y como estamos obligados a cumplir con el nivel AA de accesibilidad, no sé yo que pensarán mis jefes. Pero bueno, no queda otra si lo que quieren es un diseño elastico. Otra cosa que pienso es cuánto de ancho y de alto tiene que ser la imágen, porque uno no sabe que medida tienen los monitores de los usuarios que nos visiten, y parece ser que la tendencia es a ser cada vez más grande. Yo creo que habrá que buscar unas medidas de la imagen pensando en un monitor grande estándar, no? Un abrazo, Jorge. PD: A ver si se arregla de una vez la situación en tu país - Mensaje original - De: Pablo Impallari Para: Ovillo, la lista de CSS en castellano Enviado: lunes, 31 de marzo de 2008 4:34 Asunto: Re: [Ovillo]Cabecera elástica con imágen de fondo Hola Jorje: Tal como te dice eva, simplemente tiene que hacer que la imagen sea por demás de grande, tanto a lo alto como a lo ancho. Y luego la pones como imagen de fondo con no-repeat y alineada con top right; De modo que al irse expandiendo el contenedor, irá mostrando la parte de la imágen que queda escondida. 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: "Jorge" <[EMAIL PROTECTED]> To: "Ovillo, la lista de CSS en castellano" Sent: Sunday, March 30, 2008 2:56 PM Subject: Re: [Ovillo] Cabecera elástica con imágen de fondo 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: > 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 izquierd
Re: [Ovillo] Cabecera elástica con imágen de fon do
Hola Jorje: Tal como te dice eva, simplemente tiene que hacer que la imagen sea por demás de grande, tanto a lo alto como a lo ancho. Y luego la pones como imagen de fondo con no-repeat y alineada con top right; De modo que al irse expandiendo el contenedor, irá mostrando la parte de la imágen que queda escondida. 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: "Jorge" <[EMAIL PROTECTED]> To: "Ovillo, la lista de CSS en castellano" Sent: Sunday, March 30, 2008 2:56 PM Subject: Re: [Ovillo] Cabecera elástica con imágen de fondo 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: > 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/
Re: [Ovillo] Cabecera elástica con imágen de fon do
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: > 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;> }> > ---> > > ...> > > > > > > href="www.empresa.com"> src="img/logo.gif">> > > > > > > > > > > > > > > > ___> Lista de distribución Ovillo> Para escribir a la lista
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: 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; } --- ___ 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
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: 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; } --- ___ 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
[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; } --- ___ 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
[Ovillo] Cabecera elástica
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; } --- ... ... ... ... ... ... ... ___ 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