Propiedades del div parte 2

#codigo{
background:#999;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:10px;
color:#FFF;
margin:10px auto;
}

Propiedades del div parte 2

En el post anterior hablamos de las propiedades del div como utilizarla o manipularla, en esa entrada aprendimos a darle forma a un div así como a posicionarla en un lugar adecuado, como nuestro propósito es que aprendamos a manejar todo lo que ofrecemos entonces ahora vamos a ver como maquetar una página igual que HTML5 pero usando solo DIV y CSS3.

Como manejar las propiedades de los div

La mejor forma de aprender a manejar las propiedades del div es creando las cosas directamente y no andando con rodeos dando ejemplos absurdos que nos dejan la mente enredadas, aquí lo que vamos hacer es la famoso pagina de plantilla que hacen casi todos cuando van a explicar HTML5 y CSS3 pero en esta ocasión la vamos hacer con DIV.

En este ejemplo vamos a explicar las principales propiedades del div que vimos en el pos anterior pero maquetando una página HTML.

Que tendrá nuestra página?

Simplemente lo que explican en todos los tutoriales de HTML5, tendrá una cabecera una botonera un cuerpo donde incluiremos todo el contenido, dentro de ese cuerpo un div para contenido y otro para la barra o menú de la izquierda a lo que en HTML5 se le llama aside, asi como también un pie de página.

Por cierto si quieres ver como se hace con HTML5 visita nuestro curso de HTML5 y CSS3 donde creamos el mismo ejemplo pero con etiquetas HTML5.

Bueno aquí les va el código HTML para nuestro documento web.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>Propiedades del div</title>
</head>
<body>
<div id=”header”>
<h1>Esto es un header usando div </h1>
</div>
<div id=”nav”>
<h1>Esto es un nav usando div </h1>
</div>
<div id=”section”>
 <div id=”contenido”>
    <h2>Esto es un section de contenido</h2>
     <div id=”article”>
        <h1>Esto es un article usando div </h1>
        </div>
    </div>
    <div id=”aside”>
    <h1>Esto es un aside usando div </h1>
    </div>
</div>
<div id=”footer”>
<h1>Esto es un footer usando div </h1>
</div>
</body>
</html>

Ahora el código css3 que le vamos a aplicar a nuestro documento html va a cambiar totalmente su apariencia y tendremos el mismo efecto de diseño que con las etiquetas html5.

Codigo CSS3

<style>
*{margin:0px;padding:0px;font-size:1em;}
h2{margin:10px auto;}
#header,#nav,#footer{
background:#999;
margin:10px auto;
min-height:40px;
color:#FFF;
width:90%;
border-radius:5px;
text-align:center;
padding:5px;
}
#section{
 width:95%;
 height:250px;
 text-align:center;
 margin:10px auto;
 padding:5px;
 }
#contenido{
 background:#999;
 width:65%;
 display:inline-block;
 height:250px;
 border-radius:5px;;
 color:#FFF;
 }
#aside{
 width:30%;
 display:inline-block;
 height:250px;
 background:#999;
 border-radius:5px;
 vertical-align:top;
 color:#FFF;
 }
#article{
 background:#069;
 height:100px;
 border-radius:5px;
 color:#FFF;
 width:80%;
 margin:5px auto;
 }
</style>

Ahora fíjate en el documento HTML y veras que tenemos la misma apariencia que obtenemos con las etiquetas de html5.

Si prueba reduciendo el tamaño de la ventana del navegador veras que tenemos el mismo efecto auto-ajustable o diseño sensible (Responsive Web Desing).

Si leíste nuestro curso de HTML5 y CSS3 te abras dado cuenta que obtenemos el mismo resultado usando solo las propiedades del div, esto es solo cuestión de inventar a ver cómo te salen las cosas nadie sabe diseñarte una web a la perfección sin probar como va quedando por eso es que te aconsejo que modifiques el código y que pruebe quitando y agregando propiedades CSS.

Bueno espero y con estos hayan aprendido a manejar los las propiedades del divy que le cirba para crear su primera pagina web o si aun eres de lo que usa tablas que vallas pensando en rediseñar tu sitio y que mejor forma de hacerlo que con los div.

Gracias y hasta una próxima enrada…

Deja un comentario

Tu dirección de correo electrónico no será publicada.