- Software
- Adobe
- Dreamweaver
- Cómo alinear elementos con flotadores en Dreamweaver
Libro Relacionado
Por Janine Warner
Los diseñadores a menudo alinean una imagen, una
Crédito: La imagen de istockphoto.comCSS
ofrece muchas ventajas a la hora de alinear elementos como éste, pero la forma en que se configuran estos estilos no es tan obvia como se podría esperar al principio porque se utiliza la opción de flotar.
Después de que entienda que puede hacer flotar elementos, como imágenes, a la izquierda o a la derecha de una página, es bastante fácil crear estilos que logren este objetivo. En este ejercicio, aprenderás a crear dos estilos que son ideales para alinear imágenes a la izquierda y a la derecha de una página, con un pequeño margen justo donde lo necesitas.
Los diseños CSS incluidos en Dreamweaver CC ya tienen estilos de flotador que puede utilizar para alinear elementos a la derecha e izquierda. Estos estilos de clase se llaman .fltlft (para, lo adivinaste, flotar a la izquierda) y.fltrt (para flotar a la derecha).
Para crear dos estilos de clase que puede utilizar para alinear imágenes y otros elementos a la izquierda y derecha de una página, siga estos pasos:
- Dependiendo de lo que haya en la página, se añadirá al panel de selectores un nuevo nombre de estilo o un campo en blanco en el que podrá introducir un nombre de estilo.
- Haga doble clic para seleccionar el nombre que Dreamweaver añadió al panel y cambiarlo por el nombre que desee para su nuevo estilo, o haga clic para seleccionar el campo en blanco e introduzca un nombre. Puede nombrar el estilo como desee, pero asegúrese de introducir un punto antes del nombre si crea un estilo de clase o un signo # para un estilo ID.
- Aunque puede nombrar estos estilos como prefiera, los estilos de alineación se denominan comúnmente con las abreviaturas fltrt y fltlft, que significan flotar a la derecha y flotar a la izquierda respectivamente.por ejemplo, si crea un estilo para alinear elementos a la izquierda, lo llamaría .fltlft.
- En el panel Propiedades, haga clic en el icono que establece Flotador a la izquierda.
- Utilice la configuración de Margen en el panel Propiedades para crear un margen alrededor del elemento flotado; es una buena práctica añadir espacio de margen al lado opuesto de la configuración de flotación. Si está creando un estilo para hacer flotar una imagen a la izquierda, añada 5 ó 10 píxeles de espacio al campo Margen derecho. Al alinear una imagen a la izquierda de la página, se creará un margen entre la imagen y cualquier otro elemento que se encuentre junto a la imagen.
- Seleccione la imagen u otro elemento que desee alinear en la página.
- Seleccione el nombre del estilo que creó en el menú desplegable Clase en el inspector de propiedades Las reglas de estilo que definió cuando creó el estilo se aplican automáticamente. Si hubiera seleccionado una imagen en una página de texto, la imagen se movería a la izquierda de la página y el texto la rodearía con un margen entre la imagen y el texto.
- Repita los pasos 1-7, una vez con el flotador a la derecha y de 5 a 10 píxeles de espacio de margen en el campo Margen izquierdo en la categoría Caja, y de nuevo con el flotador a la izquierda y de 5 a 10 píxeles de espacio de margen en el campo Margen derecho en la categoría Caja.