Hola listeros,

trabajo en el diseño y programación de una web de bibliotecas y tengo que 
buscar una imagen apropiada para la cabecera. Como no ando bien en diseño 
gráfico os pido ayuda para ver si me podéis orientar o aconsejar y si tenéis 
alguna idea de qué diseño quedaría bien para la misma. Os comento que lleva un 
diseño elástico, tanto en altura como en anchura y que ha de permitir 
identificar cuando uno entra en la web de qué biblioteca se trata a través de 
su nombre en el diseño de la imagen.

La web, que aún está en desarrollo y queda mucho por hacer, es la siguiente:

        http://portal.grancanaria.com/portal/home.bsb?codcontenido=20580

Muchas gracias a [EMAIL PROTECTED],

Jorge




  ----- Mensaje original ----- 
  De: ElfA 4EvEr 
  Para: Ovillo, la lista de CSS en castellano 
  Enviado: lunes, 31 de marzo de 2008 20:16
  Asunto: [Ovillo] RE: Cabecera elástica con imágen de fondo



  Hola Jorge, otra opción es cargar un css distinto según la resolución de 
pantalla del visitante:
   
  <script type="text/javascript">
  if (window.screen) {var resolucion = screen.width + ' x ' + screen.height;
  var css;
  if (screen.width <= 800) css = 'template_css_800';else css = 
'template_css_1024';
  document.write ('<link rel="stylesheet" href="' + css + '.css" 
type="text/css">');}</script>
  En cuanto a las resoluciones de los visitantes aquí te dejo unas url's dónde 
verás estadísticas sobre el tema:
   
  
http://www.tamingthebeast.net/blog/web-development/monitor-resolution-statistics-0208.htm
   
  http://www.w3schools.com/browsers/browsers_display.asp
   
  Saludos
   
   
   
  > From: [EMAIL PROTECTED]> To: ovillo@lists.ovillo.org> Date: Mon, 31 Mar 
2008 17:52:15 +0100> Subject: Re: [Ovillo] Cabecera elástica con imágen de 
fondo> > 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" <ovillo@lists.ovillo.org>> 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: > <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> > > > -- > 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
  Guapos y guapas, clips musicales y estrenos de cine. 
  _______________________________________________
  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

Responder a