Enloqueciendo con los navegadores web…(propiedades de DIVs)

Seguramente al maquetar tu página web y visualizarla en los navegadores, no ves lo mismo que en el diseño original. Esto suele pasar porque no están bien aplicadas las propiedades a tus DIVs ó seciones.

En este artículo te enseñaré varias propiedades que puedes aplicar a tus DIVs para que se vean tal cual como en el diseño original.

El lenguaje CSS pone a nuestra disposición, muchisimas propiedades que se pueden aplicar a tus elementos HTML para dale estilo y formato.

Aqui te voy a mostrar varias propiedades que podrás aplicar a tus DIVs para lograr el que tu página, se vea los más parecido posible a tu diseño.

Te recuerdo que para aplicar una propiedad a un <div> , debes incluir el identificador ID con un nombre, dentro de la apertura del div.
Por Ej:
<div id=”cabezal”>
</div>

Luego de crear las divisiones de tu documento HTML, con las etiquetas <div> y sus IDs, podrás por medio de CSS,  aplicarle las propiedades.
Las propiedades se aplican desde tu archivo CSS linkeado al HTML, con el situiente formato:
# nombre_del_ID_del_div {
propiedad: valor;
}

** REPORTE GRATUITO:
Cómo convertir un PSD en HTML en 5 pasos.

Haz Click AQUI para Descargarlo AHORA.

Propiedades de DIVs

margin; margin-top; margin-right; margin-bottom; margin-left;
Determina los margenes izquierdo, derecho, superio e inferior del DIV.
EJ:
margin-top: 50px;

padding-top; padding-left; padding-bottom; padding-right;
Especifica el espacio superior, inferior, derecho o izquiedo, entre el contenido y el borde.
EJ:
padding-top: 50px;
Nota: si se especifica solo “padding”, seguido de 4 valores, los mismos corresponden  a los bordes superior, derecho, inferior, izquiedo, respectivamente.
EJ:
padding: 10px 30px 40px 5px;

border-top-width; border-right-width; border-left-width; border-bottom-width
Determina el ancho del borde de un elemento.
EJ:
border-left-width: 2px;

border-color;
Especifica el color del borde del elemento.
EJ:
border-color: #ff000;

border-style;
Especifica el estilo del borde, pudiendo ser: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
EJ:
border-style: solid;

width;
Determina el ancho del sector, elemento o DIV.
EJ:
width: 500px;

height;
Especifica el alto de un elemento o DIV.
EJ:
height: 800px;

float;
Determina si el elemento será flotante y asi permitirá colocar otros elementos alrededor. Opciones: none, left, right.
EJ:
float: left;

clear;
Especifica los lados del elemento, donde NO se podrá colocar otros elementos.
Los valores serán: none, left, right, both.
EJ:
clear: left;

Aplicando alguna o varias de estas propiedades, verás que fácil es modelas las secciones o divs, de tu documento.

Ya sabes, cualquier duda, dejame un comentario y te responderé.

¿Te interesa la Maquetación Profesional de Sitios Web ?
Quizás te interese el Curso Completo de Maquetación en Video:

Anuncios

7 pensamientos en “Enloqueciendo con los navegadores web…(propiedades de DIVs)

  1. Fran

    Hola, recién estoy empezando con HTML y CSS y tengo una duda con el tema del float y clear, ¿en que caso lo usarías? ¿el clear es por ejemplo para usarlo en el div del pie de pagina indicando que no se puede poner nada a los costados y abajo? y el tema de que un div sea flotante… significa que el elemento esta flotando tipo pop up?

    Muchas gracias
    PD: muy bueno el blog

    Responder
    1. Psd a Html Autor de la entrada

      Hola Fran
      Gracias por tus comentarios.

      La propiedad CLEAR determina los lados donde NO se podrán ubicar otro elementos flotantes.
      Y si, por lo general se utiliza en el DIV del pie.

      La propiedad FLOAT es un poco mas compleja.
      Basicamente esta propiedad quita el elemento del flujo natural de la pagina (uno abajo de otro), y permite posicionralo a la izquierda o a la derecha del resto del contenido de su elemento padre. Lo hace “flotar” a un lado o al otro.
      Recuerda q el flujo natural de los DIVs en un domcumento, es uno debajo del otro.
      Si se especifica “float: left” o “float: right” en un elemento, este sale se ese flujo natural y se posiciona la derecha o a la izquierda de su elemento padre.

      Espero haberte ayudado.

      Saludos!
      Cristian
      Creador del Curso en video “Psd a Html Paso a Paso”
      Más info del curso en: http://www.psdahtmlpasoapaso.com/detalles

      Responder
  2. Jefferson santos

    Hola buenas tardes, muy buena tu explicacion…yo tengo una duda,necesito posicionar un div q tiene una imagen de fondo el cual voy a arrastrar por mi pagina y guardar la ubicacion final en un base de datos de mysql (esto ya lo tengo listo)..mi problema es q al actualizar la pagina el div vuelve a su posicion inicial y no se como hacer q retome la posicion en q lo deje anteriormente….t agradeceria mucho si puedes ayudarme

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s