Problema con margenes CSS puro

[Bahamut]

Estoy haciendo una web en puro CSS ya que he leido en muchos sitios que para hacer una web para moviles es mejor utilizar capas y CSS, evitando usar tablas. Yo siempre he estado acostumbrado a las tablas y la verdad que me ha costado bastante adaptarme, lo veo mas engorroso tener que ir cambinado numeritos y pixeles en CSS que directamente ajustar una tabla desde el dreamweaver.

Bueno temas aparte, he seguido varios tutoriales y estoy teniendo algun que otro problema con márgenes. Mi web es esta: http://web-tech.es/oscillon/

Problema 1) Al pie de la página hay un margen negro que no debería, no se porque aparece, pero deberia cortarse justo al final sin borde negro.

Problema 2) Las cajas no están alineadas, me resulta raro que se supone que el CSS deberia ser pixel perfect y coincidir los pixeles, pero esto no es así, he tenido que ajustar manualmente los márgenes de cada cajita para que coincidan con el diseño original creado en photoshop. Se supone que al centrar las cajas (alignment auto) se centra en pantalla verdad? Pero no es así al 100%, he tenido que añadir un padding de 3 pixeles porque no se centra justo justo en el centro de la pantalla, esto es normal? (Ejemplo la caja del boton formacion, tiene 3 pixeles de padding para que quede centrada, si los quito no coincide)
O tambien por ejemplo la caja "trabajos de estudiantes", he tenido que ponerle un margen extra de 2 pixeles (deberia tener el mismo margen que la caja de la izquierda), pero si no añado esos pixeles no queda justo centrada.

Problema 3) El alineamiento cuando utilizo float right y float left tampoco coincide. Ejemplo el botón "contacto" se ha quedado descuadrado y el CSS esta igual ya que tiene la misma propiedad que el boton superior al mismo. Osea con la misma propiedad CSS porque tiene un alineamiento diferente?

La que realmente me preocupa es el problema 3 ya que no se como arreglarlo, los otros simplemente sumando o restando píxeles lo puedo cuadrar, pero en el ultimo caso no puedo hacer eso y no quiero tener que crear una alineacion distinta para cada botón si se supone que deberian tener la misma propiedad todos... sería raro.


EDITO: Por cierto es una web para iphone4, solo por curiosidad, no se si es importante o no... de todas formas he usado un div de posicion relativa y dentro 3 divs de posiciones absolutas para cada apartado, no se si es correcto ahcerlo así pero leí en una web que era la mejor forma de hacerlo al hacer webs para móviles.

[Oscar_Hidro]

Que tal @Bahamut, pues la verdad es menos engorroso utilizar css3. En tu caso resulta un poco complicado ver tus errores puesto que no vemos tu código. De cualquier manera estás entrando apenas al mundo de css3 por lo que comentas y por eso mismo, te voy a recomendar que entres a aprender algo de responsive web design. Es una manera sencilla de aprender a maquetar de manera correcta tu página para que se visualize en distintas resoluciones de pantalla, junto con html5.

http://www.youtube.com/watch?feature...&v=nVS56AgNhO0

[C2am]

Hola
1) Defines la altura de 700px, en consecuencia eso obtienes.
2) Las imágenes no tienen el mismo tamaño. Fijate que Escuela tiene una altura de 122px, mientras que Trabajo... es de 114px. Además que Escuela tiene una sombra inferior, mientras que la otra solo es el recuadro verde, sin sombra. Verifica muy bien las imágenes, ya que al tener sombra una y la otra no nunca coincidirán.

3) Estas usando <img> que es un elemento de linea, con solo ponerle a su contenedor text-align:center, te debería centrar todas las imágenes. Con lo cual no haría falta el flotado de las imágenes, además que en este caso no aplicaría, ya que está pensado para que el texto fluya a su alrededor, y no veo texto alguno.
Tan solo deberías ajustar algún margen para que no queden pegadas.

Te diría que repienses la maquetación completa, que el logo no lo pongas como fondo ya que es una imagen importante (logo de la empresa), y/o que le agregues texto.
Que cabecera no tenga es padding de 600px, sino que el fondo (degradado, no el logo) lo pongas como fondo de "pagina" por ejemplo, así evitas eso que has hecho, quedando cabecera solo con tamaño aproximado de 300px (altura del logo).

Y el pie, no lo he mirado lo suficiente para sugerir algo.

Saludos

[Bahamut]

