ubiquitour.com

Cómo usar CSS para imagen de fondo de Navegación Horizontal de altura fija

Páginas web, como documentos de papel en las culturas más occidentales, están tradicionalmente orientadas verticalmente: contenido que no cabe en la página se extiende hacia abajo. Cascada de código de la hoja de estilo (CSS), sin embargo, es muy versátil, y puede forzar el exceso contenido de su página a la derecha en lugar de otro. Suprimir el desplazamiento vertical de la barra utilizando la propiedad "desbordamiento-y" y la propiedad de "espacio en blanco" para evitar que el contenido que fluye hacia abajo. Montar una imagen de fondo a la altura de la ventana del explorador para completar la plantilla de página horizontal.

Instrucciones

1 Agregue el código siguiente entre las etiquetas "head" del documento HTML:

< estilo tipo = "text/css" >

{cuerpo}

y overflow: hidden;

blanco-space: nowrap;

}

< / estilo >

2 Escribe un párrafo bastante largo que sobresalga el borde derecho de su página en el cuerpo del documento HTML. Guarde la página y cargar en un navegador Web. Aviso que el contenido no, pero se extiende horizontalmente tanto como sea necesario.

3 Particionar el espacio horizontal utilizando elementos span con su propiedad "display" a "inline-block." Por ejemplo, agregue la siguiente definición de clase para el código CSS en la sección "head":

.Partition {}

width: 500px;

Display: inline-block;

vertical-align: top;

blanco-space: normal;

}

La anchura de las particiones horizontales debe especificarse manualmente desde el borde del navegador ya no provoca la envoltura. Heredó la propiedad de "espacio en blanco" del cuerpo por defecto, por lo que se invalida para envolver texto y contenido dentro de cada partición. Añadir elementos "span" asignados a la clase de "partición" para el cuerpo del documento, colocar el contenido a ser agrupados dentro de cada uno. Recuerde que si un período de "partición" contiene más contenido que cabe en él, que el contenido se extienden de la parte inferior de la ventana y ser inaccesible.

4 Agregue las siguientes líneas en el bloque de "cuerpo" en el código CSS, reemplazando "background.jpg" con el nombre de archivo de la imagen para agregar una imagen de fondo que tiene un tamaño a la altura de la ventana del navegador:

background-image:URL('background.jpg');

tamaño del fondo: contienen;

Consejos y advertencias

  • Agregue la siguiente etiqueta en la parte superior del documento HTML para asegurar la compatibilidad con Internet Explorer:
  • <! HTML de DOCTYPE público "-//W3C//DTD HTML 4.01 / / EN" "del http://www.w3.org/TR/html4/strict.dtd" >