Re: [Ovillo] Imagen para Cabecera elástica
bueno,
probé el método de Martín de los 3 div pero me es imposible que el central,
que es donde va la imagen, quede centrado respecto al div principal, y que
por tanto los div laterales tengan el mismo ancho.
alguna idea?
Gracias,
Jorge
- Mensaje original -
De: martin boggino
Para: Jorge
Enviado: viernes, 11 de abril de 2008 19:30
Asunto: Re: [Ovillo] Imagen para Cabecera elástica
la goudy olt style, tb es muy interesante o la optima, si tenes mac, en
pc, su homonima es otawa, son tipografias muy buenas con referencias a
diseños formales, si tendria que dividirlos en 3 div, uno central donde va
tu imagen y otras dos laterales con bg repeat x,
saludos
martin
El día 11/04/08, Jorge [EMAIL PROTECTED] escribió:
Hola Martin,
gracias por tu desinteresada ayuda.
Te cuento, la imagen me la pasaron los clientes de la página, pero sin
ver nada del diseño que había hecho. Realmente a mí no me gusta esa imagen
pero bueno, ellos mandan. Ahora bien, en caso de que sigan queriendo que
lleve esa imagen, tengo que acomodarla al diseño elástico que contiene la
cabecera para que quede siempre bien situada. No entendí tu propuesta de
recortar 2 px por el alto de ambos lados de la imagen. Imagino que habrá que
situarla bien a la derecha o a la izquierda del div que la contiene y poner
como imagen de fondo de ése div el listoncillo que seriá el de la izquierda
si opto por alinear la imagen a la drecha o el de la drecha si la alineo a
la izquierda para que se vea ese fondo a medida que el div crece (es
elástico), pero no sé pq propones que recorte la imagen de ambos lados ..
Por otro lado, el logo de la institución ya tiene su área de protección,
es la imagen que está situada arriba a la izquierda...
En cuanto a las fuentes, voy a probar con una Times a ver que tal,
Muchas gracias de nuevo,
Saludos desde Canarias, España
- Mensaje original -
De: martin boggino
Para: Ovillo, la lista de CSS en castellano
Enviado: viernes, 11 de abril de 2008 18:33
Asunto: Re: [Ovillo] Imagen para Cabecera elástica
bueno jorge, yo soy diseñador grafico, en cuanto a la tipografia del
sitio,
la imagen que pusiste esta bien, el tamaño de la fuente es muy grande
(en tu
imagen), podes usar otros tipo de recursos para llamar la atencion, tu
diseño en si, es muy fino, muy buen logrado para el publico que una
biblioteca accederia, como la tipografia seria una imagen, yo pondria
alguna
(con serifa), Times, jugaria con las mayusculas, todo mayusculas,
pero las
iniciales de las palabras con una fuente un poco superior
te muestro un ejemplo con la arial,
BIBLIOTECA SIMON BENITEZ PADILLA,
esto por un lado, por el otro lado, siempre pero siempre tenes que
dejer un
area de proteccion del logo o nombre o denominacion institucional,
como
quieras nombrarlo, puedes recortar un listoncillo de tu imagen, 2
pixeles x
el alto de tu imagen, de ambos lados, guardalo como gif o jpg,
saludos desde Asuncion, Paraguay
El día 4/04/08, Jorge [EMAIL PROTECTED] escribió:
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
Re: [Ovillo] Imagen para Cabecera elástica
2008/4/12 Jorge [EMAIL PROTECTED]: bueno, probé el método de Martín de los 3 div pero me es imposible que el central, que es donde va la imagen, quede centrado respecto al div principal, y que por tanto los div laterales tengan el mismo ancho. alguna idea? Gracias, Creo (no recuerdo como empezó este hilo) que lo que quieres es seguir con el logo de la web, pero ahora quieres q sea util para todas las resoluciones. El otro día me encontré con este mismo caso, y he pensado una solucion, que seria simple y llanamente centrarla en el div en que esté incluida, si lo que quieres poner no queda bien centrado pues podrias decirle a traves de css que esta imagen concreta se le aplique un tamaño (width i height) que esté en funcion de la letra (em) o de un %, aunque esto falla cuando la imagen empieza a pixelarse, pero si no te pasas estirando la web, me parece q puede funcionar,no? Una pregunta, he vuelto a ver la web en la que estas trabajando, y no se adapta a mi resolucion de pantalla (1024) ni tampoco a la de 800, :(( Ciao ___ 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] Imagen para Cabecera elástica
hOLA Laura, la web lleva un diseño elástico, no líquido, por lo que sus medidas (em) dependen del tamaño de la fuente , no de la resolución (%) que tengas. Gracias, Ciao - Mensaje original - De: laura [EMAIL PROTECTED] Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: sábado, 12 de abril de 2008 13:25 Asunto: Re: [Ovillo] Imagen para Cabecera elástica 2008/4/12 Jorge [EMAIL PROTECTED]: bueno, probé el método de Martín de los 3 div pero me es imposible que el central, que es donde va la imagen, quede centrado respecto al div principal, y que por tanto los div laterales tengan el mismo ancho. alguna idea? Gracias, Creo (no recuerdo como empezó este hilo) que lo que quieres es seguir con el logo de la web, pero ahora quieres q sea util para todas las resoluciones. El otro día me encontré con este mismo caso, y he pensado una solucion, que seria simple y llanamente centrarla en el div en que esté incluida, si lo que quieres poner no queda bien centrado pues podrias decirle a traves de css que esta imagen concreta se le aplique un tamaño (width i height) que esté en funcion de la letra (em) o de un %, aunque esto falla cuando la imagen empieza a pixelarse, pero si no te pasas estirando la web, me parece q puede funcionar,no? Una pregunta, he vuelto a ver la web en la que estas trabajando, y no se adapta a mi resolucion de pantalla (1024) ni tampoco a la de 800, :(( Ciao ___ 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] Imagen para Cabecera elástica
2008/4/12 Jorge la web lleva un diseño elástico, no líquido, por lo que sus medidas (em) dependen del tamaño de la fuente , no de la resolución (%) que tengas. Pues si me permites la opinion, me parece un error no tener en cuenta la resolucion, porque tener mas del 50% de la web oculta tras el scroll horizontal, no se yo : ___ 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] Imagen para Cabecera elástica
2008/4/12 Jorge [EMAIL PROTECTED]: Tienes toda la razón, no había caído en eso y como dices tu con la de 800, la mitad queda oculta tras el scroll horizontal. Como hago? Gracias Pues convertir el ancho de todas las cajas q tengas al % q mas convenga en cada caso, o tb hay soluciones de tipo js, se puede ver que resolucion tiene el visitante y aplicar uno o otro css en funcion de ella. Hay mas opciones, seguro que los compis de la lista te saben guiar :) Suerte! Laura ___ 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] Imagen para Cabecera elástica
Gracias otra vez, js si no keda otro remedio sí, pero si no pues mejor evitarlo. El trabajo es para una Administracion Pública obligada a cumplir con el nivel de accesibilidad AA como minimo y si lo uso habria que ofrecer una alternativa para los que no tengan js habililtado. Creo que mejor usar porcentajes.. pero con esto tb hay problemas por que con altas resoluciones las lineas de texto alargadas pueden ser dificiles de leer y las etiquetas max-width, max-height, .. no funcionan en todos los navegadores. Hay hacks que ofrezcan alternativas a esas etiquetas en los navegadores que no las soportan? Saludos, Jorge - Mensaje original - De: laura [EMAIL PROTECTED] Para: Jorge [EMAIL PROTECTED] CC: ovillo@lists.ovillo.org Enviado: sábado, 12 de abril de 2008 14:58 Asunto: Re: [Ovillo] Imagen para Cabecera elástica 2008/4/12 Jorge [EMAIL PROTECTED]: Tienes toda la razón, no había caído en eso y como dices tu con la de 800, la mitad queda oculta tras el scroll horizontal. Como hago? Gracias Pues convertir el ancho de todas las cajas q tengas al % q mas convenga en cada caso, o tb hay soluciones de tipo js, se puede ver que resolucion tiene el visitante y aplicar uno o otro css en funcion de ella. Hay mas opciones, seguro que los compis de la lista te saben guiar :) Suerte! Laura ___ 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] Imagen para Cabecera elástica
bueno jorge, yo soy diseñador grafico, en cuanto a la tipografia del sitio,
la imagen que pusiste esta bien, el tamaño de la fuente es muy grande (en tu
imagen), podes usar otros tipo de recursos para llamar la atencion, tu
diseño en si, es muy fino, muy buen logrado para el publico que una
biblioteca accederia, como la tipografia seria una imagen, yo pondria alguna
(con serifa), Times, jugaria con las mayusculas, todo mayusculas, pero las
iniciales de las palabras con una fuente un poco superior
te muestro un ejemplo con la arial,
BIBLIOTECA SIMON BENITEZ PADILLA,
esto por un lado, por el otro lado, siempre pero siempre tenes que dejer un
area de proteccion del logo o nombre o denominacion institucional, como
quieras nombrarlo, puedes recortar un listoncillo de tu imagen, 2 pixeles x
el alto de tu imagen, de ambos lados, guardalo como gif o jpg,
saludos desde Asuncion, Paraguay
El día 4/04/08, Jorge [EMAIL PROTECTED] escribió:
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
Re: [Ovillo] Imagen para Cabecera elástica
Hola Martin,
gracias por tu desinteresada ayuda.
Te cuento, la imagen me la pasaron los clientes de la página, pero sin ver
nada del diseño que había hecho. Realmente a mí no me gusta esa imagen pero
bueno, ellos mandan. Ahora bien, en caso de que sigan queriendo que lleve esa
imagen, tengo que acomodarla al diseño elástico que contiene la cabecera para
que quede siempre bien situada. No entendí tu propuesta de recortar 2 px por el
alto de ambos lados de la imagen. Imagino que habrá que situarla bien a la
derecha o a la izquierda del div que la contiene y poner como imagen de fondo
de ése div el listoncillo que seriá el de la izquierda si opto por alinear la
imagen a la drecha o el de la drecha si la alineo a la izquierda para que se
vea ese fondo a medida que el div crece (es elástico), pero no sé pq propones
que recorte la imagen de ambos lados ...
Por otro lado, el logo de la institución ya tiene su área de protección, es la
imagen que está situada arriba a la izquierda...
En cuanto a las fuentes, voy a probar con una Times a ver que tal,
Muchas gracias de nuevo,
Saludos desde Canarias, España
- Mensaje original -
De: martin boggino
Para: Ovillo, la lista de CSS en castellano
Enviado: viernes, 11 de abril de 2008 18:33
Asunto: Re: [Ovillo] Imagen para Cabecera elástica
bueno jorge, yo soy diseñador grafico, en cuanto a la tipografia del sitio,
la imagen que pusiste esta bien, el tamaño de la fuente es muy grande (en tu
imagen), podes usar otros tipo de recursos para llamar la atencion, tu
diseño en si, es muy fino, muy buen logrado para el publico que una
biblioteca accederia, como la tipografia seria una imagen, yo pondria alguna
(con serifa), Times, jugaria con las mayusculas, todo mayusculas, pero las
iniciales de las palabras con una fuente un poco superior
te muestro un ejemplo con la arial,
BIBLIOTECA SIMON BENITEZ PADILLA,
esto por un lado, por el otro lado, siempre pero siempre tenes que dejer un
area de proteccion del logo o nombre o denominacion institucional, como
quieras nombrarlo, puedes recortar un listoncillo de tu imagen, 2 pixeles x
el alto de tu imagen, de ambos lados, guardalo como gif o jpg,
saludos desde Asuncion, Paraguay
El día 4/04/08, Jorge [EMAIL PROTECTED] escribió:
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
