Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Maquetar Contenido y pie de Pagina

Tags: maquetar, css, estilo, contenido, pie, pagina
publicado el 2010-06-03   leido 4033 leídas

Maquetando Contenido


Al igual que la capa de la barra lateral, definiremos los mismos atributos solo que cambiaremos algunos valores como el ancho (el contenido ocupa mas lugar) y el color de fondo (para distingir donde empieza y termina la capa).
        #contenido {
            background-color: gray;
            float:left;
            width:740px;
            height:100%;
        }
y en el HTML agregamos la capa debajo de la barra lateral:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
   <div id="contenedor">
        <div id="cabecera">Esta es la cabecera</div>
        <div id="barra-lateral">Esta es la barra lateral</div>
                   <div id="contenido">Este es el contenido principal</div>
        </div>
</body>
</html>

Maquetando pie de pagina


En el pie de pagina utilizaremos la propiedad clear que vimos en la lección anterior, también definiremos un color de fondo:
        #pie {
           background-color: blue;
            clear: both;
        }
Finalmente el HTML quedaría así:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
        <div id="contenedor">
                <div id="cabecera">Esta es la cabecera</div>
                <div id="barra-lateral">Esta es la barra lateral</div>
                   <div id="contenido">Este es el contenido principal</div>
                   <div id="pie">Este es el pie de pagina</div>
       </div>
</body>
</html>
Mas o menos veremos algo asi:



Si queremos agregar un espacio entre las palabras y los bordes solo agregamos "padding:5px;" en todas las capas CSS.

Te gust?

Maquetando cabecera y barra lateral

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artculos
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos
No se pudo generar una instancia de usuario de SQL Server debido a un error (.mdf
Solucion Error 26. No se encontró el servidor o éste no estaba accesible. Sql

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados