empezando con xhtml y css

[bulldog]

Hola, estoy empezando con xhtml y css, pero tras leer diversa documentación, hay cosas que aún se me escapan, por ejemplo, en IE la web se empieza a ver medio bien (según lo que yo quiero) pero en Firefox es un desastre. Me gustaría saber si me pueden ayudar con estas cosas concretas, ya que la teoría poco a poco ya la voy comprendiendo.

El enlace está aqui y el css aqui

-Al la cabecera he tenido que darle un height porque en IE me corta parte de la imagen de fondo, es correcto esto?

-El pie, por que si tiene aplicado width:760px se me incrusta entre las 2 columnas en Firefox? No se supone que con ese ancho no debería ocupar la parte inferior? Le he metido clear:both y ya no sucede, es esto correcto?

- Al div="contenido" le aplico un color de fondo que según entiendo yo tendría que abarcar la imagen con las 2 columnas de texto, esto es así en IE pero no en FF, por que??

- A la foto de la casa es conveniente indicarle en la etiqueta img el alto y ancho o como ya tiene las dimensiones con las que quiero que se muestre no hace falta?

-El menú lo he metido en otro div, esta bien así? es que no se si creo div´s innecesarios.

Muchas gracias por anticipado y perdonad las molestias pero al principio resulta dificil todo esto!

[AlvaroG]

no es que firefox sea perfecto, pero a la hora de diseñar es más confiable que IE.
Antes que nada deberías validar tu código,
html: validator.w3.org
css: http://jigsaw.w3.org/css-validator/validator-uri.html

por lo demás, sí, es correcto poner clear:both para tirar abajo una caja.

a las imágenes es conveniente darles las dimensiones, si vas a usar css quizás quieras hacer algo como:
<img id="imagenZZZ" ... >

y en el css

#imagenZZZ {
width : XXpx;
height : XXpx;
}



Saludos.

[bulldog]

Iniciado por alvlin

no es que firefox sea perfecto, pero a la hora de diseñar es más confiable que IE.
Antes que nada deberías validar tu código,
html: validator.w3.org
css: http://jigsaw.w3.org/css-validator/validator-uri.html

por lo demás, sí, es correcto poner clear:both para tirar abajo una caja.

a las imágenes es conveniente darles las dimensiones, si vas a usar css quizás quieras hacer algo como:
<img id="imagenZZZ" ... >

y en el css

#imagenZZZ {
width : XXpx;
height : XXpx;
}



Saludos.

alvlin, lo primero, gracias por tu ayuda!

El css parece que está correcto, ya lo pasé por el validador como me dijiste.

Sobre lo de la caja "pie" me comentas que es correcto lo del clear, pero por que es necesario ponerlo si al tener un width:"760px" se supone, o supongo yo, que ya se tendría que ir hacia abajo??

Y lo que me momento más me preocupa porque no me funciona, lo del div="contenido" que en Firefox no se situa donde yo quiero, que es lo que tengo que modificar?

Un saludo

[mateamargo]

Tanto en FireFox como en Opera el color de fondo de #contenido no llega hasta el pie (como sí ocurre en IE). Esto es porque al defenir como flotantes a #col-1 y #col-2 se salen del bloque que crea el div #contenido, por ende ya no forman parte de él. Una solución sería sacarles esa propiedad y jugar con "display:inline-block", para que se muestren uno al lado del otro, aunque deberías testearlo en los tres navegadores, ya que Opera soporta por completo CSS 2.1, mientras que FF sólo un poco e IE ni lo soporta.

Saludos.

[Jorolo]

Hola a todos, hola mateamargo.

Iniciado por mateamargo

Opera soporta por completo CSS 2.1, mientras que FF sólo un poco e IE ni lo soporta.

Esto no es exactamente así.

Una aproximación al tema.

[mateamargo]

Iniciado por Jorolo

Hola a todos, hola mateamargo.



Esto no es exactamente así.

En realidad me refería a la versión 9. Anda dando vueltas una versión beta muy buena.

[bulldog]

