JMiur [E]

¿Cómo funcionan los DIVs? ¿Qué son?

Pués, nada más simple; los DIVs son rectángulos que, por defecto, no tienen ninguna propiedad; es lo que suele llamarse una etiqueta contenedora es decir, un lugar donde podemos agregar cosas. En realidad, cuando digo que no tiene propiedades, me refiero a propiedades extras ya que estas etiquetas tienen algunas características especiales, se "separan" de lo que está arriba y de lo que está debajo de ellas (por eso las llamamos etiquetas de bloque) y tienen un ancho que es igual al ancho total y una altura que depende de su contenido.

Este dato es importante ¿qué es el ancho total? El ancho básico es el de la pantalla del monitor, el BODY de nuestro sitio pero, como podemos poner una etiqueta dentro de otra, el ancho de cada rectángulo depende del ancho del rectángulo que lo contiene.

Si escribimos esto:
<div>
<div>
<div>
<div>
<div> ....... el contenido ....... </div>
</div>
</div>
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

No veremos nada distinto a si escribimos esto:
<div> ....... el contenido ....... </div>
Ya que los rectángulos (los DIVs) no tienen propiedades y los tamaños no están definidos así que podemos tener cientos y cientos entrelazados sin que eso cambie absolutamente nada.

Ahora, vamos a darles propiedades. Lo podemos hacer de manera directa, poniendo en cada uno ellos el atributo style:
<div style="....... las propiedades .......">
agregándoles una clase con el atributo class (cosa que es útil cuando tenemos varios elementos con las mismas características y queremos repetirlos):
<div class="miClase">
o dándoles un nombre único con el atributo id si se trata de bloques exclusivos:
<div id="miElemento">
Por ejemplo:
<div style="width:600px;">
<div style="width:550px;">
<div style="width:500px;">
<div style="width:450px;">
<div style="width:400px;"> ....... el contenido ....... </div>
</div>
</div>
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

En este ejemplo, no veremos demasiada diferencia salvo que el texto ocupa más líneas porque se encuentra en un DIV más angosto. Pongamosle un color de fondo diferente a cada uno de ellos para verlos mejor:
<div style="background-color:#888;width:600px;">
<div style="background-color:#666;width:550px;">
<div style="background-color:#444;width:500px;">
<div style="background-color:#222;width:450px;">
<div style="background-color:#000;width:400px;"> ....... el contenido ....... </div>
</div>
</div>
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Y padding para separarlos entre si (lo que aumentará sus anchos); en todos ellos, agregaremos padding:10px;:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Y centraremos los rectángulos agregando margin:0 auto; en todos ellos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Como se ve, el DIV interior está centrado igual que los otros pero su contenido no, el contenido se centra con text-align:center; sin importar si ese contenido es un texto o una imagen:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Salvo casos especiales, las propiedades del contenido, se heredan es decir si el DIV externo dice que la fuente de texto es de 20 pixeles (font-size:20px;) el DIV interior mostrará una fuente de 20 pixeles a menos que alguno de los DIVs intermedios diga lo contrario. En resumen, las propiedades del DIV interior (el que en este caso contiene un texto) dependerán de las propiedades del primer DIV que las defina, mirando siempre desde adentro hacia afuera.

Una plantilla funciona de esa manera, hay muchos DIVs con nombres únicos o clases, metidos unos dentro de los otros y entender este funcionameinto es esencial cuando nos encontramos con un problema.

30 comentarios:

Graciela  

Excelente Jmiur, solo tengo que ponerme en mi cabeza que es un cuadrado e ir poniendo dentro del mismo los demás.
Anduve varios días mirando por aquí, esa pavadez que puse con el saludo de Navidad, no la podía comprender...dije no me vences nena okey :)

Responder
Graciela  

me equivoqué de figura geométrica jajaja

Responder
Jared  

La belleza es simple, el impacto visual que dan los div sobre todo en el último ejemplo. Excelente tutorial.

Responder
Gem@  

Nada mejor que un buen ejemplo para entender algo. Muy bueno de verdad.

Responder
Tato  

Oye, una pregunta.. Acaso saber poner esta barra http://translate.google.com/translate_tools?hl=en&layout=1&eotf=1&sl=es&tl=ja

Y en caso de, como se usa? =S

Responder
Nico  

Solo es un rectángulo, pero qué rectángulo!! Buen artículo.

Responder
JMiur  

