Hola, Pablo.
On 1/3/06, Pablo Rodríguez <[EMAIL PROTECTED]> wrote:
>
> 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).
Ups. Lo siento, es que a veces no me explico como creo.
Lo que quería decirte en el mensaje anterior es que el bloque '.inicio' no
necesita ir flotado. Así mismo, como le tienes que aplicar márgenes y borde,
tampoco es conveniente que le des una anchura. Por una parte, él ya sabrá
que tiene que fluir a la derecha de los bloques flotados, y por otra, al ser
un elemento de bloque SIN FLOTAR, tenderá a ocupar todo el ancho disponible,
que será de:
40% - (anchura del borde izquierdo + anchura del borde derecho)
Resumiendo: con que elimines el 'float: left' y el 'width: 40%' todo te
debería de encajar.
Hay otros métodos de aproximación al mismo problema, pero considero que este
es uno de los más comprensibles.
---------------------------
Lo del '.barsup' es un tema aparte.
En primer lugar, no considero que semánticamente esté bien codificado. Si
utilizaras la típica estructura <UL><LI><A /></LI>...</UL> obtendriás el
mismo resultado y aquellos que necesiten usar un lector de pantalla te lo
agradecerían.
Obviando este pequeño detalle, en el CSS aplicas unos valores a los que
difícilmente encuentro un criterio lógico.
Por ejemplo, no entiendo lo que te lleva a posicionarlo absolutamente,
cuando con el posicionamiento por defecto seguiría el flujo natural del
código, esto es, se situaría justo bajo el logotipo, que supongo es lo que
pretendes.
Tampoco entiendo el por qué de los márgenes, anchos y demás. Si te fijas, la
suma de los márgenes laterales + el ancho arrojan un total del 101%. Además,
según que navegador, te calculará el porcentaje en relación a uno u otro
contenedor, de ahí que en Opera se vea más estrecho. En cualquier caso, un
elemento posicionado absolutamente es mejor manejarlo ajustando los valores
'top', 'left', 'right' y 'bottom' que mediante márgenes.
Por último el posicionamiento vertical también lo tienes en porcentaje a
partir de la parte superior ('top: 27%'). Esto es totalmente incorrecto a no
ser que pretendas que según la resolución del navegador cliente, o incluso
que cada vez que redimensione ese navegador, el menú aparezca más arriba o
más abajo.
En definitiva, lo primero que yo haría sería eliminar el posicionamiento
absoluto que, en general, se debería usar únicamente para casos en los que
el elemento en cuestión no pudiera disponerse siguiendo la posición que se
le asignó en el flujo del código. Luego ya lo intentaría posicionar con
márgenes en la posición final.
No entiendo muy bien qué es lo que pasa. Si alguien me lo puede
> explicar, se lo agradecería mucho.
>
> Saludos,
>
>
> Pablo
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.
Tampoco vendría mal que dibujaras un esquema, de los elementos y cajas que
vas a disponer en el site, en un papel y pensaras en qué tiene que ser
margen, qué padding y qué anchos y altos, y empezar a aplicar atributos
según convenga.
Por último, si no quieres que IE trabaje a su propio ritmo te aconsejaría
que no le hicieras trabajar en Quirks Mode.
Todo esto, en conjunto, es un tema muy amplio y cuya explicación detallada
pienso se escapa de las dimensiones normales de un mensaje de la lista, así
que creo que lo mejor que puedes hacer es ir buscando por Internet
información sobre ello y echarle un vistazo (profundo).
Un saludo, David Merino.
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
>
_______________________________________________
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
