Maquetar una página con CSS V

  • Por
  • CSS
Para acabar, vamos a crear un pie de página y un borde enmarque la página. Ofreceremos también unas conclusiones del ejercicio.

Apuntaremos los últimos retoques en el diseño de la página con CSS para finalizar el taller de maquetación con CSS. Se puede ver la primera parte del artículo.

Pie de la página

Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral "flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el container.

No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido hasta el momento en la plantilla en Firefox o Mozilla. Veremos que el fondo blanco no está continuado hacia abajo.

<div id="pie"> 
Pruebas de maquetación CSS © 2005 DesarrolloWeb.com 
</div>

Esta capa tiene el siguiente estilo definido:

#pie{ 
clear : both; 
color : #cccccc; 
text-align : right; 
margin : 10px 10px 0px 10px; 
padding-bottom:10px; 
}

Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo y lateral.

Luego se define un color para el texto una alineación de texto, unos márgenes y un margen interno por la parte de debajo de 10 pixel.

El borde externo

El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para la capa contenedor el atributo border, de la siguiente manera.

#contenedor{ 
text-align: left; 
border: 2px solid #cccccc; 
width: 700px; 
margin: auto; 
background-color : #ffffff; 
}

En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional, aparte del que se haya asignado a la capa en si.

Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle solución sin tener que romperse la cabeza.

Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va a tener el estilo de borde definido.

<div id="borde"> 
<div id="contenedor"> 
.... contenido de toda la página 
</div> 
</div>

Para conseguir el borde se han definido el siguiente estilo para la capa borde.

#borde{ 
border: 2px solid #cccccc; 
text-align: left; 
width: 700px; 
margin: auto; 
}

Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen "auto" para que Mozilla y otros navegadores centren la capa.

El resultado final del ejercicio se puede ver en una página aparte. Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.

Conclusión

Hemos visto cómo maquetar una página utilizando CSS paso a paso. Esperamos que hayáis podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con CSS para la maquetación es una tarea fácil, pero también es muy sencillo encontrarnos con escollos o problemas misteriosos que no parecen tener respuesta.

Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox, Netscape, Opera y Explorer.

Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el diseño. En este caso habrán pocas cosas que cambiar, mientras que si diseñamos para Explorer y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque nada esté en su sitio.

La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se torna mucho más sencillo, potente y rápido de desarrollar.

Resultado final del ejercicio.

Nota: Si te interesa obtener nuevas explicaciones prácticas sobre maquetación CSS te recomendamos ver los vídeos: Introducción a la maquetación con CSS y la Práctica de Maquetación CSS. Ambos videotutoriales te seguirán ayudando con nuevos ejemplos útiles para dominar estas técnicas.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

joaquin

25/2/2005
Quiero felicitaros por tan buen articulo. Yo he estado programando algunos sitios web (no profesionales) y el problema de la maquetación y que aparezcan todas las cosas en su sitio siempre me ha traido de los nervios. Ahora algunas cosas me han quedado mucho más claras. Un gran trabajo muchachos. Enhorabuena.

Carlos

27/2/2005
Enhorabuena por el artículo. Me ha resultado muy útil.
Quería comentar, que en Opera no se ve el borde derecho. Yo lo he solucionado añadiendo 2px más que al contenedor, a la clase borde.Si el contenedor tiene 700px, el borde 702px. No se si es la mejor solución pero funciona.

Cesar

03/3/2005
Excelente manual, felicitaciones me esta sirviendo de mucho con respecto al maketeado de las webs, ya ke tenia muchos lios para mostrar una web bien puesta en todos los navegadores y con esto lo he solucionado.

Hugo

02/4/2005
Excelente paso a paso para utilización de capas con css, muchas gracias.

jaime

06/4/2005
Gran ejercicio, muy clarito y fácil de seguir. Gracias.

Ageo

20/4/2005
Excelente tutorial para novatos y avanzados. Había estado buscando tutoriales de css y layouts y me pareció excelente el suyo. Gracias!

Claudia

06/5/2005
Los felicito por este artículo. Tiene la facilidad para el desarrollador de ver claramente donde y como utilizar lo expuesto en el taller

Nacho

