Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Posicionamiento de imagenes

Posicionamiento de imagenes

Escrito por Administrador - 10/septiembre/2011


Es muy importante siempre colocar una imagen o ilustracion en el contenido de una pagina de web, es decir algo descriptivo de lo que estamos hablando.

Y siempre hay ocaciones en las que queremos talvez que una imagen este alineada a la izquiera, derecha o simplemente centrada, y de eso hablaremos hoy de controlar el posicionamiento de las imagenes. Y para eso vamos a utilizar varios atributos que nos ayudara. vamos a empezar...


Al poner una imagen por defecto siempre se va a colocar a la izquierda justo como esta:



Pero uno suele aburrirse de siempre ver las imagenes alineadas a la izquierda...
Por eso que les parece si alineamos una imagen a la derecha justo como se muestra acontinuacion:










y bien para alinear la imagen a la derecha pusimos un "float:rigth" en la etiqueta style de la imagen justo asi:

<img style="float:right" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif"/>


Y haora vamos a centrar la imagen, hay varias forman de centrar una imagen pero segun yo la mejor es encerrar la imagen con el atributo "<center>"
 


Como ya lo habia mencionada para centrar la imagen utilizamos en atributo "center" justo asi:

<center><img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" /></center>


Y bueno vamos a aumentar la dificultad, para hacer una ilera de imagenes sin salto de linea como se muestra a continuacion:




Para hacer una linea de imagenes justo como la acabamos de ver no hay que hacer gran cosa, ya que las imagenes por defecto se van alineando a la derecha en el espacio determinado donde estan... una por una sin salto de linea, para esto seria algo asi:

<img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />
<img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />
<img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />


Haora vamos a hacer una linea de imagenes pero con salto de linea como se muestra acontinuacion:




 

Para hacer esa linea con salto de linea vamos a utilizar el atributo "br" en las imagenes justo asi:

<img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" /></br>
<img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" /></br>
<img alt="" src="https://img.webme.com/pic/s/souldhack/souldhack.es.tl.gif" />


Y por ultimo vamos a poner una imagen de lado derecho y otra del lado izquierdo sin salto de linea como se muestra acontinuacion:



Y bueno para esto usamos el atributo span con ciertas caracteristicas justo asi:

<div><span style="float:right"><img alt="" src="URL DE TU IMAGEN DERECHA" /></span><img alt="" src="URL DE TU IMAGEN IZQUIERDA" /></div>

Sin duda un articulo muy util para poder posicionar una imagen en donde querramos, no solo podemos aplicar esto con imagenes sino tambien podemos aplicarlo en texto, enlaces, tablas y mas elementos.





Acerca del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos



Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=