- Software
- Adobe
- Dreamweaver
- Cómo crear DIVs relativamente posicionados en Adobe Dreamweaver CS6
Libro Relacionado
Por Jennifer Smith, Christopher Smith, Fred Gerantabee
La precisión y el posicionamiento al píxel de AP (Absolute-Positioned) Divs en Adobe Dreamweaver CS6 puede ser bastante liberador para los diseñadores, especialmente para aquellos a los que les gusta la flexibilidad de los diseños basados en impresión.
Sin embargo, en ciertas ocasiones, es posible que desee que las cajas fluyan en línea con otros contenidos de la página. Los AP Divs flotan por encima de otros elementos, por lo que cambiar el contenido de otras páginas no tiene ningún efecto en su posición, lo que puede ser algo bueno o malo.
Para un comportamiento en línea más tradicional, puede crear DIVs que utilicen posicionamiento relativo. Esto permite que un elemento se desplace junto con el contenido que lo rodea, lo que hace que la disposición sea más líquida. Este tipo de posicionamiento es importante para el contenido anidado o cualquier situación en la que los elementos deban estar en línea con el contenido de otras páginas.
Para esta tarea, utilice la herramienta Insertar etiqueta Div Tag, que puede encontrar en las categorías Común y Diseño del panel Insertar.
Siga estos pasos para crear un DIV relativamente posicionado:
- Haga clic en su página para posicionar el cursor dentro de una AP Div existente y, a continuación, haga clic en la herramienta Insertar etiqueta de Div en las categorías Común y Diseño del panel Insertar.
- Cuando aparezca el cuadro de diálogo Insertar etiqueta Div, ajuste la ubicación de su nuevo DIV seleccionando una ubicación de la lista desplegable Insertar. por ejemplo, seleccione Después del inicio de la etiqueta para colocarla dentro de una etiqueta DIV existente en su página. también puede utilizar la lista desplegable del cuadro de diálogo Insertar etiqueta Div para colocar la DIV antes, después o dentro de los elementos existentes en la página. Deje la lista desplegable Insertar en En el punto de inserción para dejar el cuadro donde la dibujó o elija otra ubicación donde desee que se cree el DIV.
- Si tiene un selector de clase existente que desea aplicar, selecciónelo de la lista desplegable Clase; de lo contrario, déjelo en blanco.
- Si un ID existente no está disponible, introduzca un nombre nuevo en el campo ID y haga clic en el botón Regla CSS nueva para crear uno.
- Cuando aparezca el cuadro de diálogo Nueva regla de CSS, asegúrese de que su nuevo selector esté configurado como ID y que el nombre tenga un signo de numeral (#) delante de él. Haga clic en Aceptar.
- Cuando aparezca el cuadro de diálogo Definición de la regla CSS, haga clic y seleccione Posicionamiento en la lista de Categorías de la izquierda para ver las propiedades de posicionamiento de CSS.
- En el área de Posicionamiento, seleccione Relativo en el menú Posición, introduzca un valor de anchura y altura en los cuadros de texto Anchura y Altura e introduzca un valor Superior e Izquierdo en las propiedades de Posicionamiento. Haga clic en Aceptar.
- Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar etiqueta de Div. Aparece un nuevo DIV relativamente posicionado con texto de marcador de posición.
Los valores superior e izquierdo se comportan de forma ligeramente diferente para los DIVs absolutos frente a los relativamente posicionados. En el caso del posicionamiento relativo, estos valores indican un desplazamiento del contenido circundante, a diferencia de una posición establecida dentro de la página.