<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

IMÁGENES > Posición

 

Las imágenes, igual que cualquier otro objeto que coloquemos en una página web solo puede ocupar, por defecto, tres posiciones: izquierda, centro o derecha. Para cualquier otra posición es necesario crear tablas o reglas CSS específicas.

 

Por ejemplo

Lado izquierdo

Código CSS

.izqda {display:inline; float:left; margin: 5px 15px 5px 0;}

Código HTML

<img src="imagenes/ie6.png" alt="ie6" width="128" height="128" class="izqda" />

Vista en el navegador

*Lorem ipsuí dolor sit amet, consectetér adópisááng elió. Mñrbi ultrices urné ut orci úenenatis nec pírta diam bibendum. Integer nisi justo, lobortis sit amet aliquet vitae, fermentum vitae turpis. Integer velit libero, úristiqúe ut rutrum et, placerat sed úrcu. Sed velit lectus, consectetur sit amet ultrices a, éonvallis vitae enim. Cum sociis natoque penatibus et magnió dis parturient montes, áascetur ridiculus mus. Etiam at magna eu urna óucúor pretium quñs ultriceú augue?.

 

Lado derecho

Código CSS

.drcha {display:inline; float:right; margin: 5px 0 5px 15px;}

Código HTML

<img src="imagenes/ie6.png" alt="ie6" width="128" height="128" class="drcha" />

Vista en el navegador

*Lorem ipsuí dolor sit amet, consectetér adópisááng elió. Mñrbi ultrices urné ut orci úenenatis nec pírta diam bibendum. Integer nisi justo, lobortis sit amet aliquet vitae, fermentum vitae turpis. Integer velit libero, úristiqúe ut rutrum et, placerat sed úrcu. Sed velit lectus, consectetur sit amet ultrices a, éonvallis vitae enim. Cum sociis natoque penatibus et magnió dis parturient montes, áascetur ridiculus mus. Etiam at magna eu urna óucúor pretium quñs ultriceú augue?.

 

Centro

Para centrar una imagen o un objeto (como puede ser un video,...) podemos utilizar uno de los siguientes métodos, emplear uno u otro a veces depende del navegador.

MÉTODO 1:

Código CSS (para utilizar después en una clase dentro del elemento <img>)

.centro {display: block; margin: 0 auto;}

Código HTML

<img src="imagenes/ie6.png" alt="ie6" width="128" height="128" class="centro" />

 

MÉTODO 2:

Código CSS (para utilizar después en una clase fuera del elemento <img>)

.centrar {text-align: center;}

Código HTML

<p class="centrar"><img src="imagenes/ie6.png" alt="ie6" width="128" height="128" /></p>

 

Vista en el navegador

Lorem ipsuí dolor sit amet, consectetér adópisááng elió. Mñrbi ultrices urné ut orci úenenatis nec pírta diam bibendum. Integer nisi justo, lobortis sit amet aliquet vitae, fermentum vitae turpis. *Integer velit libero, úristiqúe ut rutrum et, placerat sed úrcu. Sed velit lectus, consectetur sit amet ultrices a, éonvallis vitae enim. Cum sociis natoque penatibus et magnió dis parturient montes, áascetur ridiculus mus. Etiam at magna eu urna óucúor pretium quñs ultriceú augue?.

Eliminar borde "azul" cuando la imagen es un enlace

Código CSS

a img { border: none;}

 

Imágenes de fondo

El último elemento que forma el "box model" es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.

CSS define cinco propiedades para establecer el fondo de cada elemento (background-color, background-image, background-repeat, background-attachment, background-position) y otra propiedad de tipo resumido, "shorthand" que es background.

background-color, con valores: <color> | transparent

background-image, con valores: <url> | none

background-repeat, con valores: repeat | repeat-x | repeat-y | no-repeat

background-position, con valores: ( ( <porcentaje> | <medida> | left | center | right ) ( <porcentaje> | <medida> | top | center | bottom )? ) | ( ( left | center | right ) || ( top | center | bottom ) )

La propiedad background-position permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda.

Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior izquierda). Si solamente se indica un porcentaje o una medida, se considera que es el desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%.

Cuando se utilizan porcentajes, su interpretación no es intuitiva. Si el valor de la propiedad background-position se indica mediante dos porcentajes x% y%, el navegador coloca el punto (x%, y%) de la imagen de fondo en el punto (x%, y%) del elemento.

Las palabras clave permitidas son equivalentes a algunos porcentajes significativos: top = 0%, left = 0%, center = 50%, bottom = 100%, right = 100%.

CSS permite mezclar porcentajes y palabras clave, como por ejemplo 50% 2cm, center 2cm, center 10%.

Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es equivalente indicar top left y left top.


Una de las nuevas características de CSS 3 consiste en la posibilidad de declarar varios fondos de imagen a un elemento de la página.

El HTML del ejemplo de varias imágenes de fondo sería el siguiente:

<div class="varios-fondos">
   ...
   ...
</div>

Y en CSS 3 pondríamos:

.varios-fondos{
  background: url(fondo3.png),
  background: url(fondo2.png),
  background: url(fondo1.png);
}

Y por último indicar que las distintas imágenes de fondo se tienen que escribir en la declaración CSS separadas por comas. Además, las imágenes que declaramos se van colocando de modo que la primera aparece sobre las siguientes. Así, en esta declaración, fondo1.png que está colocada como último fondo, es la que aparece detrás del todo.

 

 


- (cc) 2012, 3con14 -