Cómo crear DIVs relativamente posicionados en Adobe Dreamweaver CS6

Cómo crear DIV relativamente posicionados en Adobe Dreamweaver CS6 - dummies

La precisión y el posicionamiento en píxeles de divisiones AP (posicionamiento absoluto) Divs en Adobe Dreamweaver CS6 puede ser muy liberador para los diseñadores, especialmente aquellos que les gusta la flexibilidad de los diseños basados ​​en impresión.

Sin embargo, en ciertas ocasiones, es posible que desee que las casillas fluyan en línea con otro contenido de la página. Las divisiones AP flotan sobre otros elementos, por lo que cambiar el contenido de otra página no tiene ningún efecto en su posición, lo que puede ser bueno o malo.

Para un comportamiento en línea más tradicional, puede crear DIV que usen posicionamiento relativo . Esto permite que un elemento se mueva junto con el contenido que lo rodea, lo que permite un diseño más líquido. Este tipo de posicionamiento es importante para el contenido anidado o cualquier situación en la que los elementos deben coincidir con el contenido de otra página.

Para esta tarea, use la herramienta Insertar etiqueta Div, que puede encontrar dentro de las categorías Común y Diseño del panel Insertar.

Siga estos pasos para crear una DIV relativamente posicionada:

  1. Haga clic dentro de su página para colocar el cursor dentro de una Divisor de AP existente y luego haga clic en la herramienta Insertar etiqueta Div en la sección Común y Diseño del panel Insertar categorías.

  2. Cuando aparezca el cuadro de diálogo Insertar etiqueta Div, ajuste la ubicación de su nueva DIV seleccionando una ubicación en la lista desplegable Insertar.

    Por ejemplo, elija After Start of Tag para colocarlo dentro de una etiqueta DIV existente en su página.

    También puede usar la lista desplegable del cuadro de diálogo Insertar etiqueta Div para colocar el DIV antes, después o dentro de los elementos existentes en la página. Deje la lista desplegable Insertar establecida en En punto de inserción para abandonar el cuadro donde lo dibujó o elija otra ubicación donde desee crear el DIV.

  3. Si tiene un selector de clase existente que desea aplicar, selecciónelo de la lista desplegable Clase; de lo contrario, déjelo en blanco.

  4. Si una ID existente no está disponible, ingrese un nuevo nombre en el campo ID y haga clic en el botón Nueva regla CSS para crear una.

  5. Cuando aparezca el cuadro de diálogo Nueva regla de CSS, asegúrese de que su nuevo selector esté configurado como ID y de que el nombre tenga un signo de libra (#) enfrente. Haga clic en Aceptar.

  6. Cuando aparezca el cuadro de diálogo Definición de regla CSS, haga clic y seleccione Posicionamiento en la lista Categoría a la izquierda para ver las propiedades de posicionamiento de CSS.

  7. En el área Posicionamiento, seleccione Relativo en el menú Posición, ingrese un valor de ancho y alto en los cuadros de texto Ancho y Altura, e ingrese un valor Superior e Izquierdo bajo las propiedades de Posicionamiento.Haga clic en Aceptar.

  8. Haga clic en Aceptar para cerrar el cuadro de diálogo Insertar etiqueta 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 DIV absolutos frente a los DIV relativamente posicionados. En el caso del posicionamiento relativo, estos valores indican un desplazamiento del contenido circundante, en oposición a una posición establecida dentro de la página.