Antes de empezar a construir tu plantilla basada en CSS debes decidir que navegadores soportará y hasta que nivel pretendes que los soporte. Para ayudar a decidirte habla con clientes, usuarios tipo y examina ficheros log existentes si estuvieran disponibles.
Hay tres niveles básicos de navegadores que soportan CSS:
1. Navegadores antiguos
Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc
2. Navegadores [...]
Para colocar los elementos en la página, es necesario establecer la totalidad de los contenedores. Mira nuestro diseño (el cual podría ser un prototipo digital, un boceto en papel o incluso una plantilla/web existente) y resuelve los contenedores principales de la página.
Prototipo de ejemplo con contenedores
Estos contenedores se convertirán en los elementos principale del <div> que soportarán tu contenido, así que dales nombres que tengan un significado semántico en vez de nombres que describan su apariencia. Para este ejemplo los contenedores principales se llamarán:
container
header
mainnav
menu
contents
footer
Si los contenedores son únicos para una página, utiliza IDs en vez de clases. Esto puede ser [...]
Crea algunos elementos <div> vacíos para mostrar estos contenedores. Por ejemplo:
<div id=”container”>
<div id=”header”></div>
<div id=”mainnav”></div>
<div id=”menu”></div>
<div id=”contents”></div>
<div id=”footer”></div>
</div>
Una nota sobre los tipos de documento
Asegurate de que eres consciente de los tipos de documento (doctype) que estás utilizando, pues esto afectará al modo en que los navegadores mostrarán la plantilla. No tienes porque usar el modo [...]
Observa tu diseño y decide como posicionar cada uno de los contenedores.
¿La plantilla será liquida (liquid), de ancho fijo (fixed-width), con em (em-driven) o una combinación de las anteriores?
¿La plantilla estará centrada (centered) en la página?
¿Que contenedores necesitan ser flotantes (floated)?
¿Que contenedores estarán en un flujo normal (normal flow)?
¿Necesitas utilizar colocación absoluta (absolute)?
Este es probablemente [...]
Ahora hay que aplicar estilo a estos contenedores principales con un método de colocación. Para que sea mas fácil ver como interactúan los contenedores, a cada uno de ellos se le dará un color de fondo y altura distintos – y puestos en cajas de colores. Es importante, particularmente cuando estás tratando con una plantilla [...]
Cuando se han colocado correctamente los contenedores y se muestran correctamente en todos los navegadores, ya pueden quitarse las alturas. A continuación se puede colocar algo de texto de muestra en cada contenedor. El contenido debería ser semánticamente correcto – o sea, utilizar h1, h2 etc. para los encabezados, párrafo para el texto, etc. Una [...]
Si tienes los contenedores en la posición correcta y el contenido se está comportando aceptablemente, puedes empezar a aplicar estilo al contenido de los contenedores.
IDs y Clases
Utiliza cuantos menos IDs y clases como sea posible. Deberías ser capaz de aplicar estilo a casi cualquier elemento dentro de un contenedor utilizando selectores descendentes. Por ejemplo:
#header [...]