20/5/2005
BUEN TALLER GRACIAS

Angel

04/7/2005
Muy bueno este tutorial , me ha servido de mucho para crear una pagina.

Ahora lo unico que qy-uisiera saber es como meter un border igual al rededor de toda la página pero que este este redondeado de las esquinas como el de esta web.

muchas gracias.
y sigan igual.

IdEm

25/7/2005
Antes que nada, quiero darles las gracias a los autores de esta web, ya que me he basado la mayoria de las veeces en sus tutoriales para poder realizar mis páginas, actualmente trabajo para SCo méxico, en el desarrollo de su página web, tambien he hecho otros proyectos y recientemente he armado una página llamada undermusick, esta cabe destacar que fue hecha en su totalidad con CSS, y esto no hubiera sido posible sin su gran tutorial de maquetacion de páginas con css.

esta es mi URL para que puedan ver el trabajo que realizé, espero y les guste.
http://undermusick.host.sk

kurantoz

27/7/2005
Gran manual. Claro, conciso y con casi todos los casos posibles de maquetación con CSS. En definitiva, esencial.

leny

15/11/2005
Muy bien, genial!! ...pero ahora como se haria para ke al clicar en un enlace del menu cambiara el contenido del cuerpo???? Si estuviera hecho con frames se enlazaria otro fichero al frame del cuerpo...pero aki como lo consigues??? poniendo en cada fichero el codigo del menu, del navegador y de todo ke no kieres ke desaparezca???

Pepe

18/11/2005
Felicitaciones por el excelente tutorial. Me fue de mucha utilidad. Muchas Gracias!!!

Rodrigo Luna

31/1/2006
De pelos el articulo. He recomendado mucho esta pagina pare personas autodidactas que desean entrar a este pedo. Trabajo en tvazteca.com y todito.com y gracias a muchos de sus contenidos he aprendido a sacar cosas bastante interesasntes. Felicidades

Alberto Corella

16/2/2006
Se puede conseguir que se vea bien en IE, Firefox y Opera sin necesidad de añadir un "pié" a la página. La solución es NO emplear elementos flotantes.
Estos son los cambios que hay que hacer:
1. Quitar el "pie" (no va a hacer falta)
2. En #contenedor añadir "position: relative"
3. En #cuerpo suprimir "float: left"
4. En #lateral suprimir "float: right" y añadir: "position: absolute", "top: 129px" y "right: 0px"

Al no usar los elementos flotantes, la capa "contenedor" crece para abarcar a "cuerpo" y "lateral".

Juan Antonio

07/7/2006
Exelente manual, solo me gustaria saber si tienen algun otro manual ahora para cuando doy click en alguna opcion del menu solo se actualize la parte del cuerpo. o como se le podria llamar a eso, Saludos!!!

Michel

27/9/2006
Gracias por el artículo es justo lo que estaba buscando.Felicidades por la pagina.

Ricky

30/9/2006
Hola, excelente tutorial, yo tenia problemas con Firefox y esa zona sin color, pero veo que en esta ultima seccion lo solucionaron.. chevere y muchas gracias por la ayuda desinteresada.

Idrix Villarreal

26/10/2006
Excelente manual la verdad hace resto que estaba buscando en la web algo similar los felicito y tendre muy en cuenta sus recomendaciones para mis futuros diseños.

Ana

27/10/2006
Quiero agradecer al autor de este articulo por lo util que me ha sido el ejemplo planteado. Considero que con un articulo tan sencilo y claro me ha ayudado a tener una vision general de css.

Hymake

03/11/2006
Me encantó. Muchísimas gracias. Yo siempre quise hacer una Web, y gracias a usted(es) pude lograr la primera, y me quedó bastante bien. Muchas gracias por sus tutoriales, sobretodo este :D

aire

26/11/2006
Muy bueno el artículo, me ha ayudado mucho pero ahora estoy intentando que se vea en IE6.
Seguí el artículo maquetando para Firefox y luego me llevé el chasco. El caso, es que cuando arreglé el código para que se viese en IE6 sobre W2000, y lo llevé a otro pc con IE6 sobre WinXP, resultó que no mostraba el flash que si se veis en el W2000.
¿Sabeis por qué puede ser?
Gracias anticipadamente.

