Bueno yo seré el primero. Seré muy extenso, así que agarra un lugar cómodo
La página la estoy visualizando en un monitor a 1024x768 px con Opera 10.0 y analizando con FireBug Lite (sí, en opera
) además de verificar los archivos manualmente, luego la pase por IE Tester para verificar que se visualizara en Internet Explorer.
Diseño
El diseño me parece bueno, los colores quedan bien con el logotipo de FDW. Quizá un poco más grande la letra en los formularios (los valores que tienen por defecto) y los botones más llamativos.
Código HTML y CSS General.
Veo que utilizas muchos wrappers, creo que con uno que fuera general te hubiera sido suficiente. En general estas usando muchos más DIVs de los que necesitas.
Recuerda que elementos de Bloque se pueden manejar como si fueran DIV's (por que también es un elemento de bloque) así que no los tienes que meter en capas.
Yo normalmente suelo usar algún reset CSS para quitar los valores por defecto de cada Navegador.
Se ve bien en IE 6, 7 y 8, solo que hay algunos espacios de más, por lo mismo de que no usas reset además de que no incluiste nada para la transparencia png en ie6.
Header
Tienes el logotipo en un DIV con background, esto tiene algunos problemas, uno es que si por alguna razón no se carga la imagen no vas a ver absolutamente nada, otra es que si se usa un navegador de texto no mostrará tampoco nada, incluso Google no encontrara nada; el logotipo vendría siendo el titulo de tu página así que no puedes permitirte que no se muestre.
Un titulo debe estar dentro de sus correspondientes etiquetas hx, que en este caso, por ser el titulo de la página debe ser h1; hay varias formas para poner correctamente el título pero yo lo hago así:
Código HTML:
Ver original<h1><a href="#"><img src="imagen.jpg" Title="Foros del Web" alt="Foros del Web" /></a></h1>
Nota que he puesto el atributo ALT, importante para que sea visualizado aún si no carga la imagen, ademas de mantener el valor semántico del h1.
El menú esta bien, excepto por que utilizaste un li para los separadores; yo lo hubiera hecho dándoles un poco más de padding a la derecha y poniéndoles un fondo alineado a la derecha, y al último quitarle el fondo. Algo así:
Código CSS:
Ver original#menu ul li {
padding: 3px 8px 3px 5px;
background: url(separador.jpg) no-repeat right bottom;
}
Veo que tienes h2 como subtitulos pero luego tienes h3 como descripción del h2, lo mejor sería el párrafo resaltando esa descripción con strong. El menú esta bien, no veo problema con ese.
En el sitio de login, olvidaste poner la etiquetas form, de hecho se me hace raro que valide y ni siquiera una advertencia muestre
En el campo de contraseña debiste ponerle type="password" el lugar de text. También usaste un div vació para separar los inputs, no era necesario ya que pudiste darle margin a cualquiera de los dos inputs (claro, dándoles su respectivo id). Usaste un enlace para el botón de login, lo correcto era un input submit. Lo mismo con el formulario de contacto.
Las imágenes de los proyectos deberían ser con etiquetas img, lo mismo en la imagen de "Indispensables" e igual aquí no era necesario el DIV vacío.
El texto principal tienes algunos spans para resaltar el texto, aquí también debería ser con strong (o quizá em si lo crees conveniente, por lo del otro párrafo en strong)
En los meses de las fechas que tienes a la derecha también pudiste a ver sustituido el span por small, aunque en este caso no es tan importante.
Footer
Aquí no hay mucho, y lo poco que hay me parece correcto, salvo lo que ya te había comentado con el menú principal (los separadores).
Conclusión
Bueno parece que no tienes mucho problema con CSS, más bien con algunas cosas de semántica y problemas menores.
Vote por un Regular.
Saludos
