Gracias por la respuesta, David.
He implementado lo que me has dicho:
.prcol, .sgcol {
float: left;
width: 25%;
text-align: center;
}
.inicio {
background-color: #d6e0eb;
border: thin solid #336699;
float: left;
margin-left: 55%;
margin-right: 5%;
margin-bottom: 5%;
width: 40%;
font-weight: bold;
text-align: center;
color: #cc3300;
}
Pero .inicio no está a la misma altura que .prcol y .sgcol (no flota).
Eso en Firefox. En Opera, además de no flotar, es mucho más estrecho. Y
en IE, no sé por qué extraña razón no aparece (al igual que .barsup).
No entiendo muy bien qué es lo que pasa. Si alguien me lo puede
explicar, se lo agradecería mucho.
Saludos,
Pablo
Maikel Naigt wrote:
Pues no sé, no sé. A mi, precisamente lo que dices que no te funciona, se me
ve "bien".
De todas maneras veo que te lias mucho para llegar a la distribución de
columnas que tienes pensada. Visto el CSS que adjuntas (no el que está
actualmente en la página) me da por pensar que lo que quieres realmente es
una distribución tipo: BLOQUE (25%) + BLOQUE (25%) + MARGEN (5%) + BLOQUE
(*) + MARGEN (5%). Pensándolo de esta manera no hay pérdida posible.
· Simplemente habrá que dotar de un ancho del 25% a los dos primeros bloques
y flotarlos a la izquierda, amén del texto centrado como deseas. Con esto ya
tenemos la parte más sencilla (por lo evidente más que nada): ---> .prcol,
.sgcol { float: left; text-align: center; width: 25%; }
· Después toca separar el tercer bloque un 5% de su bloque flotado a la
izquierda más próximo. Como el margen, al estar los bloques contiguos
flotados, NO se contabilizará a partir del borde de estos, SI NO que se
contará a partir del borde izquierdo de SU CONTENEDOR, tendremos que sumar a
ese 5% el ancho de los bloques flotados a su izquierda, arrojándonos un 55%.
· Finalmente también quieres separarlo un 5% por su derecha. Bien, esto es
más fácil porque al ser el último bloque no tenemos que calcular nada. Estos
dos últimos puntos se traducen en este código: ---> .inicio { margin-left:
55%; margin-right: 5%; }
· Este último bloque, en principio, tendrá una anchura del 40% (100 - (55 +
5)), pero si le aplicas BORDE o PADDING se ajustará, reduciéndose para
ocupar el espacio que le queda libre (recordemos que un elemento de bloque
sin anchura fija tiende a ocupar todo el espacio horizontal que le sea
posible). En general, deberemos evitar en la medida de lo posible el aplicar
borde o padding a un elemento de bloque con una anchura fija, porque si no
después nos puede desencajar el resto de la composición (por supuesto solo
es aplicable a bloques que necesiten compartir un espacio horizontal fijo
con otros).
Una última observación. Ya puedes (y debes) borrar el trozo de '.prcol +
.sgcol, .sgcol + .inicio ...' que me imagino que pondrías para aplicar
estilos a Opera, FF, ... y que no los viera IE. Como podrás comprobar, IE en
el fondo no es tan malo, y a veces es mejor pensar las cosas con un poco más
de detenimiento para crear un código más limpio a la vez que más compatible
y no tirar de hacks.
En fin, que no te respondo lo que pedías, pero que espero que te sirva de
ayuda para algo ;)
Un saludo, David Merino.
On 1/2/06, Pablo Rodríguez <[EMAIL PROTECTED]> wrote:
Hola a todos,
tengo una página que tiene que tener tres columnas (25%, 25%, 50%), que
las hago así:
.inicio {
background-color: #d6e0eb;
border: thin solid #336699;
left: 0%;
margin-left: 55%;
margin-right: 5%;
font-weight: bold;
text-align: center;
color: #cc3300;
}
.prcol {
float: left;
margin-left: 0%;
margin-right: 25%;
text-align: center;
}
.sgcol {
float: left;
left: 0%;
margin-left: 25%;
margin-right: 50%;
text-align: center;
}
Pero no consigo (http://www.orbic.us/):
1. Que la primera columna tenga los textos centrados (tampoco va con
".prcol p {text-align: center;}".
2. Que la tercera columna tenga un cuadrado con texto distribuido en el
cuadrado.
¿Alguien sabe qué es lo que estoy haciendo mal?
Muchas gracias y feliz 2006,
Pablo
_______________________________________________
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://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://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://ovillo.org/mailman/listinfo/ovillo
