Re: [Ovillo] disposición en tres columnas
Gracias, David, por la explicación, que me ha servido para arreglar el problema (que aún tengo que retocar ligeramente). Pues básicamente tienes un poco de jaleo con los conceptos sobre algunos atributos en CSS y, sobre todo, con el modelo de cajas. Te aconsejaría un repasillo sobre esto antes de continuar. Sí, es obvio que con el modelo de cajas de no lo entiendo en absoluto. Intentaré estudiarlo en la especificación del CSS2. Muchas gracias de nuevo, 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
Re: [Ovillo] disposición en tres columnas
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
Re: [Ovillo] disposición en tres columnas
David: sólo quiero felicitarte por tus respuestas (ya he leido dos o tres muy buenas): claras, instructivas y con detalle. (yo las almaceno) Son de agradecer y al final conseguiras que aprendamos algunos algo sobre CSS. Gracias de verdad. por cierto, un detalle: como en la firma de tus mensajes aparece Maikel Naigt, gmail te considera un spamer. Saludos. Pedro. ___ 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
Re: [Ovillo] disposición en tres columnas
Muchas gracias por los inmerecidos halagos. Aunque ya sabes que la información está aquí, en el ciberespacio, y que yo no sería nadie sin las webs que todos conocemos y que nos sirven muchas veces de referente cuando nos atascamos y, por supuesto, sin esta lista en la que llevaba tiempo sin participar y de la que he aprendido mcho. (en serio, no es peloteo) Espero que al menos sirva de inspiración para aquellos que también tienen amplios conocimientos sobre alguna cuestión que se plantea, pero que les da vaguería el ponerse a escribir, y les haga plantearse compartirla con todos nosotros de una forma un poco más didáctica. Un saludo, David Merino (...lo siento gmail ;) ) P.D.: Yo también tengo muchos mensajes de la lista guardados, pero no se lo digas a nadie ;) On 1/3/06, Pedro Sanz [EMAIL PROTECTED] wrote: David: sólo quiero felicitarte por tus respuestas (ya he leido dos o tres muy buenas): claras, instructivas y con detalle. (yo las almaceno) Son de agradecer y al final conseguiras que aprendamos algunos algo sobre CSS. Gracias de verdad. por cierto, un detalle: como en la firma de tus mensajes aparece Maikel Naigt, gmail te considera un spamer. Saludos. Pedro. ___ 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
Re: [Ovillo] disposición en tres columnas
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:
Re: [Ovillo] disposición en tres columnas
Hola Pablo.
Pablo Rodríguez escribió (Mon, 02 Jan 2006 20:03:10 +0100):
.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;
}
Creo que tenemos un pequeño lío con los float, los margin y alguna cosilla
más ;-)
En primer lugar, si tienes 3 columnas que sabes que serán de 25%, 25% y 50%,
te recomendaría que fijaras el ancho de cada una de ellas mediante width,
que además es más que aconsejable siempre que trabajes con elementos
flotados. A continuación, flótalos todos ellos a la izquierda, y verás cómo
se sitúan uno al lado del otro. Fíjate que no tengas márgenes horizontales
entre ellos, porque si no, el reparto de 25, 25 y 50% no cabrá en el
contenedor. Si quieres dejar espacio entre las 3 columnas, deberías reducir
la anchura de las mismas :-)
Espero que te ayude.
Saludos
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
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