Ojala sirva para ir entendiendo un poco la plantilla :D

Tato Fíjate en esta entrada.

Responder
Graciela  

Sin dudas Jmiur, el dibujo y la explicación que acompaña lo hace entendible :)

Responder
Alvado Analía  

Hola, aquí yo ¿allá?

Creo que aprendí, JMiur y casi entendí, que no es lo mismo… el rectángulo me salió en el intento Nº 11. Bastante desesperanzador, por cierto. Después me pasó lo de siempre, que sin entender ya quise hacer algo nuevo y…
Pregunto: ¿qué onda una imagen de fondo? ¿Se puede?

Todavía estoy acá

Responder
maletinman  

Perdona que no me ajuste a la entrada pero tengo que felicitarte, sinceramente, creo que tu blog es lo mejor que he visto en la red, sinceramente. Te seguiré en adelante aunque yo en esto ando en pañales.
Saludos

Responder
JMiur  

Graciela: Métodos audiovisuales :D

Analía: Por lo que veo esta muy bien. Lo de la imagen de fondo es psosible, ahñi veo algunas puestas en los ejemplos; en todo caso, no sé cual es el resultado que quieres obtener.
Por ejemplo si colocas una imagen en un DIV externo preo, uno interno tiene un fondo de color, este color taprá parcialmente la imagen.
Otro caso, si es una imagen que no se repite, convendría que el DIV donde está la imagen tenga una dimensión con width y height para, de esa manera, no cortarla.
Hay muchas alternativas posibles, por e eso, debería saber a cuñal resultado quieres llegar.
Por ahora, eso de experimentar y buscar, lo veo perfecto :D

maletinman: Gracias por el comentario :$

Responder
egoloco  

Seria como lidiar con el tipo de fuente de la sidebar, si no esta establecida, porque si no lo esta entonces toma las propiedades del body en gral.

voy bien encaminado con este razonamiento?

Responder
JMiur  

egoloco: Algo así, si, en realidad, una fuente siempre está definida; si tampoco está en el body, la decide el navegador; es y algunas otras. Los DIVs, por el contrario, no tienen ninguna salvo que ocupan todo el ancho.

Responder
Graciela  

ahhh la perinola :) ahora con audiovisuales jajaja me hizo acordar cuando aprendíamos eso que me llama Excel, programar y demás chichas, mi miedo a la compu y la obligación de deshechar las máquinas de escribir en el trabajo...mira como todo ha cambiado en pocos años, ahora ya tienen los programas, pero cuando había que hacerlos :O

Responder
Alvado Analía  

Buen día JMiur, en realidad no buscaba ningún resultado en particular, simplemente fue curiosidad… lo de la imagen de fondo surgió antes de que me diera cuenta que los rectángulos tenían fondo de color y por eso no la veía, luego, tratando de recuperar la imagen perdí de vista el rectángulo. Lo que me salió, o quedó, no me disgusta, sólo que se pierde por completo el sentido del post. Ahora, por ejemplo, si al texto le quiero agregar una imagen, supongamos a la izquierda y al comienzo del párrafo elegido, ¿se puede? y si se puede… ¿dónde, cómo y qué hago con el width and height al cuál te referís? ¿o no que parece el nombre de un champú anticaspa?

Te explico algo que se me acaba de ocurrir:

Lo agregué acá

Sin compromiso alguno y sólo si se puede Y CUANDO PUEDAS, fijate si es factible...

Responder
Gem@  

J.Miur tengo un contenido que se sale del div donde está incluido.
Mejor te mando el enlace al ejemplo ¿verdad?

Responder
JMiur  

Graciela: Evidentemente, ahora es más fácil lo que produce el efecto inverso y en algún sentido, hace que las cosas sean ás complicadas o lo parezcan :D

Analía: El experimento está perfecto, insisto ocn eso. Es el único modo de entender :D

Agregar imágenes en eltexto es posible. Por un lado, puede usarse la etiqueta IMG pero también es posible colocar esa imagen como fondo y ubicarla en alguna parte; fíjate en esta entrada para ver cuales son las distintas alternativas.

Lo de width y height se colocaría en el DIV que contenga esa imagen. Pero son todas suposiciones, depende de lo que se quiera obtener.

En ese ejemplo de rectángulos verdes, por ejemplo. En el DIV donde está el texto, puede ir un fondo:
background: transparent url(URL_imagen) no-repeat left top;
la mostraría arriba a la izquierda
background: transparent url(URL_imagen) no-repeat right top;
la mostraría arriba a la derecha
y habría que poenr cierto padding para que el texto no se mostrara encima.