Andres

31/12/2006
Felicitaciones muy buen tutorial, creo que debería añadirse que el último truco del borde es necesario sólo para IE5, pues en IE6 y supongo que IE7, el error se muestra sólo cuando el navegador está en quirk mode, es decir en un modo de compatibilidad en el que trata de que las páginas que se hicieron para IE5 funcionen. Para que los navegadores se comporten de acuerdo a los estandares es necesario colocar en el HTML como primera línea: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Si quieren leer más sobre esto: http://es.wikipedia.org/wiki/Quirks_Mode

Aikman

16/2/2007
Muy buen articulo amigo..

Me ha servido de mucho. Gracias

Pako

23/8/2007
Me parece un artículo estupendo, interesante por el contenido y ameno y didáctico por la exposición.

Muchísimas gracias porque me está sirviendo mucho.

Un saludo.

David

03/10/2008
Excelente articulo. Mucha gracias!!

juan

29/10/2008
esta buenisimo el manual yo estoy empezando con html y css y pues estoy emocionado con ese resultado que se obtiene. Felcidades

solo queria pedirte un favor si no es mucho pedir claro, como se hacen los enlaces del menu de tal manera que el link lo muestre en la parte que tiene el contenido.
No se si me explico lo que quiero es que cada una de las opcines al clicarlas las muestre en la misma pagina en la que muestra el contenido y todo lo demas siga como esta si puedes publicar el trozo de codigo y donde se acomoda estaria super gracias

Nirvancra

23/6/2009
Por que en el navegador de opera se Mal
En ie se be bien, pero la hacer la prueba en opera nada los div se mueven y no aprecen donde debrian

Jesís

24/6/2009
Mu bueno
Muchas gracias por el desarrollo fan´tastico que le daís a vuestra página!

saludoss!!!

agustina_betolaza

04/8/2009
Maquetar con CSS
Muy bueno útil este artículo!
Gracias por darlo a conocer.
Agustina (Argentina)

El-Mito

14/8/2009
Excelente
quiero felicitarlos...es un W muy didáctico y práctico, realmente se merecen 10 puntazos...
Lima-Perú

Jim

04/9/2009
Excelente tuto
Muy bueno felicitaciones, y gracias por aportar tus conocimientos:)

Ana

12/11/2009
Articulo muy bueno
Quiero daros las gracías por el articulo de maquetacion, me parece buenisimo, muy claro y de gran utilidad.
Igualmente daros las gracias por toda la informacion que mostrais en el resto de apartados

Nico

16/12/2009
Muchas Gracias
Me sirvió muchisimo la clase!!!!
muchas muchas gracias ya con eso creo que estoy listo para hacer todos mis diseños con hojas de estilo en cascadas. Por cierto, me guíe de este ejemplo para hacer una de mis plantillas para Joomla 1.5

Hasta luego

Oscar Pino

23/2/2010
Duda
Excelente tutorial.

He estado practicando con este ejemplo pero no he podido ubicar una tabla de 15 columnas dentro del cuerpo. El problema es que sobrepasa el margen.

¿Cómo hago para que el cuerpo se adapte al tamaño de la tabla para que no se sobrepase?

Gracias

mags

11/3/2010
Dudaaa!!!
Hola! y primeramente felicitaros por este gran tutorial! Resulta que soy nuevo en esto
de las CSS y de lo que se refiere a web.Y me gustaria saber de que modo se le puede dar funcionalidad a este ejemplo de maquetacion.Es decir al darle a cualquier enlace,como se podría hacer para mantener la cabecera y el menu lateral y que solo cambiase el cuerpo,sin tener que copiar lo mismo en otra pagina(la cabecera y el menu lateral) Muchas gracias con antelación! y espero haberme explicado bien! :)

currante

15/3/2010
Muy bueno!!!
Felicidades por tener una página tan útil y bien detallada. ...

Quiero hacer mi pequeña aportación en el problema que se ha presentado al poner el borde de 2px en IE.

La solución que le he dado es cambiar el ancho de la imagen de la cabecera de 700px a 100%. Así se adapta a IE o Mozilla, ya que esa imagen era la que provocaba el margen blanco que se veía a la derecha.

