Cómo mantener un encabezado estático que mueve Incluso cuando se desplaza en HTML

Cuando se agrega un encabezado de su página Web HyperText Markup Language (HTML), este elemento desaparece a medida que se desplaza hacia abajo en una ventana del navegador por defecto. Esto es a menudo problemático si tiene enlaces u otra información esencial que necesitan ser corregidos en su lugar para que siempre estén visibles. Utilización de hojas de estilo en cascada (CSS) en conjunto con el código HTML, puede mantener su cabecera estática por lo que ya no se mueve.

Instrucciones

1 Inicie la aplicación de editor de texto y abrir el documento Web que tiene el encabezado que desea modificar.

2 Coloque el cursor antes de la etiqueta de cierre </ head> y escriba el siguiente código CSS:

<Style type = "text / css">

cabecera {} {} contenedor

</ Style>

La regla de cabeza gestiona el contenido de su cabecera, mientras que el estilo contenedor controla el cuerpo principal de su página Web.

3 Enter "position: fixed;" entre llaves de la regla de cabecera y el tipo "background-color:;" y "altura:;" después de. Introduzca un valor de color hexadecimal después del atributo background-color, y escriba un valor numérico en píxeles después de la altura para definir esta medida. Para ilustrar:

cabecera {position: fixed; background-color: # FFFF00; altura: 100px; }

La posición fija especifica que desea que el encabezado de alojarse en lugar de la página, mientras que el color de fondo muestra un tono diferente para que su cabecera es visible ya que se mueve más allá de la página principal.

4 Tipo "margin-top:;" en el interior del contenedor de estilo e introduzca un valor numérico en píxeles que coincida con la altura de la cabecera. Su CSS completa ahora se ve como el siguiente ejemplo:

<Style type = "text / css">

cabecera {position: fixed; background-color: # FFFF00; altura: 100px; } Contenedor {margin-top: 100px; }

</ Style>

La adición de un margen a la regla de contenedores mueve su contenido principal debajo de la cabecera.

5 Enter "<div id =" header ">" antes de su código HTML de cabecera y el tipo "</ div>" al final. Además, el tipo "<div id =" contenedor "> </ div>" después de la cabecera e introduzca su contenido del sitio web entre estas etiquetas div. Para ilustrar:

<Div id = "header">
<H1> Esta es su cabecera. </ H1>
</ Div>
<Div id = "contenedor">
<P> Este es el contenido de la página. </ P>
</ Div>

6 Guarde el archivo. Su cabecera es ahora estática.