Bueno, pues después de solucionar otros problemas que tenía por ahí, todavía me quedan varios, de momento lo más gordo que veo es lo de las columnas, que no consigo arreglar. Como os comenté el problema está al visionar la página con firefox, que no consigo que el color de fondo de #contenido abarque a la foto de la derecha y a las otras 2 columnas, he probado a quitar los float, a poner display:inline, block,... pero no hay manera, ya que si quitaba algún float el color de fondo se visionaba correctamente pero la columna se me descolocaba.

Alguna idea??

[F3rran]

A ver si a alguien se le ocurre algo, me pasa igual con el problema del fondo en el div contenedor

[kazafun]

Iniciado por bulldog

Bueno, pues después de solucionar otros problemas que tenía por ahí, todavía me quedan varios, de momento lo más gordo que veo es lo de las columnas, que no consigo arreglar. Como os comenté el problema está al visionar la página con firefox, que no consigo que el color de fondo de #contenido abarque a la foto de la derecha y a las otras 2 columnas, he probado a quitar los float, a poner display:inline, block,... pero no hay manera, ya que si quitaba algún float el color de fondo se visionaba correctamente pero la columna se me descolocaba.

Alguna idea??

Prueba a ponerle a contenedor:
overflow:hidden;

[bulldog]

Iniciado por kazafun

Prueba a ponerle a contenedor:
overflow:hidden;

No ha resultado!

[webosiris]

creo que se soluciona poniendo:

Código:

<br style="clear:both" />

justo antres del cierre del contenedor...

[acrego]

me sucede lo mismo.

[bulldog]

Iniciado por webosiris

creo que se soluciona poniendo:

Código:

<br style="clear:both" />

justo antres del cierre del contenedor...

Muchas gracias webosiris, lo he solucionado con un br con clear:both, solo que colocándolo justo antes de cerrar el div id=#contenido.

La teoría de que esto funcione cual es? Porque lo que más me interesa es aprender por que esto es así.

[Jorolo]

hola bulldog.

Iniciado por bulldog

La teoría de que esto funcione cual es? Porque lo que más me interesa es aprender por que esto es así.

http://www.sidar.org/recur/desdi/tra...s/visuren.html

[levhita]

Antes que nada, me gusta tu diseño, limpio, clasico, con muchas fotos ligeras, bien por ti.

Me voy a permitir recomendarte un flujo de trabajo, para que te sea más sencillo tu desarrollo y tengas menos problemas con los navegadores.

Bajate el CSSVista, con ese puede ir depurando tu CSS con una preview en vivo de como se ve en Firefox e IE, bastante util.

Segundo, Hay dos modos en los que trabajan los navegadores quirksmode y strinct mode.

Trata siempre de trabajar en modo estricto, de esa manera toda la documentación de la W3C "debe" de funcionar justo como lo dice la especificación.

Mas detalles: http://www.quirksmode.org/css/quirksmode.html

Trata de hacer tu página con CSS y XHTML válido completamente, y no lo tomes como algo con lo que hay que cumplir, tómalo como tu mejor amigo.

Esto es porque la documentación de la w3c es de la más completa que he visto, así que tienes una referencia gratuita y exageramente buena, y además el validador de XHTML te sirve como una especie de compilador que encuentra tus errores y te da consejos al respecto. Estas dos cosas te ayudarán muchisimo.

La w3c no lo sabe todo, muchas veces hay cosas que los navegadores no hacen bien, y es porque simplemente no tienen bien implementada tal o cual cosa.

En estos casos meteté a http://www.quirksmode.org/ y aprende todo lo que puedas de esa página, incluso tiene tablas de comparación que te dicen que cosas tiene y que no tiene implementadas un navegador.

El Firefox es la onda para desarollo, en especial con su webDeveloper toolbar, me permito recomendarte un tutorial que hice acerca de como usar el Firefox a tu favor, así te daras una idea de como trabajar con él.

http://blog.levhita.net/2006/01/25/f...esarrollo-css/

Espero todo esto te sirva para desarrollar más facilmente y recuerda cuando desarrollas en base a los estándares es más fácil asegurar la compatiblidad de tu código, y lo que no sea compatilbe(cheka quirksmode.org) simplemente no lo uses.