5 Consejos para la codificación de XHTML / CSS diseños de

Estos son algunos consejos que me han ayudado en la transición de la mesa de diseño basado en web a las normas compatibles con diseños basados en CSS.

1) Lea Thenoodleincident's rant diseño.
Éste es el artículo que finalmente se hizo 'clic' en mi cabeza sobre el uso de CSS para los diseños, sino que explica de manera clara y en profundidad sobre la filosofía de separar el estilo del contenido.

2) No sobre-complicar diseños
Usar las imágenes más grandes con más detalle en como fondo y establecer divs transparente en la parte superior - de esta manera le da más espacio para las incompatibilidades de navegador y otras peculiaridades que usted aprenderá a reconocer y / o evitar en el futuro.

3) No ir div loco!
Usted no es volver a crear diseños de tabla con divs, usted no necesita un div diferente para cada área - puede, por ejemplo, el uso de otros elementos para conseguir su efecto deseado. Es decir, se puede colocar y los párrafos estilo y otros elementos de página - que no siempre tiene que ser un div!

4) La semántica - ¿cómo deben hacerse las cosas
Esto es algo extremadamente importante para la estructura de su html, utilice siempre los elementos correctos HTML - si es una lista de las cosas, que marca como una lista - lo que incluye la navegación. Si sus pares de las cosas, utilizar una lista de definición - no se preocupe, recuerde lo que la lista de definición por defecto parece - puede que el estilo de cómo lo desea, usted sería sorprendido en los efectos que puede obtener. Utilice las cabeceras (H1, H2, etc) correctamente - no sólo aplicar un estilo de negrita a texto normal, marcarlo como un encabezado y un estilo que en el CSS.

Browser check 5) a medida que avanza.
En lugar de crear su diseño de conjunto, a continuación, comprobar y encontrar que su perra en una o más de los navegadores, que luego se fijan y se rompe en otra cosa. Crear la sección de encabezado, el navegador de verificación y arreglarlo todo lo que está mal. A continuación, cree la navegación, hacer lo mismo. Cree el cuerpo, hacer lo mismo. Dividiéndola así usted no tenga que recorrer un montón de código y estilos para encontrar el problema. Piense en pedazos manejables.

Si te gusto este Dig it!