C2am lo primero, muchas gracias me ha ayudado al 100% todas y cada una de tus palabras, Ya he solucionado todos esos problemas y he cambiado la estructura, ya no necesito floats, creo que la cosa ha mejorado mucho. El problema de la barra negra inferior solucionado, creo que era por el padding ese de los 600px que tenia en la cabecera, ahora he puesto el background degradado como me dijistes y la cabecera la uso unicamente para el logo. Ahora se ajusta todo centrado y sin problemas, además tienes razón había una imagen sin sombras (a veces estas cosas ni te das cuenta) y por eso se descentraba.

Todavía veo 2 problemas:

1) El dreamweaber me dice que es mejor no usar el Zindex, esto lo uso en el pie de pagina para la imagen que he puesto ya que si no lo hago los botones van por debajo. Es raro que esto ocurra ya que en el pie de pagina uso un background en vez de una imagen y yo me pensaba que los backgrounds siempre tenian un zindex inferior al resto. En principio mi pie de pagina iba a ser una imagen y no un background, pero tenia muchos problemas para superponer capas (el boton y el fondo del pie) asi que al final decidí hacer eso. Alguna solución?

2) Esto no es un problema aunque no lo comprendo muy bien. Se supone que mi cabecera es de 300px pero la imagen que contiene dentro es de 312px. Esto no me genera problemas porque mis capas se superponen, pero se supone que la imagen del logotipo deberia medir lo mismo que la cabecera? Esto lo hago porque luego en la siguiente capa (el contenido) empiezo a poner elementos a partir de los 300px y así llevo una cuenta redonda de las medidas, pero no se si es correcto. Puede generarme problemas?


Y esto no es un problema sino una pregunta de cara al diseño:

3) Creeis que deberia usar medidas absolutas o relativas en cada capa? Aunque esta web se adapta al iphone4, si utilizo medidas relativas en todas las capas, se supone que se ajustaran a la resolucion de cada dispositivo? Actualmente todo el diseño se centra en pantalla y al redimensionar el nevegador no se redimensiona nada. No se muy bien como sería pero eso eso de cambiar a position relative?

Y a oscar gracias por el video, lo he visto casi todo y esta muy bien, aunque todavia no me atrevo a usar ems en vez de pixeles... porque es un poco coñazo tener que convertir las medidas una a una. Y eso de hacer el diseño adaptable es lo que quiero en un futuro, pero como ves en mi pregunta nº3 no se muy bien como hacerlo, en el video no he visto nada del tag position relative.


PD: He resubido la web http://web-tech.es/oscillon/ (se puede ver el codigo fuente y el CSS sin problemas, lo digo porque oscar puso que no podia verlo).

[Oscar_Hidro]

Seguramente el background está en un div, cosa que tendrás que manipular exactamente como lo haces, con un z-index. Los navegadores más actuales no deben de tener mayor problema al leer este tipo de propiedades.

Respecto al problema de los pixeles, es probable que tengas problemas en otro tipo de navegadores, donde la imagen puede ser cortada a los 300px. La razón, creo yo, de que te ajuste automáticamente la imagen a los 300px es nuevamente la capacidad del navegador ya que como lo estas adaptando a un iphone4, el navegador tiene más capacidad de interpretar lo que estás haciendo. Los errores los encontrarás a la hora de vizualizarlo en otro equipo.

Y las medidas relativas sirven hacer más flexibles ciertos elementos. Las posiciones absolutas, no te dejan adaptar a diferentes resoluciones o navegadores. Es por eso que recomiendo responsive web design, aunque los em`s puedan parecer gorrozos al principio, es más bien falta de costumbre, es aprender algo nuevo. Mucho mas efectivo que los pixeles.

[Bahamut]

Añadir que... otro fallo (creo) es que he tenido que poner un padding de 300px en el pie de pagina debido al background del pie. [padding-top: 300px;] El background si lo tengo dentro del div (pie de pagina) y si no le pongo el padding la imagen se corta. Pero el pie de pagina no puede tener tantos pixeles, es por eso que le puse un padding.

Por lo demás, empezaré a utilizar "ems" cuando acabe la web, de esta forma no tengo que estar reconvirtiendo los pixeles constantemente. Estaría bien una opción en dreamweaver que convirtiera pixeles a ems, existe?
Tienes razón, en un navegador (supongo que por ejemplo en iphone 3G que tiene menos resolucion) se cortará la web al tener medidas absolutas. La idea era hacer una versión para 3G y otra para 4G, pero quizas sea lo mejor intentar hacerle un responsive web design. Lo iré viendo por el camino.

[Bahamut]

Alguien puede contestarme las preguntas anteriores? Y la del padding?