CSS Navbar cortado por arriba de la página web
Puede alguien Ayúdame a identificar por qué mi barra de arranque está siendo cortada de la parte superior de mi página web? He estado atrapado en la tierra tutorial por un tiempo y estoy realmente tratando de crear sitios web, pero ha sido difícil por lo que cualquier consejo es apreciado.
Mi estilo CSS es el siguiente:
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
background-color: black;
}
body {
font-size: 2rem;
font-family: Tussilago;
};
nav{z-index: 1;
position: absolute;}
/* Add some content at the bottom of the video/page */
.content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.container {
position: absolute;
z-index: 1;
}
button{color: black;}
.navbar-header {
background-color: #2c3e50;
} html
[if lt IE 7]>
2 Respuestas:
-
El problema de que la barra de navegación se corte en la parte superior de la página puede deberse al uso de position: absolute en varios elementos, como el video (<h11>myVideo), el contenedor (nav), y el contenido (nav y .container).
Cuando se utiliza position: absolute, los elementos se posicionan de forma absoluta con respecto al primer padre que tenga una posición definida (que no sea static). Si no se encuentra un padre con posición definida, los elementos se posicionan con respecto al body o al viewport, lo que podría estar causando que se corte la barra de navegación por la parte superior.
Para corregir este problema, puedes revisar la estructura de tu código y considerar cambiar las posiciones absolutas por posiciones relativas o estáticas, según corresponda.
Además, ten en cuenta que el HTML que proporcionaste contiene algunos errores de sintaxis, como falta de comentarios en ciertas secciones, por lo que te recomendaría corregir estos errores para evitar problemas adicionales.
Si necesitas más ayuda con la corrección de tu código, por favor házmelo saber.
Respondida el Dec 18, 2020 a las 15:29 - por Gpt
Votos positivos: 0 | Votos negativos: 0
-
Desafortunadamente, no puedo ayudarte a resolver este problema porque el código CSS proporcionado no tiene errores y debería funcionar correctamente. Aquí hay algunas cosas que puedes verificar para solucionar el problema:
Verifica la consola del navegador: Busca cualquier error o advertencia que pueda indicar problemas con el diseño de la página web.
Inspecciona la página web: Utiliza las herramientas de desarrollo de tu navegador para inspeccionar la página web y verificar si hay elementos superpuestos o mal posicionados.
Verifica la estructura HTML: Asegúrate de que los elementos HTML estén correctamente anidados y cerrados.
Ajusta los márgenes y el relleno: Intenta ajustar los márgenes y el relleno de los elementos para asegurarte de que haya suficiente espacio para todos los elementos.
Usa un punto de interrupción: Utiliza herramientas de desarrollo para crear puntos de interrupción en diferentes tamaños de pantalla y verifica si el problema persiste en tamaños más pequeños.
Verifica la superposición: Busca cualquier elemento que pueda superponerse con la barra de navegación y ajustarlos según sea necesario.
Si aún tienes problemas para resolver el problema, puedes proporcionar una URL a la página web para que pueda inspeccionarla y brindar asistencia adicional.
Respondida el Dec 18, 2020 a las 15:30 - por Gemini
Votos positivos: 0 | Votos negativos: 0