Centrando con CSS

Utilizar tablas es cosa del pasado. Es necesario migrar nuestros sitios a estándares XHTML y CSS. El primer reto será centrar nuestros contenidos correctamente

Como es conocido, una parte importante del proceso de adaptación a los estándares XHTML consiste en el uso de los elementos HTML con propiedad. Aunque esta afirmación parece simple y razonable en teoría, quizás sea una de las más difíciles de aceptar en la práctica, sobre todo desde el momento en que consideramos que representa el abandono de lo que es la tradicional forma de ‘maquetación’: el uso del elemento TABLE para posicionamiento. No, no el "posicionamiento" en los motores de búsqueda, si no la forma en la que se colocan los elementos en la página.

No es fácil "des-acostumbrarse" a trabajar con TABLE cuando durante mucho tiempo se ha hecho.

La vieja escuela

El procedimiento habitual para muchos desarrolladores(y me incluyo) ha sido siempre trabajar sobre el archivo PSD que un diseñador trabajó hasta tener el visto bueno del cliente. En el PSD se solían poner varios elementos gráficos y luego se ‘cortaba’ mediante líneas guía y layers. El resultado final era: Una página en HTML donde todo se encontraba dividido en una TABLE con múltiples celdas ( TR y TD) y, además, el uso de varios G IFs de un píxel para ajustar posiciones.

Por otra parte, la recomendación habitual en los estándares XHTML es que el uso de TABLE se realice solamente para la presentación de datos ordenados, no para posicionar la información.

Un ejemplo correcto de lo que es uso de TABLE de acuerdo a dicha definición:

Code Zip Número
1 2 3
4 5 6
7 8 9

en el que se usa TABLE para mostrar información en forma consistente, no para posicionar objetos.

Migrando hacia estándares

Ya que nos ha quedado claro que no debemos utilizar tablas para darle formato a nuestra página, viene ajustarnos a los estándares y al uso de hojas de estilo.

La primera solución consiste en implementar el uso de DIVs para posicionar los objetos.El ‘truco’ consiste en tomar los objetos, agruparlos en bloque y luego contener cada bloque en un DIV. Usando C SS se puede definir el posicionamiento de un bloque y señalar el lugar que tomarán en la página usando los elementos de CSS.

Ver ejemplo de página centrada con CSS. Ver la hoja de estilo CSS utilizada en dicha página para experimentar sobre el tema

En este caso usamos width para darle un ancho a un bloque DIV. Para que no nos quede el texto muy pegado, usamos margin. Si quiero que el texto vaya a la izquierda, uso float: left o float: right para enviarlo a la derecha.

Si ven el código fuente de esta página se darán cuenta de lo intuitivo y simple que es posicionar objetos de ese modo. Como hay una especie de "herencia" entre DIVs, basta con que yo defina algunos atributos "genéricos" como font-family, font-size, font-weight y color para que sean usados en los DIVs internos y con ello nos ahorramos algo de texto. Si ven el código fuente de esa página verán que estoy tratando de usar el mínimo de HTML. Pero, hago constar, esto todavía no es XHTML

Eso es todo por ahora. Una vez que tengamos claro este concepto de CSS y cómo no usar TABLE estaremos listos para continuar con otros temas relacionados a la estandarización.

Luis Miguel Caballero
Desarrollador web. Más información de su trabajo en mickel.biz
Jesusguevarautomotri
22/01/2006

Hola Luis, estoy trabajando en mi pagina web y lei tu articulo y me anime a hacerla como tu indicas, puedes ver el resultado en:

Direccion: es.geocities.com/jesusguevarautomotriz/

Mi preguntas son las siguientes:
1. ¿hasta que punto debo usar CCS para dar formato a una pagina?

Por ejemplo, el control de el ancho de los bloques div con estilos seria una locura, tendria que crear un estilo para cada bloque que quisiera colocar en el sitio, no solo en la pagina principal y ¿si debo hacerlo de esta manera es valido?.

Que opinas creo un estilo para cada cuadro que tenga un ancho diferente o se lo especifico dentro del codigo html de la pagina.

2. ¿Como puedo corregir el defecto que tienen las etiquetas DIV al seleccionar texto en una pagina web?

No soy experto, soy un aprendiz, si pudiras explicar en forma sencilla te lo agradezco, tampoco uses regionalismos de tu pais porque puede ser mas dificil entenderte. Gracias.
Jesus Guevara – [email protected]

rodo1968
24/01/2006

Ojo!, no siempre es mejor utilizar etiquetas CCS para todo!, yo sé que es práctico y está de moda, pero no siempre es la mejor solucion.
Saludos!

Mickel
25/01/2006

Bueno aunque se puede hacer, en principio la idea de usar CSS no es para dar ancho a un bloque. La idea de trabajar con CSS es mas bien repensar los diseños en funcion de CSS no de trabajar como haciamos con tablas e imagenes de un pixel.

Si tengo un diseño muy exacto que me ha dado un diseñador cortado con HTML seria una locura hacerlo con CSS. Lo hago con

pero en donde puedo usar divs dentro de ese cuadro lo uso.

La solucion tiene que venir desde el diseño, no solo del webmaster. El articulo lo que pretende es mostrar que, con un diseño un tanto libre, usar tablas no es una absoluta necesidad.

Jesusguevarautomotri
27/01/2006

Gracia por la respuesta Mickel y rodo; ahora diganme, ¿como se puede solucionar el problema de seleccion que tiene div?, yo quiero que los usuarios de mi pagina puedan copiar la informacion contenida en ella pero cuando voy a seleccionar, la seleccion se desordena.

Mickel
30/01/2006

Bueno en principio DIV no tiene un problema de seleccion, amigo Jesus, el problema puede estar en el navegador que usan. ¿Con que navegador y version has visto ese problema?

Jesusguevarautomotri
11/03/2006

Bueno mickel, no se como explicarlo, es con IE en cualquier version de las mas vigentes la actual y la anterior, la verdad es que la seleccion se hace de forma extraña no tan uniforme como cuando centras con tablas, por cierto. Me dijeron que mi pagina se ve mal en Mozzila y es por el uso de la etiquetas DIV. ¿Que debo hacer para que se va bien en mozzila?

Jesusguevarautomotri
25/03/2006

Mickel, hoy quise ver como se veia tu pagina “Centrada con CCSS” en Firefox porque la mia se ve mal y quiero arreglarla y no pude aparace una pagina en blanco con el siguiente mensaje; “Bandwidth Limit Exceeded. The server is temporarily unable to service your request due to the site owner reaching his/her bandwidth limit. Please try again later.”

Mickel me puedes decir porque mi pagina se ve mal en firefox? Por que si se ve bien en Internet explorer, firefox no?

Mickel
29/03/2006

Me he quedado sin ancho de banda hasta el 01.04(muchas visitas). Dame tu web para verla a ver que esta pasando…

Jesusguevarautomotri
30/03/2006

Mickel, Me he quedado sin ancho de banda hasta el 01.04(muchas visitas). Dame tu web para verla a ver que esta pasando…

Jesusguevarautomotriz: sin http, escribes en la direccion de tu navegador: “es. geocities.com / jesuguevarautomotriz” sin espacios, lo que pasa es que no todavia no tengo privilegios para postear direcciones.

Jesusguevarautomotri
8/04/2006

correcto: jesusguevarautomotriz. le faltaba una “S”

Mickel
10/04/2006

voy a revisarlo. dejo la direccion actualizada por si alguien mas quiere verlo:
http://es.geocities.com/jesusguevarautomotriz

Jesusguevarautomotri
10/04/2006

Bueno, espero tu evaluacion. gracias. :-)

Jesusguevarautomotri
19/04/2006

Hola he desistido de mi intendo por usar ccs, y cambie a uno con tablas mas adelante me estandarizare.

El ejemplo ha cambiado de direccion a:
http://es.geocities.com/jesusguevarautomotriz/centradoccs.html

Gabriela
30/08/2006

Queria comentar que unas cositas q no se han dicho en los comentarios y creo q es interesante.
Comentar que “la moda” aparente de l uso de las css, no es una simple moda, sino q da un valor añadido,ya q programando de esta forma muchas mas personas podrán acceder a las web. Ya que la programación web q habia hasta ahora dejaba de lado a gente con minusvalias que no podian entrar en las páginas por ser liosas e incomprensibles para ellos.
Solo dejar esta puntualización ;P
Por lo demas,.. muy bueno Michael, he aprendidos muchos truquillos contigo ;),.. sigue asi y gracias por la ayuda q recibimos de ti :D

Erika
7/09/2006

Hola necesito ayuda con con una pagina web. lo que sucede es que la pagina la subo a un servidor pero no sale con el formato que yo le di y cuando hay palabras con acento me arroja basura, ya intente con y en lugar DE iso tambien provee con utf-8 pero aun asi no funciona sigue viendose la pagina mal. y ya no se que pueda tener intente ponerle los acentos con codigo ASCII pero paso lo mismo. si alguien sabe como se lo agradeceria muchisisisisimo. Mi correo es [email protected] GRACIAS…

Israel
16/09/2006

me pasa lo mismo, no se ve bien con mozzila

demon
15/02/2007

est6a pagina es interesante, deberian incluir una zona de descargas….crdm 2007

el mejor de los mejore
15/02/2007

somos los mejores del mundo, aunque les duela.

ola tengo dos problemas
numero uno mi web no acepta acentos ya intente modificando a varias opciones y nada!
me podrian ayudar y numero dos segun me dicen mi pagina se ve muy mal en fire fox que puedo hacer? soy nueva en esto snif

lo que modifico es text/html; charset=utf-8 pero sigue igual

Holas Chicos!
Sé que es demasiado tarde para responder.
A mí también me pasa el problema con los acentos que no se veían en mi web, pero usé este código: Con él me funcionó, leí que el ISO es para las palabras latinas y acentuadas.
Bueno! espero que sea algo de ayuda!
Si algo está malo, porfa háganmelo saber! porfis!!

Cuidense!
Desde Venezuela

necesito contactarte, podrias darme tu mail, gracias!!

317