Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 727

Visitas el mes pasado: 956

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Imágenes (II)

5.2 Posición de la imagen.

css

Imagen integrada en el texto

Podemos integrar la imagen en el texto usando sólo el código HTML, de manera que ésta quede a la izquierda o a la derecha del mismo. Para ello usaremos el atributo align en la etiqueta <image src=... align=... /> con los valores right o left; tal como se puede ver en la página 5.2 Estilo con HTML del manual de HTML

Sin embargo esta forma de posicionar las imágenes mediante el código HTML tiene algunas carencias, como el no poder dejar un margen (espacio en blanco) entre la imagen y el texto, ya que los atributos vspace y hspace sólo funcionan con Internet Explorer.

Podemos integrar la imagen en el texto mediante el código CSS, tratando la imagen como si se tratara de un elemento de bloque, con lo que le podemos insertar un margen interno (padding), un margen externo (margin) y un borde (border). Estas propiedades ya las hemos visto en las páginas de este mismo manual 2.4 Los bordes y 2.5 Los márgenes .

Para situar la imagen a la izquierda o a la derecha del texto, usaremos la propiedad float con los valores left (izquierda) o right (derecha). Esta propiedad se utiliza para el posicionamiento de elementos dentro de la página, y aunque la veremos más detenidamente en temas posteriores vamos a dar su definición.

Propiedad Float: Posicionamiento flotante

En realidad lo que hace la propiedad float es provocar un posicionamiento flotante, es decir, el elemento se coloca como "flotando" dentro de la caja que lo contiene, y se desplaza hacia la derecha (right) o hacia la izquierda, (left) de forma que fuerza a los demás elementos a ocupar el espacio que deja libre a sus lados

La propiedad float tiene la siguiente definición:


float Posicionamiento flotante
Valores left | right | none | inherit
Descripción Establece el tipo de posicionamiento flotante del elemento
Valor inicial none
se aplica a Todos los elementos

Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan y fluyen alrededor de la caja flotante.

El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza hacia la derecha.

El valor none permite anular el posicionamiento flotante de forma que el elemento se muestre en su posición original.

Ejemplos de imágenes insertadas en el texto.

A continuación mostramos unas imágenes insertadas en el texto, al lado suyo se muestra el código HTML y CSS necesario para visualizarlas.

imagen 1

IMAGEN 1:

Código HTML:

<img class="foto1" src="imagen1.jpg" alt="imagen 1">

Código CSS

.foto1 { padding: 10px; margin: 10px; border: 2px solid black; float: left; width: 250px; }

imagen 2

IMAGEN 2:

Código HTML:

<img class="foto2" src="imagen2.jpg" alt="imagen 2">

Código CSS

.foto2 { padding: 10px; margin: 10px; border: 2px solid black; float: right; width: 250px; }

La propiedad float nos permite colocar la imagen a la izquierda o a la derecha del texto. las propiedades padding y margin nos permiten controlar los espacios en blanco alrededor de la imagen, y la propiedad border nos permite poner un borde o marco alrededor de la imagen.

En el siguiente enlace se muestra una página de ejemplo en la que hemos colocado varias imágenes posicionadas a los lados del texto.

Ejemplo con imágenes.


El código fuente de la página del enlace anterior puedes verlo en este otro enlace:

Código de "Ejemplo con imágenes".



Imagen sin texto en los laterales

Podemos poner también la imagen sin texto alrededor, de forma que el texto quede por encima y por debajo de ésta, quedando los laterales de la imagen en blanco. En este caso podremos optar entre colocar la imagen a la izquierda, a la derecha, o en el centro.

Para ello haremos lo siguiente: en el código HTML incluiremos la etiqueta de imagen dentro de otra etiqueta de texto (etiqueta <p> por ejemplo), a la cual le aplicaremos la alineación izquierda, derecha o centro, mediante la propiedad text-align.

imagen 3

la imagen que aquí aparece tiene el siguiente código HTML (observese que a la etiqueta <p> se le ha aplicado una regla CSS mediante el atributo style)

<p style="text-align: center; "> <img src="imagen3.jpg" alt="imagen 3" width="200"></p>


Otras posiciones de la imagen

Más adelante, cuando tratemos el tema de "Posicionamiento" se verán otras formas de colocar los elementos en la página. Estos elementos no sólo pueden ser imágenes, sino también bloques de texto, columnas, y elementos contenedores. La imagen se puede tratar como si fuera un bloque de texto o una caja o elemento contenedor, y posicionarlo de la misma manera que éstos.




En la siguiente página trataremos el estilo del fondo

Estilo de fondos



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com