La idéntica visualización de las páginas web en diferentes navegadores, respetando el diseño original, suele ser uno de los desafíos más grandes a la hora de maquetar. Por lo general, algún problema siempre surge y esto suele pasar porque no están bien aplicadas las propiedades a los DIV HTML ó seciones.
En este artículo te enseñaré varias propiedades que puedes aplicar a tus div html, 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 div html 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;
}
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 a tus div html, verás que fácil es modelar las secciones de tu documento.
Ya sabes, cualquier duda, dejame un comentario y te responderé.
Recurso Recomendado:
Muy buenas tus notas Cristian, estoy armando un sitio con lo que enseñaste en el video, cuando lo termine, te paso el link, para que lo veas y me des tú opinión, saludos, Danny.
Hola Danny
Buenisimo lo q contás !!
Me alegra mucho que el Curso Completo de Maquetación te haya servido y ya lo estés aplicando.
Espero tu proyecto.
Saludos!
Cristian
Hola, Cristian,
agradecerte, en primer lugar, compartir tus conocimientos con nosotros y felicitarte por tu claridad en tus exposiciones y ejemplos.
He visto que has explicado realizar bordes sin imágenes de forma sencilla con CSS. Sin embargo, es cierto que aún el CSS3 no está implantado del todo en todos los navegadores, que siguen utilizando el CSS2 y, por tanto, no mostrarán las esquinas redondeadas, sino cuadradas y no se ajustará al diseño entregado al cliente.
Y aquí es donde yo te pediría, por favor, que realizaras un nuevo post explicando cómo realizarlo, pues a día de hoy es la única forma de estar seguros de que el usuario final verá el resultado tal y como el diseñador lo concebió.
Muchas gracias y un cordial saludo.
Fernando.
Hola Fernando
Muchas gracias por tus comentarios.
🙂
Te cuento que el post de los bordes redondeados en CSS, está la solucion compatible para IE, Firefox, Opera, Safari y Chrome.
Es decir, practicamente para todos los navegadores.
Yo personalmente lo he probado en TODOS menos en Opera, que fue un aporte de un suscriptor del Blog.
Puedes ver el articulo completo aqui:
http://www.psdahtmlpasoapaso.com/blog/bordes-redondeados-con-css-no-uses-imagenes
Saludos!
Cristian
hola, Cristian,
muchas gracias, de antemano, por atender mi mensaje.
He leído tu post y ése ha sido mi motivo por el cual te he propuesto un nuevo post explicando cómo realizar bordes redondeados, esta vez, con imagen (por supuesto, sigue siendo una propuesta que muy gustosamente recibiría no sólo yo, sino más profesionales que nos dedicamos a esto).
La razón es porque aún hoy día existe un gran número (nada desdeñable) de usuarios que utilizan explorers vers. 6 y 7 (las administraciones publicas, por ejemplo), que es principal navegador que más problemas ofrece. Como profesionales se nos pide que maquetemos las páginas para que se vean correctamente en los principales navegadores y en las versiones más utilizadas, lo cual abre el abanico más allá de un público objetivo determinado y atento a las novedades tecnológicas que no dudan un segundo en bajarse para tener lo último, aunque, como bien sabemos, tener en nuestros equipos las últimas tecnologías a veces no resulta conveniente.
No sé si versiones anteriores de Mozilla, Safari y Chrome son compatibles con el códido CSS 3 que nos propones utilizar, pero lo cierto es que si queremos estar seguros al 100% de que el usuario final vea lo que queremos que vea, aún tenemos que utilizar imágenes para este caso en concreto que nos comentas de esquinas redondeadas.
Y por otro lado, la solución que propones para Explorer es una solución javascript, una solución que da problemas en aquellas páginas que exigen accesibilidad y observar la normativa AA o AAA de las normas WAI (donde ser recomienda no utilizar javascript más allá de lo necesario).
Gracias por tu amabilidad y tus respuestas, Christian. 🙂
Fernando.
Hola Fernando
Alli tienes el artículo de como realizar bordes redondeados CSS con imagenes:
http://www.psdahtmlpasoapaso.com/blog/bordes-redondeados-css-con-imagenes
Saludos!
Cristian
Cristian ace tiempo queria aprender hacer esto
muchas gracias.
Por nada Amy, me alegro.
Saudos!!
Cristian
Excelentes tus cursos Cristian! gracias por compartir tu conocimiento.
Me gustaría saber si tienes algún Post en relación a la etiqueta DIV que profundice sobre los atributos FLOAT y POSITION, pues me ha dado algunos dolores de cabeza a la hora de hacer el acomodo dentro de la maquetación Web.
Saludos y gracias de antemano.
Hola Aldo
Justamente el tema de los DIVs , los float y position lo enseño en detalle dentro del Curso Completo «PSD a HTML Paso a Paso«.
Es un tema sumamente importante que trae muchisimos dolores de cabeza.
Busca dentro del blog que hay mucha info sobre maquetacion con divs.
Saludos
Cristian
Hola, no se si lo han dicho pero, en HTML al escribir el lenguaje, se debe codificar y guardar en el formato de caracteres UTF-8 sin Bom.
Si claro.
UTF-8 es una de las mejores configuraciones de codificacion que se usan hoy en dia.
Gracias por el aporte.
Saludos!
Cristian