¿Cómo alinear elementos con flotadores en dreamweaver

Los diseñadores a menudo se alinean una imagen, una etiqueta o un elemento más a la izquierda oa la derecha de una página web en Dreamweaver y luego envolver cualquier texto u otro contenido en torno a ese elemento. La imagen se alinea a la derecha de la columna para que el texto se ajusta al lado de la izquierda. En los pasos que siguen, a encontrar la manera de crear estilos como éste.

[Imagen de istockphoto.com]

CSS ofrece muchas ventajas cuando se trata de elementos como esta alineación, pero la manera de configurar estos estilos no es tan evidente como se podría esperar en un principio porque se utiliza la opción de flotación.

Después de comprender que se puede flotar elementos, tales como imágenes, a la izquierda oa la derecha de una página, que es bastante fácil de crear estilos que logran este objetivo. En este ejercicio, aprenderá a crear dos estilos que son ideales para la alineación de las imágenes a la izquierda ya la derecha de la página, con un poco de margen justo donde lo necesita.

Los diseños de CSS incluidos en Dreamweaver CC ya tienen estilos de flotador que se pueden utilizar para alinear elementos a la derecha ya la izquierda. Estos estilos de clase se denominan .fltlft (Por, lo has adivinado, flotar izquierda) y .fltrt (Por flotación derecha).

Para crear dos estilos de clase que se pueden utilizar para alinear las imágenes y otros elementos a la izquierda y derecha de una página, siga estos pasos:

  1. Haga clic en el signo más en el panel de selectores CSS diseñador.

    Dependiendo de lo que está en la página, un nuevo nombre de estilo o un campo en blanco donde se puede introducir un nombre de estilo se añade al panel de selectores.

  2. Haga doble clic para seleccionar el nombre que Dreamweaver añade al panel y cambiarlo por el nombre que desea para su nuevo estilo, o haga clic para seleccionar el campo en blanco e introduzca un nombre.

    Video: Tutorial Como Centrar Vertical y Horizontalmente con CSS

    Si no se añade ningún nombre, escriba el nombre que desee en el campo vacío. Puede nombrar el estilo que te gusta nada, pero asegúrese de introducir un punto antes del nombre si crea un estilo de clase o un signo # para un estilo de identificación.

  3. Haga doble clic en el nuevo nombre y editar como desee.

    Aunque se puede nombrar a estos estilos de lo que usted prefiere, estilos de alineación son comúnmente denominados con el fltrt y fltlft abreviado, que se destacan por la derecha del flotador y el flotador la izquierda respectivamente.

    Por ejemplo, si crea un estilo para alinear elementos a la izquierda, que le nombrarlo .fltlft.

    Video: Como centrar un div, ponerlo a la derecha o izquierda con CSS y HTML | Por Mastersitios.com

  4. En el panel Propiedades, haga clic en el icono que establece Flotante a la izquierda.

  5. Utilice la configuración de margen en el panel Propiedades para crear un margen alrededor del elemento flotante.

    Es una buena práctica añadir espacio de margen en el lado opuesto de la configuración del flotador. Si va a crear un estilo de flotar una imagen a la izquierda, añadir 5 o 10 píxeles de espacio en el campo margen derecho. Al alinear una imagen al lado izquierdo de la página, se creará un margen entre la imagen y cualquier otro elemento que envuelve al lado de la imagen.

  6. Seleccione la imagen o cualquier otro elemento que desea alinear en la página.

  7. Seleccione el nombre del estilo que ha creado en la lista desplegable Clase del inspector de propiedades.

    Las reglas de estilo que ha definido al crear el estilo son aplicados de forma automática. Si se ha seleccionado una imagen en una página de texto, la imagen se moverá hacia el lado izquierdo de la página y el texto se envolvía alrededor de ella con un margen entre la imagen y el texto.

  8. Repita los pasos 1-7, una vez con el flotador ajustado a derecho y de 5 a 10 píxeles de espacio de margen en el campo Margen izquierdo en la categoría caja, y otra vez con el flotador fijado a izquierda y de 5 a 10 píxeles de espacio en el margen de la derecha campo de margen en la categoría de la caja.

Artículos Relacionados