Re: [Ovillo] Centrar contenedor de elementos absolutos y ancho dinámico
Hola, como te ha comentado StripTM, cuando no tengas B, asigna a body otra
clase, de forma que puedas diferenciar el diseño en las css.
Te he dejado un ejemplo en
http://webpelon.es/ovillo/2009-mes03-30-Conmuta_una_o_dos_columnas/index.html
Esencialmente, contiene el código siguiente:
HTML página CON B (DOS columnas)
HTML página SIN B (UNA columnas)
CSS
#content {
margin: 0 auto; /* centra el div contenedor (necesita width) */
width: 35em;
overflow: hidden; /* engloba a floats internos */
}
#A {
float: left;
width: 14em; /* mismo ancho que #C */
}
#B {
float: right;
width: 20em; /* ancho #A + ancho #B menor que ancho contenedor */
}
#C {
width: 14em; /* mismo ancho que #A */
}
/* Cuando #B no existe entonces #A y #C se ajustan al contenedor */
.una_columna #A, .una_columna #C {
width: auto;
}
Saludos
El 29 de marzo de 2009 20:19, Tae Sandoval Murgan escribió:
> Saludos a todos:
>
> He diseñado el wireframe de un sitio de la siguiente manera:
>
> --
> | ||
> | A||
> |---| B |
> | ||
> | C||
> | ||
> | ||
> --
>
> El contenido del elemento B tiene más importancia que el de C, por
> ello y pensando en que las páginas podrían llegar a mostrarse sin los
> archivos CSS, he escrito el HTML de la siguiente manera:
>
>
>
>
>
>
>
>
>
> Ahora, la idea es que ese esquema permanezca centrado independiente de
> la resolución de la pantalla, pero el asunto se complica debido a que
> hay páginas en las que B no aparece, y además, en las que lo hace, no
> siempre tiene el mismo ancho. Resolví el asunto de forma parcial
> utilizando posicionamiento:
>
> #content {
>margin-left: auto;
>margin-right: auto;
>position: relative;
>width: 35em; }
> #A {
>width: 35em; }
> #B {
>left: 35em;
>margin: 0;
>position: absolute;
>top: 0; }
> #C {
>width: 35em;
>position: relative;
>top: 12em; }
>
> Pero, al estar B posicionado de forma absoluta, se ubica con respecto
> a content, ¡fuera de él!. Sí content tiene una propiedad min-width en
> lugar de width, contiene a B, pero usa el ancho total del lienzo y
> todo se va a la izquierda en lugar de ocupar el centro. Y he ahí la
> cuestión.
>
> He pensado en usar float, pero ello condicionaría la ubicación de los
> elementos en el HTML, así que la opción que me queda es usar un CSS
> extra especificando el ancho de content según el propio de B y si
> existe o no y de sus dimensiones, pero si pudiera ahorrarmelo con un
> par de instrucciones
> en CSS, mejor que mejor :)
>
> ¿Alguna idea? Gracias de antemano.
> ___
> 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] OT: Los invito a que visiten mi sitio D iseño Atsui.
Hola, puedes reducir el tiempo de carga de los marcadores sociales, aunque tengas sólo uno (facebook) si copias la imagen a tu servidor. Ahora tienes: http://www.facebook.com/..."; ...>http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981"; alt="" /> Cámbialo por: http://www.facebook.com/..."; ... > Saludos El 29 de marzo de 2009 2:18, Diseño Atsui escribió: > ¡Gracias por sus sugerencias Daniel Navarro y Fernando Gutierrez! > > Les comento que por el tema de los marcadores sociales cambié > Bookmarkz por ShareThis, aunque a este último todavia no lo probe, > pero por lo que estuve viendo este excelente, o al menos es muy > llamativo por que despliega una pequeña ventana cuando uno hace click > en el icono mostrando varios servicios como Reddit. > > Y por el tema de la ubicación del menú ya arregle ese asunto y no > tuve que quitar el selector de estilo, pero no esta en el Index sino > que tienen que ingresar a alguna de las páginas y recién ahí lo podrán > ver. > Y con respecto a hacer que el título del sitio "LA WEB DE DISEÑO > ATSUI" sea un enlace al sitio creo que lo hare más adelante, por ahora > me deja conforme. Pero no descarto la idea para nada. > Y en la página de "Acerca de" deje el Lorem Ipsum porque no se me > ocurría algo para poner, tengo ideas en mi cabeza pero tengo que pulir > bien lo que pondré ahí así que prefiero por ahora dejarlo así. Se que > queda algo desprolijo pero lo pienso arreglar. > > Y para finalizar te digo Fernando que ya cambié mi PC, por fin di un > salto evolutivo. Ahora tengo un AMD Athlon 64 X2 Dual Core Processor > 5000+ con 1 GB de ram y una placa de vídeo de 512 MB XFX. > > Bueno gente, eso es todo. Muchísimas gracias por sus consejos. Y si > tienen más por ahí no duden en comentarmelo. > > Nos vemos. > > Saluda atentamente, > Tadeo. > ___ > 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] Es malo importar muchas hojas de estilos CSS
Hola, Mauricio. Gracias por la prueba. Has usado Safari, que usa cuatro conexiones simultáneas. Deduzco que en los navegadores como IE7 que usan sólo dos (lo recomendado por la especificación HTTP1.1), la diferencia de tiempos será mayor. No sé si alguna vez aplicaré esta técnica, pero me parece interesante. Saludos. El 27 de marzo de 2009 5:44, Mauricio Dulce escribió: > Hola Daniel y Choan, aca muestro un ejemplo de tiempos de carga en una > aplicación rails > > 1 ejemplo aplicando subdominios a carga de imagenes, hojas de estilos, > javascript, 3 subdominios > http://img49.imageshack.us/img49/5553/imagen3.png > > 2 ejemplo, mismo sitio con configuracion normal > http://img520.imageshack.us/img520/3788/imagen3212931.png > > tanto el cache del browser como el de la aplicación fueron borrados y > el vps reiniciado. > > > El 26/03/2009, a las 21:27, Daniel Navarro escribió: > > > Hola, Choan. > > > > Celebro que estemos de acuerdo en mantener las css separadas, al > > menos en la > > fase de desarrollo. > > > > Para acortar el tiempo de carga de las css, como ya habéis > > comentado, se > > puede adoptar la estrategia de unirlas en una sóla (una única > > petición al > > servidor) o usar el método de los alias que plantea Mauricio y > > cargarlas en > > paralelo. En principio, el segundo método debería de ser más rápido > > (lo > > siento, no es lo que dije en el anterior mensaje). > > > > Pero da igual... el tiempo que se gana por cualquiera de los dos > > métodos no > > es significativo. Lo que sí puede ser efectivo es aplicar el método > > de los > > dominios que cuenta Mauricio pero A TODOS LOS RECURSOS (en especial > > a las > > imágenes si hay muchas). En la dirección que te dejé en el mensaje > > anterior > > > http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ > > tienes un ejemplo en donde disminuye el tiempo de carga en un 40% > > cuando se > > realizan 6 accesos en paralelo al servidor en lugar de dos. Las > > temporizaciones las ha tomado la aplicación de rendimiento online > > que ofrece > > http://www.gomez.com/ > > > > Sin embargo, en las pruebas del equipo de yahoo que explican en > > http://yuiblog.com/blog/2007/04/11/performance-research-part-4/#what- > > if > > llegan a la conclusión de que subir el número de accesos simultáneos > > por > > este método puede ser perjudicial, pudiendo ser un número óptimo > > entre 2 y 4 > > conexiones en paralelo. Además, la resolución dns que se produce en la > > primera carga de una página del sitio también puede ser perjudicial, > > aunque > > quedarán cacheadas y apenas intervendrán en la temporización para las > > sucesivas páginas del sitio. > > > > > > Resumiendo: En mi opinión, mejor tener las css separadas. Ganaremos > > poco > > uniendo las css a menos que tengamos una cantidad realmente alta. > > Por otro > > lado, el método que plantea Mauricio de subdominios a la misma ip > > podría > > funcionar si se aplica sobre todo a las imágenes ya que son los > > recursos más > > usados. Sería interesante que Mauricio nos dijera el resultado de sus > > pruebas. > > > > > > Saludos > > > > P.D. Choan, no hace falta que vuelvas a repetir lo que has dicho en > > este > > hilo, sobre todo para los puntos en los que coincidimos. > > > > > > > > > > > > > > > > El 26 de marzo de 2009 18:12, Choan Gálvez > > escribió: > > > >> Hola. > >> > >> On Mar 26, 2009, at 17:39 , Daniel Navarro wrote: > >> > >>> Hola, preguntaste: > >>> > Sí, hombre, si ya sabemos que funcionar funciona. Lo que yo me > pregunto es si es más eficiente servir N ficheros de X tamaño > desde N > dominios que servir un fichero de N*X tamaño desde un dominio. Para > distintos valores de N y X y eso. > >>> > >>> Evidentemente, un sólo fichero con todo aglutinado tardará menos, > >>> pero > >>> ¿concatenarás todos los recursos además de las css?. El límite de 2 > >>> conexiones se aplica también a las imágenes, por ejemplo. > >>> > >>> Cuando se amplía el número de conexiones paralelas, el tiempo de > >>> carga puede > >>> ser más que apreciable: > >>> > >> > http://www.ajaxperformance.com/2006/12/18/circumventing-browser-connection-limits-for-fun-and-profit/ > >>> > >>> No creo que merezca la pena unir las css en una sola por varios > >>> motivos: > >>> - Apenas se notará la diferencia de tiempo. > >>> - El navegador cachea las css por lo que las demás llamadas serán > >>> locales. > >>> - La separación de css permite gestionarlas de forma más efectiva. > >>> > >>> Por lo tanto, es preferible tener los ficheros de hojas de estilo > >>> separados > >>> frente a la pequeña ventaja de una inapreciable carga más rápida > >>> en la > >>> primera llamada al sitio. Sin embargo, la opción que plantea > >>> Mauricio sí que > >>> puede ser interesante. Particularmente, como en el proceso de diseño > >>> hay > >>> tantos parámetros a tener en cuenta (compatibilidad navegadores, > >>> optimización motores de búsqueda, etc.) p
Re: [Ovillo] OFFTOPIC, alguien de sevilla o malaga???
Hola Manuel: Aquí tienes un diseñador de Sevilla capital... trabajo acualmente en el departamento de diseño de Sadiel haciendo de todo un poco... logos, ofertas y propuestas para Junta de Andalucía, de Extremadura, etc..., usabilidad, accesibilidad web, etc... Saludos, El 29 de marzo de 2009 16:25, Manuel Castillo - www.nodos.ws - < mcasti...@nodos.ws> escribió: > Hola, estoy interesado en entablar conversaciones con algún diseñador > web de la provincia de Sevilla o Málaga. ¿Hay alguien por la lista? Gracias > ___ > 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] Centrar contenedor de elementos absolutos y ancho dinámico
Tae Sandoval Murgan escribió: > Saludos a todos: > > He diseñado el wireframe de un sitio de la siguiente manera: > > -- > | || > | A|| > |---| B | > | || > | C|| > | || > | || > -- > > El contenido del elemento B tiene más importancia que el de C, por > ello y pensando en que las páginas podrían llegar a mostrarse sin los > archivos CSS, he escrito el HTML de la siguiente manera: > > > > > > > > > > Ahora, la idea es que ese esquema permanezca centrado independiente de > la resolución de la pantalla, pero el asunto se complica debido a que > hay páginas en las que B no aparece, y además, en las que lo hace, no > siempre tiene el mismo ancho. Resolví el asunto de forma parcial > > > He pensado en usar float, pero ello condicionaría la ubicación de los > elementos en el HTML, así que la opción que me queda es usar un CSS > extra especificando el ancho de content según el propio de B y si > existe o no y de sus dimensiones, pero si pudiera ahorrarmelo con un > par de instrucciones > en CSS, mejor que mejor :) > > ¿Alguna idea? Gracias de antemano. > Yo no me comería mucho la cabeza y tendría un par de modelos de página, se puede simplificar haciendo que sólamente uno de los modelos incluya los cambios, pero a modo didáctico sería algo así: -- Saludos -=stripTM=- ___ 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] Centrar contenedor de elementos absolutos y an cho dinámico
Saludos a todos:
He diseñado el wireframe de un sitio de la siguiente manera:
--
| | |
| A | |
|---| B |
| | |
| C | |
| | |
| | |
--
El contenido del elemento B tiene más importancia que el de C, por
ello y pensando en que las páginas podrían llegar a mostrarse sin los
archivos CSS, he escrito el HTML de la siguiente manera:
Ahora, la idea es que ese esquema permanezca centrado independiente de
la resolución de la pantalla, pero el asunto se complica debido a que
hay páginas en las que B no aparece, y además, en las que lo hace, no
siempre tiene el mismo ancho. Resolví el asunto de forma parcial
utilizando posicionamiento:
#content {
margin-left: auto;
margin-right: auto;
position: relative;
width: 35em; }
#A {
width: 35em; }
#B {
left: 35em;
margin: 0;
position: absolute;
top: 0; }
#C {
width: 35em;
position: relative;
top: 12em; }
Pero, al estar B posicionado de forma absoluta, se ubica con respecto
a content, ¡fuera de él!. Sí content tiene una propiedad min-width en
lugar de width, contiene a B, pero usa el ancho total del lienzo y
todo se va a la izquierda en lugar de ocupar el centro. Y he ahí la
cuestión.
He pensado en usar float, pero ello condicionaría la ubicación de los
elementos en el HTML, así que la opción que me queda es usar un CSS
extra especificando el ancho de content según el propio de B y si
existe o no y de sus dimensiones, pero si pudiera ahorrarmelo con un
par de instrucciones
en CSS, mejor que mejor :)
¿Alguna idea? Gracias de antemano.
___
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] OFFTOPIC, alguien de sevilla o malaga???
Hola, estoy interesado en entablar conversaciones con algún diseñador web de la provincia de Sevilla o Málaga. ¿Hay alguien por la lista? Gracias ___ 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
