Propiedades del div

#cabecera{
margin:10px auto;
height:70px;
padding:5px;
border: solid 1px #06F;
width:50%;
}
.cabecera1,.cabecera2,.cabecera3{
margin:10px auto;
height:70px;
padding:5px;
border: solid 1px #06F;
width:30%;
text-align:center;
color:#FFF;
background:-moz-linear-gradient(#3C0 0%, #9C0 100%);
display:inline-block;
}
#codigo{
background:#999;
color:#FFF;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:10px;
}

Propiedades del div

Hoy nos vamos a detenernos a ver las propiedades del div que aunque es sierto que html5 es una realidad aun así no se dejan de usar en las mayorías de los sitios web, Sera tal vez porque a google le agrada mucho que nuestras web estén maquetadas con div y css?.

Las propiedades del div son muy simples de aprender si conoces un poco de css, en este pequeño mini-tutorial vamos a aprender a manipular los div de una forma que podamos crear una web con div si más complicaciones.

Propiedades del div a tener en cuenta

Lo que tenemos que tener en cuenta para las propiedades del div y cómo hacerlo y como te dije antes algún conocimiento de css o css3, aunque si has seguido nuestro tutoriales ya estará familiarizado con todo esto y te será muy fácil aprender a manejarlo.
Cuáles son las principales propiedades del div.

Entre las principales propiedades que le podemos aplicar a un div voy a mencionar solo la que más se utilizan al momento de maquetar cualquier sitio web.

  • Widht
  • Height
  • Marging
  • Padding
  • Border
  • Position

Estas son las propiedades más utilizadas no solo para los div si no para casi todas las etiquetas HTML en la que podemos introducir datos, ahora vamos a describir cada una de estas propiedades.

  • 1- Widht: esta propiedad de css nos permite establecerle un tamaño al div puede ser en px,em,% este tamaño solo aplica de izquierda a derecha.
  • 2- Height: Esta propiedad css nos permite establecer el alto de cualquier etiqueta HTML.
  • 3- Margin: Esta es otra propiedad css que se utiliza mucho ya que nos permite separar un div de otro asi como centrarlo en la ventana.
  • 4- Padding: Esta propiedad nos permite alejar el texto que está dentro de un div hacia el centro, pareciendo como si lo alejáramos de los bordes del div.
  • 5- Border: Normalmente todo div tiene bordes con esta propiedad podemos quitárselo o agregárselo dependiendo de lo que queramos hacer.
  • 6- Position: Esta es otra propiedad del div que se utiliza mucho ya que nos permite posicionar el div en un lugar específico o superponerlo por encima de otro.

Ahora bien si vamos a trabajar con css3 todas estas funcionarían muy bien pero tendríamos que agregarle mas propiedades como box-shadow,inline-block,vertical-align y muchas otras mas..

Ahora vamos a ver un ejemplo con todo lo antes mencionado.

Supongamos que queremos crear un div que va a tener un acho de la mitad de la pantalla y un alto de 70px y la queremos con bordes azules que el texto se aleje de los bordes y que tenga una posición fija.

Veamos el código completo a realizar.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>Propiedades del div</title>
<style>
.cabecera{
 margin:10px auto;
 height:70px;
 padding:5px;
 border: solid 1px #06F;
 width:50%;
 position:fixed;
}
</style>
</head>
<body>
<div class=”cabecera”>
Las propiedades del div
</div>
</body>
</html>

El resultado es el siguiente div.

Las propiedades del div

Si te fijas en el div hemos hecho todo lo que dijimos al momento de empezar a crear nuestro div, algunos de los dolores grandes que encuentran muchos que están empezando a trabajar con div es el posicionamiento de estos div principalmente a la hora de centrarlo en la pantalla.

Y si te fijas aquí simplemente con margin:10px auto; lo hemos hecho sin más complicaciones.

Otro problema que se da muy a menudo es a la hora de alinear los div cuando son varios y queremos que salgan en línea o bloques, antes esto lo podíamos hacer con la propiedad float y con una posición en especifico, pero ahora con la llegada de display:inline-block; podemos hacer lo mismo y sin estar determinando una posición fija o especifica.

Ahora vamos a plantear el siguiente problema, Queremos crear 3 div que se coloquen en bloques y no queremos que tengan una posición fija si no que cambien dependiendo el ancho de la ventana.
Para este pequeño problema vamos a utilizar el mismo código de arriba y algunas propiedades de css3 para darle color y colocar los div en bloques sin necesidad de utilizar float.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<title>Propiedades del div</title>
<style>
.cabecera,.cabecera2,.cabecera3{
 margin:10px auto;
 height:70px;
 padding:5px;
 border: solid 1px #06F;
 width:30%;
 text-align:center;
 color:#FFF;
 background:-moz-linear-gradient(#3C0 0%, #9C0 100%);
 display:inline-block;
}
</style>
</head>
<body>
<div class=”cabecera”>
Primer div
</div>
<div class=”cabecera2″>
Segundo div
</div>
<div class=”cabecera3″>
Tercel div
</div>
</body>
</html>

Si te fijas solo hemos creado 3 div más a los cuales le hemos puesto una clase llamada sucesivamente cabecera,cabecera2,cabeceara3 y asi mismo lo hacemos en css para que cada uno tome lo mismos valores.

Ahora cual es lo nuevo que podemos ver en esta parte? Solo el uso de display:inline-block; para hacer lo que se hacía antes con float pero de una forma más profesional y sin menos restricciones.
Entonces nuestro div quedarían de la siguiente manera.

Primer div
Segundo div
Tercel div

Ahora si quieres puede probar quitando la propiedad display:inline-block; para que vea como quedan los div, también puedes intentar hacerlo con float para que puedas ver la diferencia que han entre ambas propiedades css.

Bueno espero y les haya gustado este pequeño mini-tutorial de como manipular los div con las propiedades css y css3.

Gracias y hasta la proxima entarda… no olvides dejarnos tu opinion o sugerencia..

Comments

  1. By wiitron

Deja un comentario

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