Maquetar una página con CSS III

  • Por
  • CSS
Realizamos la maquetación del área del cuerpo, donde se mostrará el contenido de la página.

Este ejercicio trata de maquetar una página utilizando capas y css. La primera parte se puede ver en: Maquetar una página con CSS. <7p>

El cuerpo de la página

La parte de la página donde colocamos la información principal. Crearemos una capa independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las etiquetas que colocamos dentro.

<div id="cuerpo"> 
<h1>Título de la página</h1> 
<p>	
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos. 
</p> 
<p>	
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir... 
</p> 
<div id="navabajo"> 
<a href="#">Volver</a> | 
<a href="#">Portada</a> | 
<a href="#">Mapa del sitio</a> 
</div> 
</div>

Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que lleguen al final del scroll vertical de la página.

Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo align=left en una imagen)

Para posibilitar la disposición en dos columnas que hemos definido en el diseño original, vamos a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.

#cuerpo{ 
width:480px; 
margin-left: 8px; 
padding: 12px 0px 10px 0px; 
background-color : #ffffff; 
float:left; 
}

También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del cuerpo:

H1{ 
font-size: 12pt; 
}

Los encabezados de nivel 1, que tengan tamaño de letra 12pt.

#navabajo{ 
font-weight : bold; 
}

Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar la navegación.

Podemos ver el ejercicio tal como queda con los pasos realizados hasta el momento.

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

butter

11/12/2006
sigue en:
http://www.desarrolloweb.com/articulos/1842.php

ezequiel_gorandis

30/7/2009
no puedo colocar una capa al lado de la otra, como ustedes hicieron
Hola estuve tratando de realizar por mi cuenta un ejemplo como el de ustedes. El problema es que quiero que las dos divs con id=textoc de mi codigo se vean una al lado de la otra, pero no logro hacerlo. Aqui les dejo el codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">
#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}
#cabecera{
height : 106px;
width: 700px;
background-color:#000033
}
#enlaces{
background-color:#000000;
color:#FFFFFF;}

#cuerpo{
width:500px;
margin:10px;
padding:5px;
}
.textof{
background:url(expandamercado.gif);
background-repeat:no-repeat;
padding-left:140px;
}
.textoc{
top:533px;
width:100px;
}
#lateral{
width:100px;
margin:10px;
padding:5px;
float:right;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="enlaces">
Pafina principal &nbsp;&nbsp;&nbsp; Quienes somos &nbsp;&nbsp;&nbsp; Chau
</div>
<div id="cuerpo">
<h1> Titulo </h1>
<div>
<p class="textof">fsdfs sdfds fsd fs dfds f<br />
<br />
porque escuchamos a nuestros clientes<br />
porqdjaskdjas das dkjashd ska<br /><br />
fsdfsdfdsfsdfdsfsf fds fsd fsd fds fds fdsfds fsdk fsdfsdfsfds<br />
<br />
</p>
</div>
<div>
<p class="textof">fs df sdfsdf ds fdsfdsf sd fsdfsd fsdfs dfss ds<br />
<br />
porque escuchamos a nuestros clientes<br />
porqdjaskdjas das dkjashd ska<br /><br />
fsdfsdfdsfsdfdsfsf fds fsd fsd fds fds fdsfds fsdk fsdfsdfsfds<br />
<br />
</p>
</div>
<div class="textoc">
<p> dasd as das dasd as
</p>
</div>
<div class="textoc">
<p> dasd as das dasd as
</p>
</div>
</div>

</div>
</body>

</html>

Wolfgang

06/10/2009
Cuerpo de página CSS
Lo siento, a lo mas que llego es a la cabecera, el cuerpo se me alinea a la izquierda y modificando #cuerpo consigo llegar a alinear todo bajo la cabecera, pero en caso de minimizar se descuadra la pagina.Revisé todo, pero no doy con ello,si pudiese ayudarme le agradezco.

vito_guerrero_quesada

24/12/2009
dividir un fondo y hacerlo crecer por el centro
Hola , me han apsado un diseño para una web, pero me han pedido que pueda crecer por el centro, el problema es q la parte de la cabecera tiene un menu, esto no es tanto problema, el problema esta en que el crecimiento de la web esta en el texto explicativo y necesito que parte del texto este en la cabecera y otro en el pie y si el espacio q ocupa el texto, verticalmente, es mayor que el espacio asignado en la cabecera mas el que tiene en el pie debo irlos separando...

No se si quedara muy claro, si necesitan una imagen para poder verlo puedo preparar un ejemplo.

Gracias.

ragonzalez1

27/12/2009
cuerpo lateral
Hola estoy siguiendo paso a paso el diseño para practicar con ustedes y el cuerpo lateral se mueve con el ancho de página del navegador, lo que quiere decir que si voy cerrando la ventana del navegador llega un momento que el cuerpo lateral se baja, ejecuto el ejercicio hecho por ustedes y eso no ocurre, supongo que tengo un error en alguna definición del estilo, hes posible ubicar la elaborada por ustedes en el ejercicio para guiarme y detectar donde tengo el error?

Galacticmelody

22/5/2012
Muchas graciassss!!!
Es una comunidad que sii comparten buenos tutos de calidad..!!
actualmente tengo webs hechas en tablas... pero decidí a mejorar por ello ando leyendo full tutos de css... la verdad me a ayudado mucho, día a día voy aprendiendo cosas nuevas, fáciles de entender!

Mi gran objetivo es ser un capo en esta materia así que no me cansare y leeré todo lo que esta publicado en esta web..! y de hecho en algún momento les donare un buen presente por esta noble causa... muchas gracias, bendiciones!!