HTML - Encabezado fijo

 
Vista:
sin imagen de perfil
Val: 6
Ha aumentado su posición en 13 puestos en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Juan Bosco (4 intervenciones) el 30/10/2017 16:40:04
Buenos días!! Tengo el siguiente problema, estoy comenzando n HTML sin embargo ya logré hacer mi aplicación, solo que tiene un detalle, cuando la lista de registros que cargo de mi base de datos es mucha, al mover el scroll se mueve todo mi página jnto con el encabezado.
Probé con una solución donde pongo fixed el objeto encabezado, pero cuando hago eso la información de la tabla de datos se "solapa" con el encabezado.
Ojalaá alguien pudiera ayudarme.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 555
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Lopez (203 intervenciones) el 30/10/2017 23:47:00
Hola Juan,

Bienvenido a LWP.
Tienes algún ejemplo de lo que deseas hacer?
La verdad no me quedo muy claro el comportamiento que quieres programar,
ni donde deseas aplicarlo (Segun describes en el ancabezado no es),
pero con gusto estaré atento a apoyarte.

Saludos!

PS: Para mayor entendimiento, recuerda incluir tu codigo HTML+CSS+JS de lo que estas realizando.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 6
Ha aumentado su posición en 13 puestos en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Juan Bosco Camargo (4 intervenciones) el 31/10/2017 22:10:57
Abajo el compañero Pedro puso un ejemplo claro de lo que quiero, solo que al poner el cuerpo del resto del contenido de mi html se coloca encima de mi encabezado. es decir "lo invade", solo quiero que el resto del contenido respete el encabezado
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pedro
Val: 294
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Pedro (15 intervenciones) el 31/10/2017 09:09:28
Si no he entendido mal esto es lo que necesitas:
1
2
3
4
5
6
7
8
9
10
#main-header {
	background: #333;
	color: white;
	height: 80px;
 
	width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
	left: 0; /* Posicionamos la cabecera al lado izquierdo */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
}

Luego en el header aplicas el id del css y como siempre debes linkear a los estilos siempre y cuando los quieras poner a parte.
nQy8rY6
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 6
Ha aumentado su posición en 13 puestos en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Juan Bosco (4 intervenciones) el 31/10/2017 23:37:49
Es exactamente lo que quiero, solo que al poner el cuerpo del resto del contenido de mi html se coloca encima de mi encabezado. es decir "lo invade", solo quiero que el resto del contenido respete el encabezado
encabezado-solAPADO
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 555
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Lopez (203 intervenciones) el 01/11/2017 00:39:10
Hola Juan,

El pantallazo fue mas util. En tu primer post ya aclarabas habias usado la posision fixed,
y no te sirvió, ahora podemos entender que tu problema es el orden en los z-index.

Al no compartir codigo fuente, cosa que deberias hacer siempre,
te dejaré la logica css basandome en el codigo amablemente compartido por Pedro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#cabecera {
	background: #333;
	color: white;
	height: 80px;
	width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
	left: 0; /* Posicionamos la cabecera al lado izquierdo */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
 
/*https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index*/
 
       z-index:999999;
 
/*SI EL PROBLEMA PERSISTE*/
 
#contenido { 
	position: relative; /* Hacemos que la cabecera tenga una posición fija */
       z-index:1;
}
 
}

Cuentanos que tal ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Pedro
Val: 294
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Pedro (74 intervenciones) el 01/11/2017 11:38:11
Estoy totalmente de acuerdo con el Sr @Lopez estamos dando palos de ciego por no exponer el código, pero al mismo tiempo se nos ocurren cosas.

For example si es un contenedor div y dentro de ese contenedor tienes lo que muestra es cuestión de aplicarle un margin-top, como digo son sugerencias al no poder ver el sources.

Un abrazo cordial para ambos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 6
Ha aumentado su posición en 13 puestos en HTML (en relación al último mes)
Gráfica de HTML

Encabezado fijo

Publicado por Juan Bosco (4 intervenciones) el 01/11/2017 16:30:17
Al ver como organizaron el código me di cuenta que efectivamente estaba mal acomodo general del HTML, ya me di cuenta lo importante que es publicar el código, prometo hacerlo a la siguiente. Al acomodar correctamente se corrigió el problema. Estoy pagando caro la novatez en html.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar