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:
<body>
<div id="content">
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
</div>
</body>
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
