Trabajar con Capas o con Divs?

Trabajar con Capas o con Divs?

Se me ha preguntado: “¿Que me recomiendas usar, Capas o Divs?”, Con esta pequeña guía intento darte los pros y los contras de cada una de ellas para que seas tu el que elijas cual es la que quieres usar.Quizás aun no tienes claras las diferencias entre ellas, pues su llamado HTML es prácticamente igual:

1

<div id="nombre-del-div"></div>

Debido a esto, me parece oportuno comenzar la entrada estableciendo las diferencias entre ellas.

Diferencias

La diferencia especifica entre una capa y un div la encontramos en el estilo CSS que usamos, Ve un estilo típico de los dos y trata de encontrar las diferencias.

1-Capa:

1
2
3
4
5
6
7
8

#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 51px;
top: 79px;
}

2- Div

1
2
3
4
5
6

#Layer1 {
margin-top: 51px;
margin-left: 79px;
width:200px;
height:115px;
}

Creo que están claras cada una de ellas, la primera la encontramos en la segunda línea del estilo de las capas, con la propiedad “position:absolute”, ésta propiedad nos permite ubicar a la capa en una parte definida de nuestra web, especificada en nuestro top y left que no son mas que las distancia que va a tener la misma de la parte superior y de la parte izquierda de nuestra web respectivamente. En el caso del div, logramos ubicarlo exactamente en el mismo lugar, solo que ahora usamos el “margin-top” y el “margin-left” para separarlo tanto de la parte superior como de la parte izquierda de nuestra web.

Pros y Contras de las capas

1-Pros:

- Permiten ubicar el contenido en el lugar que se quiere de una manera fácil y rápida (con el mouse).

-Permite escribir dentro de imágenes de manera fácil y rápida.

-Permite escribir un texto sobre otro de manera fácil.

2-Contras

- NO recomendadas para diseños que se quieren centrar, pues las propiedades top y left no hacen diferencias entre las diferentes resoluciones de pantalla, y lo que en tu pantalla 300px distanciado de la derecha puede ser centrado, quizás en mi pantalla no lo sea.

- Hay que tener extremo cuidado con el z-index que es la subordinación de capas con respecto al marco principal, es decir, si tu capa tiene z-index: 2, quiere decir que esta dentro de otra capa.

- Fallas al momento de que se redimensiona una ventana.

Pros y contras de los divs

1-Pros

- Perfectos e ideales para todo tipo de contenidos (centrados, a la izquierda, a la derecha, arriba, abajo, etc).

- Te permiten escribir sobre imágenes, texto, etc.

- Usados por la mayoría de las páginas webs profesionales

2-Contras

- Se necesita de experiencia para saber ubicarlas en el lugar que se quiere.

- Mas trabajoso el hecho de agregarles estilo.

Tips para ubicar tu contenido en los divs

Si usas capas, recuerda ubicar tu contenido SIEMPRE a la izquierda de tu pagina, así evitaras las fallas de resolución de las diferentes pantallas.

Si quieres centrar tu contenido y que sea perfecto para todas las resoluciones, aquí te dejo unos tips que te ayudaran a encontrar la colocación exacta de tus objetos.

1- Si quieres colocar un contenido al lado del otro, usa el siguiente estilo CSS en tu div.

1
2
3
4

#Layer1 {
display: inline;
float: left;
}

Este estilo, te permitirá situar un objeto al lado del otro, si quieres separarlo, usa los márgenes.

2- Si quieres  centrar tu contenido, Colócalo TODO dentro de un gran div y usa el siguiente estilo.

1
2
3
4

#contenido-principal {
margin: auto;
width:200px;
}

*El valor del width depende del ancho de tu diseño.

*Cuando digo todo dentro de un gran div, me refiero a lo siguiente:

1
2
3
4
5
6

<div id="contenido central">
<div id="Layer2">holaaaaa</div>
<div id="Layer3">una imagen</div>
<div id="Layer4">lo que quieras</div>
<div id="Layer5">x's</div>
</div>

3- SIEMPRE trata de especificar el ancho y el largo de cada elemento de tu web, por ejemplo, el sidebar, el header, el contenido, una imagen, etc.

Como insertar divs y capas en Dreamweaver

Para insertar capas o divs simplemente haz clic en insertar>Objetos de diseño>Etiqueta Div/Capa

hh

Si seleccionas Capas, va a aparecer un recuadro azul en tu espacio de diseño al cual puedes ubicar en cualquier lado tomándolo desde el borde con el mouse.

Si seleccionas Etiqueta Div va a aparecer un recuadro con lo siguiente:

Insertar: Elegir el lugar donde insertarlo (De acuerdo a donde tengas la barra de escritura)

Id/Clase: Colócale el nombre que quieras al Class al ID o a ambos dependiendo de las veces que vayas a usar el div en tu pagina (Clic aquí para leer un tutorial al respecto)

Insertar nueva regla CSS: Se abre una ventana para comenzar a añadirle estilo a tu etiqueta.

Sugerencias de Sky And Stars para tí

Arriba dije que no planeo decirte cual usar y cual no, solo diré lo siguiente: Si no eres muy experto, no te importa no tener tu pagina centrada y quieres hacer tu pagina lo más rápido posible, usa las capas. Si crees saber lo suficiente de CSS te crees capas de ubicar tu contenido en e lugar indicado, no dudes un momento en usar los divs.

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

