Posicionamiento CSS

joselichu007

Buenas, haber si me podeis echar una mano, tengo que hacer un horario (en plan el horario de clase) en xhtml y sin tablas. Mi problema es que lo posiciono todo con CSS y me queda perfecto cada "caja" con su asignatura pegada a su otra "caja" como en la foto: http://ceipvirgendelbrezo.centros.educa.jcyl.es/sitio/upload/img/HORARIO_2.jpg
El caso esque cuando le meto zoom a la web o la junto mucho pos los lados cada "caja" osea cada asignatura se me separa y el horario acaba siendo una locura....
Sabeis alguna solucion porq llevo toda la noche con ello y nada...
Gracias!!!

Shendraf

¿No es más sencillo utilizar una tabla y añadirle etiquetas de estilo para las celdas y/o columnas?

joselichu007

ya el problema esq tengo q hacerlo sin tablas...jejej

B

Te lo ha mandado tu profesor?

Dile que las tablas se pueden usar perfectamente siempre que se usen para lo que están hechas, es decir, datos tabulados, y un horario que es? Datos tabulados. go tabla!

JuAn4k4

#4 Los ejemplos suelen ser ejemplos para ilustrar, o en este caso para aprender.

Si bien este no es un buen ejemplo ni para ilustrar ni para aprender, si sirve como ejemplo tanto para ilustrar como para aprender, siendo a su vez un mal ejemplo de uso del mismo.

Es como cuando te dan un metodo para resolver algo muy gordo y lo usas para un problema muy muy pequeño que se resuelve por la cuenta de la vieja en 1 segundo. (Simplemente para aprender a usarlo).

¿ Me explique ?

Quizas el trabajito consiste en que aprendan peleandose con ello, aunque el ejercicio no se resuelva normalmente asi, pero que sirve para manejar todos los aspectos del posicionamiento ( Que no lo se ).

joselichu007

Si claro, nos ha dicho q nunca lo hagamos asi, pero q esta vez lo ha mandado para que nos peleemos con el posicionamiento en CSS...ya he arreglado lo de cuando estrechas la ventana q no se mueva....pero cuando le meto zoom sigue descolocandose todo...alguna idea??

B

ya #5 pero el tema es que no es que "no sea el método mas fácil", si no es que es un método incorrecto xD

DevonxD

Podrias subir el css que llevas? para mirar mejor el codigo y eso, asi a ojo a saber..

joselichu007

os paso el codigo

spoiler

Lo se es enorme...

DevonxD

Vale has probado a usar margin- enved de padding- ?

Margin para situar va mejor, ya que padding es de una forma para intentar mantener el margen dentro de un propio div, y tambien puedes probar position:relative junto con float:left; por ejemplo te estoy poniendo solo de una linea:

spoiler

No se si me entenderas, pero hacer eso con divs es una tarea muy engorronada cuando en tablas se hace en un momento, si tienes alguna duda preguntame, o si no enviame un mp con msn y cuando tenga un hueco podemos hablarlo mejor

bLaKnI

madre mia...

La clave, una clase común.
Position lefts.
Width prefijados, máximo max width.
Si colocas en un divisor común, la ultima celda antes del salto que sea float right, sino, se descuaja.
Yo evitaria un divisor contenedor, y los pondria todos en el body con margin:0 auto para firefox y en body, text-align:center para IE. Dentro de cada celda, el tamaño que quieras.

Luego tambien tienes otro truco wapo wapo, y se llama:

display: xxx.

Ahí puedes trabajar como si fueran tablas, pero en verdad, no lo son... ;)

Toma, un buen regalo:

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

M4nSoN

Ponle tamaño fijo a las "cajas" y usa un contenedor.

JuAn4k4

#7 Yo no he hablado de mas facil/dificil, he hablado de ejemplo bueno / malo.

No es un ejemplo bueno para enseñar donde usar divs + css, pero si es un ejemplo bueno para aprender a usarlos.

Lo de #11 te ira bien.

Yo se 0 de css, pero algo he tocado por ver como iba.

joselichu007

Gracias a todos, soys unos cracks xD, al final lo he consegido apañar, mas bien por amor al arte porq ya habia entregado el trabajo, pero x lo menos ya lo he entiedo, q supongo q es lo importante xD, Gracias, de verdad, 1 abrazo!!

P.D:
11# ojala nos hubieran enseñado el display ....me hubiera ahorrado mazo de trabajo ...xD

NeB1

#14 felicidades ^. No sé que habrás usado, pero lo más correcto (creo yo...) en este caso sería el div que contiene el horario un "display:table;" y el resto puedes jugar con float lefts, o aun mejor, con display:block, display:block-inline;

Usuarios habituales