Cómo hacer un diseño avanzado Div

Al crear una página web, es una práctica común el uso de una división de sostener y contenido de posición en su página. Algunos diseñadores Web utilizan DIVs para reemplazar tablas tradicionales, para reemplazar a los marcos y, en algunos casos, simplemente para posicionar una imagen o comentario. Es posible crear un diseño avanzado utilizando DIVs como el elemento principal de organización, la incorporación de los marcos, tablas, imágenes y otros contenidos que desea, asegurando que todo se muestra tal y como lo tenía planeado.

Instrucciones

1 Hacer un dibujo o imagen digital de sus planes para el diseño de página web final. Esto le dará una idea de dónde es necesario crear DIVs y la forma de organizar de manera adecuada.

2 Crear un DIV contenedor del tamaño que desea que aparezca la página. Por ejemplo, si desea que su página para mostrar un máximo de 1.000 píxeles de ancho, crear un DIV con ese ancho de mantener las divisiones más pequeñas y una altura igual a la longitud de su contenido. Añadir "desbordamiento-x: hidden;" para evitar DIVs interior se extienda hacia la derecha más de lo que desea. Esto permite también que el valor de Y para ajustar según sea necesario.

3 Crear las divisiones en el interior del contenedor DIV que servirá como sus marcos si se desea. Si usted quiere un marco en la parte superior de la página, hacer un DIV una posición absoluta con cero distancia desde la parte superior e izquierda y una anchura igual al cien por cien de la página. Coloca el contenido de la barra de título dentro de este DIV.

4 Inserte un DIV barra de navegación, si se desea. Por ejemplo, si quieres un menú vertical de la izquierda de la pantalla, cree una división de la anchura de su menú y, a continuación, añadir "float: left;" a las propiedades. Esto asegura la barra de navegación aparece debajo de la barra de título y de la izquierda de la página.

5 Crear un DIV contenido de posición absoluta con el valor de la izquierda igual a la anchura de la barra de navegación superior y un valor igual a la altura de la barra de título. Restar el ancho de la barra de navegación de la anchura de la DIV contenedor, y utilizar el resultado como la anchura de su división de contenido. Esto asegura que el contenido DIV es el tamaño perfecto para alinearse con los bordes de la página.

6 Usa DIVs más pequeños para los elementos dentro del DIV contenido, como imágenes o tablas. Utilice el posicionamiento absoluto para asegurarse de que aparecen correctamente a todos los usuarios, y añadir un alto índice Z para mostrar el objeto por encima de otro tipo de contenido. Borrar cualquier comando dentro del código que no es necesario para un DIV específica. Por ejemplo, si no desea especificar la altura, copiar el código y borrar el atributo de altura.

Consejos y advertencias

• <Div style = "position: absolute; top: 0px; left: 0px; ancho: 900px; height: auto; overflow-x: hidden; z-index: 100;"> DIV CONTENIDO AQUÍ </ div>
• DIVs cambiarán de tamaño automáticamente para ajustarse contenido si no se especifican medidas de la anchura o altura.
• DIVs que se posicionan como "absoluta" o "fijo" no se puede utilizar el atributo de "flotar".
• Un DIV creado dentro de otro posicionará en relación con la división de los padres. Si desea colocar esté basada exclusivamente en el borde del navegador, no anidan las divisiones.