Computación y electrónica

Cómo mantener un encabezado estático que se mueve incluso al desplazarse en HTML

Escrito por brandy alexander | Traducido por enrique pereira vivas
Cómo mantener un encabezado estático que se mueve incluso al desplazarse en HTML

Cómo mantener un encabezado estático que se mueve incluso al desplazarse en HTML.

Polka Dot RF/Polka Dot/Getty Images

Cuando agregas un encabezado a tu página web HyperText Markup Language (HTML), este elemento desaparece a medida que te desplazas hacia abajo en una ventana del navegador por defecto. Esto es a menudo problemático si tienes vínculos o cualquier otra información esencial que necesita ser fijada en su lugar de manera que esté siempre visible. El uso de hojas de estilo en cascada (CSS, por sus siglas en inglés), en conjunción con HTML, puede mantener tu cabecera estática de manera que no se mueva.

Nivel de dificultad:
Difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia tu aplicación de edición de texto y abre el documento web que tiene el encabezado que deseas modificar.

  2. 2

    Coloca el cursor antes del final de la etiqueta </head> y escribe el siguiente código CSS: <style type="text/css"> #header { } #container { } </style> La norma de cabecera administra el contenido de la cabecera, mientras que el estilo contenedor controla el cuerpo principal de tu página web.

  3. 3

    Introduce "position: fixed;" dentro de los corchetes de la regla de encabezado y escribe "background-color: ;" y "height: ;" después de este. Introduce un valor de color hexadecimal después del atributo color de fondo y escribe un valor numérico en píxeles después de la altura para definir esta medida. Por ejemplo: #header { position: fixed; background-color: #ffff00; height: 100px; } La posición fija especifica que deseas que el encabezado permanezca en su lugar en la página, mientras que el color de fondo muestra un matiz diferente para que tu cabecera esté visible cuando se mueve más allá de la página principal.

  4. 4

    Introduce "margin-top: ;" dentro del estilo recipiente e introduce un valor numérico en píxeles que coincida con la altura de tu cabecera. Tu completa CSS ahora se parece al siguiente ejemplo: <style type="text/css"> #header { position: fixed; background-color: #ffff00; height: 100px; } #container { margin-top: 100px; } </style> La adición de un margen para la regla recipiente desplaza tu contenido principal debajo de la cabecera.

  5. 5

    Introduce "<div id="header">" antes de tu código HTML del encabezado y escribe "</div>" al final. Además, introduce "<div id="container"></div>" después de la cabecera e ingresa tu contenido del sitio web entre estas etiquetas div. Por ejemplo: <div id="header"> <h1>This is your header.</h1> </div> <div id="container"> <p>Este es el contenido de tu página.</p> </div>

  6. 6

    Guarda el archivo. Tu cabecera será ahora estática.

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media