Re: [Ovillo] Cabecera elástica con imágen de fon do

2008-03-31 Por tema Jorge
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

2008-03-30 Por tema Pablo Impallari
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

2008-03-30 Por tema Jorge
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

2008-03-30 Por tema Jorge
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

2008-03-30 Por tema Pablo Impallari
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

2008-03-29 Por tema Alejandro Roca
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

2008-03-26 Por tema Jorge
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