JMiur [E]

Todos los elementos de una página web son rectángulos. Cuando agregamos alguno, lo que hacemos es decirle al navegador que cree un área rectangular con un cierto contenido. Algunos de esos elementos son bloques, es decir, se separan del elemento inferior con un salto de línea (se apilan) y otros no lo son (inline), no se separan, se colocan uno al lado del otro.

Por ejemplo, si agregamos dos imágenes y escribimos:
<img src="imagen1" /><img src="imagen2" />
Se mostrarán una al lado de la otra porque IMG es un elemento inline.


Sin embargo, si colocamos cada una dentro de un DIV, se mostrarán una debajo de la otra porque DIV es un elemento de tipo block.
<div><img src="imagen1" /></div><div><img src="imagen2" /></div>

Usando la propiedad display, podemos establecer el comportamiento de un elemento así, que, podríamos hacer que una etiqueta que normalmente es inline se comporte como block:
<img style="display:block;" src="imagen1" /><img style="display:block;" src="imagen2" />

Y viceversa:
<div style="display:inline;"><img src="imagen1" /></div>
<div style="display:inline;"><img src="imagen2" /></div>

Esto no es cierto, puede decir alguien; puse dos imágenes comunes y sin agregar propiedades, aparecieron una debajo de otra ¿hay algún un error?

No, no es un error, lo que ocurre es que, si el espacio necesario para contener ambas imágenes es menor que la suma del ancho de las mismas, el navegador empuja la segunda hacia bajo.

Veamos una simulación de ejemplo. Estas dos imágenes tienen 120x90 pixeles. Las coloco dentro de un bloque DIV que tiene 400 pixeles de ancho con un código así:
<div style="width:400px;">
<img src="imagen1" /><img src="imagen2" />
</div>

Ahora, voy a hacer lo mismo pero el bloque DIV será más chico, digamos 200 pixeles de ancho:
<div style="width:200px;">
<img src="imagen1" /><img src="imagen2" />
</div>

Como la segunda no tiene lugar, se desplaza hacia abajo:


Pero ¿y si quiero que se superpongan? ¿acaso en una página web dos elementos pueden ocupar el mismo espacio contradiciendo las leyes de la física? La respuesta es sí. En CSS hay propiedades que controlan la posición de los elementos; para eso, primero lo debemos indicar agregando position:relative; y luego, con las propiedades left y top podemos modificar la posición ... pero eso será mañana.

10 comentarios:

solrac  

muy interesante :o

seguiré atentamente las próximas explicaciones ;)

Responder
JMiur  

Espero que te sean útiles :)

Responder
Leandro Comeglio  

Felicitaciones!!!Tu Blog ha sido nominado a los "Premios BLOGSPOT". Por tu destacado labor y desempeño que le has puesto a tu blog, te he nominado a los "Premios BLOGSPOT".
Para votar a los nominados tienen que meterse a: www.premiosblogspot.blogspot.com
Por LEANDRO COMEGLIO.

Responder
mefistum  

En el blog de LEANDRO COMEGLIO dice: El 7 de Febrero empieza la votación, y por si aún no hemos entendido agrega: PODRAN VOTAR DESPUES DEL 6 DE FEBRERO
Dime si no es genial Internet :D

Cuando entré por primera vez a tu blog no entendí nada, lo único que hice fue copiar algunos códigos y punto. Hoy, para mi sorpresa, si supe de lo que hablas y lo digo en serio.
Más allá de LEANDRO COMEGLIO, te mereces un premio o por lo menos un agradecimiento porque para que un durazno como yo entienda... uff.

Saludos.

Responder
JMiur  

Gracias, mefistum, es un honor escuchar ese tipo de cosas :D

Por cierto, Leandro merece un párrafo aparte.

Amigo Leandro. Voy a suponer que actuas de buena fe, gracias, muy amable y todo eso pero, no sé dónde has leido o quién te ha sugerido que este tipo de prácticas es un buen método para conseguir visitas. Este comentario es una copia de los otros CINCO que has colocado en el blog, uno detrás de otro y que he eliminado, uno detrás de otro: 1, 2, 3, 4

¿Era necesario escribir lo mismo cinco veces? Muchos, considerarían eso como spam, yo, voy a decir que sólo es una torpeza.

Responder
Gem@  

Muy buena explicación, a veces pienso lo interesante que sería agrupar tus entradas por orden alfabeticemos o asignar una única categoría a cada tema. Es muy complicado ya lo sé, porque un mismo tema puede estar relacionado con varias categorías o etiquetas.
Me pierdo muchas veces buscando en la nube eso es lo que pasa. Pero el dilema no es ese porque siempre encuentro algo que llama mi atención el dilema es que me olvido lo que venía buscando :D

Llegará lejos Leandro...

Responder
Gem@  

alfabético quise decir por orden alfabético, sorry....

Responder
JMiur  

Si se te ocurre algo, soy todo oidos :D

Sin duda que se torna complejo porque, como dices, todo termina relacionándose entre si y las etiquetas no son un método adecuado para organizarse. Lo idea sería un buscador más preciso o algo así. La verdad, no sé :D

Responder
sebastian  

Excelente post. Me ha ayudado a resolver un enorme problema con imágenes que tenía.

Muchas gracias.

Responder
JMiur  

Me alegro, Sebastián; gracias por el comentario.

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