Foros del Web » Creando para Internet » CSS »

empezando con xhtml y css

Estas en el tema de empezando con xhtml y css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/01/2006, 07:31
 
Fecha de Ingreso: enero-2003
Mensajes: 330
Antigüedad: 14 años, 10 meses
Puntos: 0
Pregunta empezando con xhtml y css

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!
  #2 (permalink)  
Antiguo 24/01/2006, 09:37
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #3 (permalink)  
Antiguo 25/01/2006, 03:25
 
Fecha de Ingreso: enero-2003
Mensajes: 330
Antigüedad: 14 años, 10 meses
Puntos: 0
Cita:
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
  #4 (permalink)  
Antiguo 25/01/2006, 12:06
Avatar de mateamargo  
Fecha de Ingreso: enero-2006
Mensajes: 13
Antigüedad: 11 años, 10 meses
Puntos: 0
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.
  #5 (permalink)  
Antiguo 25/01/2006, 12:37
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos, hola mateamargo.

Cita:
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.
  #6 (permalink)  
Antiguo 25/01/2006, 12:57
Avatar de mateamargo  
Fecha de Ingreso: enero-2006
Mensajes: 13
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
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.
  #7 (permalink)  
Antiguo 29/01/2006, 14:24
 
Fecha de Ingreso: enero-2003
Mensajes: 330
Antigüedad: 14 años, 10 meses
Puntos: 0
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??
  #8 (permalink)  
Antiguo 29/01/2006, 16:07
 
Fecha de Ingreso: noviembre-2005
Mensajes: 21
Antigüedad: 12 años
Puntos: 0
A ver si a alguien se le ocurre algo, me pasa igual con el problema del fondo en el div contenedor
  #9 (permalink)  
Antiguo 30/01/2006, 03:40
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Cita:
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;
  #10 (permalink)  
Antiguo 30/01/2006, 15:50
 
Fecha de Ingreso: enero-2003
Mensajes: 330
Antigüedad: 14 años, 10 meses
Puntos: 0
Cita:
Iniciado por kazafun
Prueba a ponerle a contenedor:
overflow:hidden;
No ha resultado!
  #11 (permalink)  
Antiguo 30/01/2006, 16:07
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
creo que se soluciona poniendo:
Código:
<br style="clear:both" />
justo antres del cierre del contenedor...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #12 (permalink)  
Antiguo 01/02/2006, 02:13
 
Fecha de Ingreso: abril-2005
Ubicación: Santiago Compostela
Mensajes: 213
Antigüedad: 12 años, 7 meses
Puntos: 0
me sucede lo mismo.
  #13 (permalink)  
Antiguo 04/02/2006, 04:56
 
Fecha de Ingreso: enero-2003
Mensajes: 330
Antigüedad: 14 años, 10 meses
Puntos: 0
Cita:
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í.
  #14 (permalink)  
Antiguo 04/02/2006, 08:11
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
hola bulldog.

Cita:
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
  #15 (permalink)  
Antiguo 04/02/2006, 19:12
Avatar de levhita  
Fecha de Ingreso: febrero-2006
Ubicación: Guadalajara, México
Mensajes: 88
Antigüedad: 11 años, 10 meses
Puntos: 0
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.
__________________
"La libertad viene en paquetes pequeños, usualmente TCP/IP"
http://blog.levhita.net/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:24.