19 Comentarios en "Trabajar con Capas o con Divs?"

  1. Isa

    30 mayo 2009

    Respuesta

    Ai que ver…¿quien te habrá preguntado cosas como estas? jajaja muy bueno Mijael, sabes que a mi me viene genial gracias!

  2. Mijael

    30 mayo 2009

    Respuesta

    Jejejeje no me acuerdo quien pregunto xD..Jejeje mentira…espero que se entienda linda…Gracias por la idea…Un Besote!!

  3. hazard.o.u.s.

    2 junio 2009

    Respuesta

    Holaaaa!! Lindo tuto ^.^
    Personalmente me gustan más las capas, jajaja
    Por cierto Mijael, se puede tener un área solo para miembros con el cutenews? o como puedo hacer una?

    Graciaz de antemano y muchos besos!!

  4. Mijael

    2 junio 2009

    Respuesta

    Cierto..a mucha gente le gusta mas las capas por el hecho que es mas facil de ubicar, pero una vez usas los divs, vas a ver que es un poco mejor :).

    No se hacer area para miembros solo con cutenews, seria algo asi como noticias solo para los registrados?…ni idea..nunk he visto eso.

  5. Kryptoniana

    13 julio 2009

    Respuesta

    No recuerdo como pero abia un codigo para que con la redimension de la pagina, las capas no fallaran y era realmente sencillo y funcionaba a ver si encuentras cual era
    Salu2

  6. Mijael166

    13 julio 2009

    Respuesta

    Respuesta al Comentario deKryptoniana: No conozco ese codigo…. en tal caso es mejor usar divs, a ver si encuentro lo que dices y lo coloco..

  7. onyx

    31 agosto 2009

    Respuesta

    интересно читать, спасибо

  8. Hadabell

    15 septiembre 2009

    Respuesta

    : S :_( aaaaaggggrrr!!!!! jajajajaja
    que rollo! tengo la mente nublada, veo capas y divs jajajaja.

  9. Hadabell

    15 septiembre 2009

    Respuesta

    a ver, si estoy en dreamweaver e inserto todo con divs, automáticamente estoy trabajando con css? :S

  10. Mijael

    15 septiembre 2009

    Respuesta

    A ver, si trabajas con capas, Vas a usar CSS para colocarlas, (darles posicion), y si trabajas con divs igual vas a usar CSS para colocarlas, la diferencia es que con dreamweaver, por ejemplo, el CSS (la ubicacion de la capa) se genera automaticamente, es decir no tienes que tocar el estilo de esa capa.

  11. Hadabell

    16 septiembre 2009

    Respuesta

    ok ya estoy comprendiendo… osea, (a)usar css es usar como otro formato de códigos?? (b)eso en qué beneficia?? (c)al terminar la página web la guardo como html y listo?

  12. Mijael

    16 septiembre 2009

    Respuesta

    Ok…CSS es otro formato de codigo…asi se puede decir. Casi todo como te lo he dicho antes se hace con CSS entonces, beneficia como no tienes idea. y la c pues si tienes tu estilo en la misma pagina que tu codigo HTML efectivamente lo guardas como html, si creas una pagina aparte, se guarda con formato .css

  13. nisaza

    17 noviembre 2009

    Respuesta

    era mas facil de lo que pensaba , gracias te pasaste =D

  14. Mijael

    18 noviembre 2009

    Respuesta

    Q bien :P me alegro que te sirviera el tuto :P

  15. JUAN GARCIA

    23 noviembre 2009

    Respuesta

    PARA CENTRAR LOS DIVS ES MUY FACIL SOLO DEBES TENER ENCUENTA QUE EL CONTAINER TIENE QUE IR CON margin auto left auto rigth auto ASI S ACOMODA EN CUALQUIER NAVEGADOR

  16. adymena

    18 enero 2010

    Respuesta

    hola bueno no se si esto deba ir aqui pero en fin espero y me puedas ayudar, he intentado por mucho poner en las imagens que publico en cutenews que es el que uso un borde sobre estas pero realmente no se que codigo ocupar y si este mismo va sobre el codigo de mi web o el codigo del tema de cutenews espero me puedan ayudar gracias xoxo

  17. Mijael

    20 enero 2010

    Respuesta

    puedes lograrlo con estilo css, es decir, haciendo algo como:
    img {
    border: 1px solid #000000;
    }
    En ese caso todas las imagenes de tu pagina van a tener un borde negro de 1 pixel, te aconsejo que leas un poquito sobre css. aqui mismo en skyandstars tenemos varios tutoriales al respecto, usa el buscador para encontrarlos. Saludos!

  18. jackson

    2 agosto 2010

    Respuesta

    hola que tal soy nuevo en este mundo de dise;o y programacion, estoy realizando una administracion de una web y lo que se desea es que cada producto a parte de su descripcion tenga imagenes pero esa imagenes estean pequenas y al hacer click cargue a un costado en la misma pagina, pueden ser imagenes o letras o numeros donde se haga click pero el resultado es que se tiene que mostrar a un costado arriba etc pero tiene que ser en la misma pagina..espero que me puedan ayudar..he estado mirando estos de capas y me puieden decir sise puede hacer o tengo que utilizar ajax para hacer ese tipo de trabajo

    • Mijael

      2 agosto 2010

      Respuesta

      Hola jackson, puedes utilizar jQuery si quieres hacerlo con un bonito efecto pero si quieres algo que funcione y que sea efectivo usa marcos flotantes, puedes usar el buscador de aqui de la pagina para encontrar tutoriales

Deja un Comentario

Nombre (Requerido)

Email (Requerido pero no publicado)

Web

Comentario (Requerido)

*Tu E-mail es usado para relacionarlo con tu cuenta en Gravatar