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

Maquetando cabecera y barra lateral

Tags: maquetar, css, estilo, cabecera, barra, lateral
publicado el 2010-06-03   leido 5000 leídas

Maquetando cabecera


Teniendo el contenedor general y siguiendo el diagrama de maquetación que vimos antes, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos el alto que queremos que tenga, siempre dentro de los limites que definimos en el contenedor general, obviamente usaremos mucho menos, solo 50 pixeles, y también un color de fondo (verde) para ir notando cada capa, quedando así:
#cabecera {
       background-color: green;
       height:50px;
       padding:5px;
}
y llamamos a esta capa desde el código HTML, pero ojo, tiene que ir dentro de la capa contenedora, 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>
</body>
</html>
Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con la barra lateral.

Maquetando barra lateral


En esta capa, además de agregar otro color de fondo, comenzaremos a utilizar la propiedad float para flotar la barra a la izquierda, además de establecer un ancho y alto que utilizará la capa.
        #barra-lateral {
            background-color: orange;
            float: left;
            width:140px;
            height:100%;
        }
Si no queremos que ocupe todo el alto de la pagina solo ponemos una cantidad de pixeles determinada, sin porcentajes.

El HTML quedará 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>
</body>
</html>
Ya nos falta muy poco para terminar la estructura.

Te gustó?

Comenzando Maquetación CSS

Maquetar Contenido y pie de Pagina

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artículos
Como ponerle nieve a la pagina web
Qué es Composer y cómo instalarlo en Windows Linux y MAC
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

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