midesweb

26/4/2010
respuesta a mags sobre página funcional
Hola "mags",

En general, para hacer funcional el sitio, deberías crear varias páginas (en las que repetirías parte del código de esta página, para generar la plantilla) y luego las enlazarías con enlaces HTML entre ellas. Eso no debería ser difícil si tienes conocimientos HTML.

Ahora bien tu pregunta parece que está enfocada a hacer un dinamismo especial, que pulsando los enlaces se actualizase el cuerpo de la página sin cambiar la cabecera, pie y esas cosas de la plantilla.

Esto lo podrías hacer con HTML, si pones el cuerpo en un IFRAME y con los enlaces actualizas el contenido de ese IFRAME, a través del atributo target de los enlaces, dirigiéndolos al name del IFRAME. (Mira la documentación sobre FRAMES que tenemos en el manual de HTML)

La otra forma de hacer esto es con Javascript y Ajax y está explicada por varios sitios de DesarrolloWeb.com, en los que hablamos sobre Ajax. Te recomiendo buscar por Ajax en nuestro buscador interno para enterarte sobre la tecnología y leer estos artículos con talleres que serían una aproximación al sistema concreto que quieres construir:

http://www.desarrolloweb.com/articulos/interfaz-navegacion-pestanas-ajax-php.html

http://www.desarrolloweb.com/articulos/pestanas-dinamicas-css-mootools.html

david_guerra-67194

11/5/2010
Agradecimientos
Primero que nada Bendiciones por su grandiosa labor y desinteres al publicar este excelente material, que nos permite a muchos encontrar un poco de luz en nuestro afan de aprender algo nuevo. muchas gracias por sus excelentes tutoriales.

Yeuss

26/7/2010
Gracias!
Es un excelente tutorial , detallado y facil de seguir

josue

31/7/2010
Gracias
Que buen aporte, muy interesante, comprendi mejor el uso de css...Graciiiias!!!

Toni

15/9/2011
Enhorabuena
He leído los 5 artículos de "Maquetar una pagina con CSS" y me he quedado gratamente sorprendido.

Esta muy bien explicado, paso a paso, y pensado para que el usuario pueda intentarlo por su cuenta.

Un 10!!!!

Saludos.

Alfonso

17/1/2012
Colocación elementos
Primero daros la enhorabuena por la web y en particular por este artículo que ha sido muy útil para mi. Sólo hay dos cosas que no me salen exactamente igual en la página, aún siguiendo punto por punto vuestras indicaciones y paámetros. Son el botón "buscar" o "go" que me sale a la derecha pero debajo del cajetín de introducción del texto. Lo otro que no resulta lo mismo es el márgen de los enlaces de la lista de "otras informaciones", que me aparecen un poco más desplazados a la derecha. Ninguna de los dos problemas he podido resolverlos cambiando padding.
gracias y enhorabuena de nuevo

Will

17/12/2012
Excelente tutorial
El titulo lo dice todo, no hay nada más que decir. Felicitaciones por un muy buen trabajo.

Alejandro

12/4/2013
Sombra en float
Hola! estoy en desarrollo de un sitio web implementando todo este conocimiento que ustedes me han ayudado a obtener, pero ahora me resulta un detalle, y es que cuando le pongo sombra al contenedor, todo bien, hasta qué hago un float, aun estando dentro del contenedor, no le aplica la sombra al float!

de antman agradesco el apoyo, muchas Gracias!

Diana

20/11/2013
¡¡Gracias!!
En verdad es un artículo de gran ayuda. Entendible.

laika

22/3/2014
Gracias, fue perfecto.
Han pasado varios años desde que escribieron este articulo y aun es tan util para los principiantes en css de hoy. Hize el ejercicio y todo fue muy bien. Yo pienso que hoy en dia, 2014, ya los buscadores se pusieron deacuerdo en muchas cosas. En mi codigo no use el #borde. A principio escribi el codigo pero este sse duplicaba con el border #contenedor. Asi que omite el codigo.

Mil gracias a todos y por las miles de horas aplicadas a ayudarnos.