Otra forma es poner la etiqueta IMG flotando lo que hará que el texto se acomode alrededor, tambien a la izquierda:
<img src="URL_imagen" style="float:left" />
o a la derecha:
<img src="URL_imagen" style="float:right" />
y con ciertos paddings o margenes en la imagen.

Muchas posibilidades :D

Responder
JMiur  

Gem@: Si, envielo; probablemente, deba incluirse algun overflow pero, mejor verlo :)

Responder
info  

JMiur ya lo sabes pero te lo repito, nada es mejor que tu en explicar estas cosas de html, css, ect.
Eres un genio nada mas.

Responder
mamadealess  

Auxilio!!. JMiur!!!!

Se me ha antojado habilitar mi blog para los móviles pero hay un problema con mis divs....los uso mucho para destacar un párrafo, haciendolos más estrechos, con distintos colores, etc. Pero cuando se vé en los moviles o smartphones el div sigue en su tamaño original y no reacomoda el ancho para la vista en moviles!!!!...adjunto una imagen trucada para mostrar como se ve en el telefono!! bueno.. en el teléfono se vé peor!!

http://2.bp.blogspot.com/-js68wM4X0Pg/Txr3p1kSY0I/AAAAAAAAA4Q/_rXBMvZLoVU/s1600/vista%2Ben%2Bmoviles.JPG

Que hago????..o saco los divs y cómo entonces destaco los párrafos?
Mil gracias!!!

www.info-tea.blogspot.com

Responder
JMiur  

Puede ser que eso ocurra porque en esos DIVs estás indicando un ancho fijo; no sé si todos dicen lo mismo pero, alguno dice esto:

<div style="background-color: #F5C3A0; margin: auto; padding: 5px; text-align: justify; width: 500px;">

Podrías probar cambiar width: 500px; por width: 85%; o un valor expresado en porcentajes a ver si eso lo soluciona.

Responder
mamadealess  

Gracias por contestar!!!!!!!!!!!
Estuve probando con 90%, 85% y algo mejoró. El padding tuve que cambiarlo a 1em ....
Peero me parece que todo el merengue está porque tanto toquetee la plantilla para hacerla de ancho variable (ver las entradas sin sidebar ni lo que esta debajo del encabezado) que quedó descentrado el blog y ya me resigné a dejarlo así (adjunto imagen)..

http://1.bp.blogspot.com/-nYZojpGEuDA/TxwC3RklvgI/AAAAAAAAA4c/UzeJtspSXpI/s1600/vista-blog.JPG

No sé si será ese tema el culpable, pero al menos mejoró la vista en los telefonos!!!!

Mil graciaaaas!!!!

Responder
JMiur  

Pués no es mucho más lo que pueda decirte, los navegadores de los móviles siguen reglas particulares y como no los uso, no sé que se ve en ellos :D

Responder
mamadealess  

Gracias!!!!!...Ya había leido en otros comentarios que no tiene móvil!!!..Pero igual sé que una buena idea se le ocurrirá!!!!

Bueno: algo más mejoró haciendo:

center
div style="width: 90%;"
div style="background-color: #feefe4; margin: auto; padding: 1em; text-align: justify;"
............
/div
/div
/center

(no se que pasa, no pude poner los < y >!!)

Hasta aqui me llega la imaginación!!!....el resto puede ser de los navegadores del movil, como ud dice!!!
Al menos el scroll quedo mas cortito!!..jiji!!!
Gracias otra vez!!!

Responder
Tuxsnort  

Muy buen post,eres muy bueno explicando lo que sabes, podrías hacer una especie de guía de HTML y CSS a mi parecer

Responder
RafaMon  

De todas la explicaciones, y he leído muchas, eres el más didáctico, tienes una excelente capacidad para enseñar desde 0

Responder
RafaMon  

De todas las explicaciones, y he leído muchas, eres el más didáctico. Tienes gran capacidad de enseñar

JMiur  

Gracias, RafaMon :-$

Responder
joab vargas  

Tengo una consulta, como logro poner dos div´s a la par sin que el div que los contiene se extienda como si estuvieran uno estuviera bajo el otro??

JMiur  

Por ejemplo, agregándoles las propiedades width y float o bien display;inline-block; depende del resultado que se quiera obtener.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR