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 4059 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 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