29/8/12

Cómo crear tu web (2): Barra lateral


Ya sabemos cómo crear una web, pero todo está en un mismo sitio. No hay sidebar o barra lateral, como queráis llamarlo.


Lo que vamos a aprender a hacer es una barra lateral en el blog. El código tiene que ir antes de </body>:

<style>
* {margin: 0; padding: 0}
#wrapper {width: 1000px; margin: auto; overflow: auto; background: #ADDEFE;}
#contenido {width: 700px; float: left; background: #ADDEFE;}
#sidebar {width: 300px; float: right}
</style>

<div id="wrapper">
        <div id="contenido">
NOTICIAS
         <div style="height:500px"></div>
        </div>
<div id="sidebar">LO QUE HAY EN LA SIDEBAR</div>
               <div style="height:500px"></div>
</div> 

Primero veremos cómo está estructurado el código.
Como vemos, hemos creado una variable #wrapper, #contenido y #sidebar, del cual hemos puesto un tamaño y un color de fondo
El wrapper es todo el espacio que va a ocupar la página web (el contenido más la sidebar) y hemos puesto que tenga 1.000 píxeles, que es lo que se suele poner. Si quisieses que el contenido o la sidebar fuese más pequeño o más grande, ajustas los px pero teniendo en cuenta de que entre los dos deben sumar el valor del wrapper.
Después hemos puesto el contenido y la sidebar, y vemos que entre las dos suman 1.000.
En la segunda parte del código vemos que el wrapper se divide a su vez en "contenido" y "sidebar", y ahí es donde pondremos el contenido de cada uno.

Eso es todo, pero por si quedan algunas dudas, voy a poner un ejemplo de la segunda parte del código (la primera parte creo que es fácil)

<div id="wrapper">
        <div id="contenido">
Bienvenidos a la web de Campamento Web. Esto es un ejemplo de lo que podrás crear con una sidebar. Este es el contenido con las noticias o lo que quieras poner.
         <div style="height:500px"></div>
        </div>
<div id="sidebar"> Esto se ve en la sidebar, y esta es una imagen: <a href="http://campamentoweb.blogspot.com/2012/02/crea-tu-pagina-web-desde-cero.html"><img src="http://dl.dropbox.com/u/55341396/creaweb.png" /></a><div></div>
</div> 


Como ves, puedes colocar tanto textos, como otros códigos HTML para colocar imágenes o lo que quieras.


No hay comentarios:

Publicar un comentario

Bienvenido al sistema de comentarios de Campamento Web. Todos los comentarios serán respondidos lo más brevemente posible. Por favor, no incluyas publicidad de sitios web o productos ni palabras ofensivas. ¡Gracias por comentar!