ancho de capas con CSS
Ya hace tiempo hablábamos de cómo en diseño web, las tablas habían dejado paso a las capas, pues bien, uno de los problemas más habituales a los que nos enfrentamos es el poder controlar el ancho justo de una capa, ya que son varias las etiquetas que hacen que este ancho se vea alterado.
Quizás sea un tema demasiado obvio para la mayoría, pero dado que he tenido varios mails preguntándome por este aspecto, he decidido hacer un post para aclarar ideas.
Es frecuente si no conocemos bien las CSS, ver cómo a pesar de marcar el ancho con un width de una etiqueta <div>, este se ve alterado al meter los padding, margin, …
Esta es la explicación, de lo que sucede en estos casos. El ancho total de una capa, es igual a la suma del padding-left + padding-right + border-left + border-right + width Quizás sobre la explicación, pero ahí va:
- margin – es el espacio que dejamos fuera de la capa, a partir del cual comenzamos a pintar nuestra capa.
- padding – es el espacio interno a la capa, el que hará que se definan los márgenes dentro de la capa.
Aunque por defecto se supone que los navegadores leen como valor cero, el no declarar las etiquetas padding, border o margin, (padding: 0px; margin: 0px; border; 0px). Yo, para no tener problemas con los navegadores, coloco los bloques «contenedores» con sus propiedades a cero y luego dentro de ellos coloco otro div que tenga los padding, margin,.. que necesite para la maquetación. Normalmente comienzo a maquetar con el photoshop abierto. Mido los contenedores en el psd y los voy formando en el Html. Al dejar los «contenedores» sin bordes ni espacios, consigo encuadrar toda la web, y que se vea exactamente igual tanto en Explorer como en Firefox o cualquier otro navegador. En todo caso es conveniente siempre que estamos montando un Html, ir probando los avances, al menos, en Explorer y Firefox. POST RELACIONADOS:
A mi me sucede algo parecido, en todos los proyectos que he hecho he tenido problemas enormes encuanto a la guerra de navegadores especialmente cuando se trata de margin y padding, y al final acababa quitando el div y trabajando con simples tablas… Muy bueno el post, tienes un leyente diario mas.
Tomo nota Gabriel, el próximo post intentaré que sea relacionado con este tema, que además me parece muy interesante.
Muchas gracias por tus comentarios.
Hola:
Interesante tu post, gracias por compartir informacion y datos que son muy utiles para quienes diseñamos una web. Llevo ya hace un par de años mas o menos siguiendo tu blog.
Bueno te escribo por que tengo una duda enorme.
Resulta que estoy haciendo una web, es un sitio de algo mas de 50 paginas y llevo hace poco implimentando o migrando hacia CSS. No conozco mucho sobre el tema.
He hecho una hoja de estilo por cada navegador de los mas importantes o conocidos y otra «general» para el resto de navegadores.
Resulta que ya en solo la hoja de estilo de IE7 llevo casi 2000 lineas de codigo CSS. Concretamente quiero es saber si es perjudicial o contraproducente que el archivo CSS sea muy extenso, muy grande, pesado (YA VA EN 38KB) y como podria perjudicar a la pagina en cualquier sentido. CREO que se afecta la carga, pero es algo que no estoy seguro.
Y en esas casi de 2000 lineas de codigo solo esta el codigo del contenido de 16 paginas y el esqueleto o plantilla que se usa en general.
Como te digo tengo una hoja de estilo por cada navegador.
Tengo para IE6, IE7, FF, Opera, Safari, y otra general para el resto de navegadores.
(Sin contar con que me hace falta hacer la de IE8).
Por favor agradezco la aclaracion que me puedas facilitar acerca de estas dudas.
Y si quizas es probable que las dudas y la informacion sean suficientes como para publicar un post, seria fabuloso ya que igual serviria de mucha ayudaa personas que quizas estan como en mi caso o que tal vez quieran empezar en CSS.
Muchas gracias