HTML - body por encima de menu fijo

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

body por encima de menu fijo

Publicado por Alexander (3 intervenciones) el 06/04/2020 00:34:33
saludos.
tengo el siguiente problema, el codigo que muestro el body o cuerpo de la pagina se coloca por debajo de mi menu fijo, ahi esta el codigo espero que alguien me pueda ayudar y pueda ver en que estoy fallando o que no estoy colocando.
muchas gracias.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
 
 
<style type="text/css">
a {
    text-decoration: none;
    color: black;
}
 
.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index:10;
    height:80px;
}
.contenedor {
    text-align: center;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    color: white;
}
.hero {
       height: 38rem;
    background-image: url(/img/hero.jpg);
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 
}
nav.nav a {
    padding: 1rem;
    display: inline-block;
 
}
.hero h1 {
    max-width:800px;
    color: white;
}
.hero a {
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
}
 
</style>
</head>
 
<body>
 
 
<header class="contenedor fixed">
 
                <a href="/">
                    <img src="/img/logo.png" alt="Logo">
                </a>
 
            <nav class="nav">
                <a href="/iniciar-sesion"> Iniciar sesión  </a>
                <a href="/crear-cuenta"> Registrate</a>
            </nav>
</header>
 
<div class="hero">
        <h1>Es rápido y fácil.</h1>
        <a href="/crear-cuenta" class="btn">Abre una cuenta</a>
 
</div>
 
<div>
        <p>parrafo1</p>
        <br>
        <p>parrafo2</p>
        <br>
        <p>parrafo3</p>
        <br>
        <p>parrafo4</p>
        <br>
        <p>parrafo5</p>
        <br>
        <p>parrafo6</p>
        <br>
        <p>parrafo7</p>
        <br>
        <p>parrafo8</p>
        <br>
        <p>parrafo9</p>
        <br>
        <p>parrafo10</p>
        <br>
</div>
 
 
</body>
 
</html>
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 joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

body por encima de menu fijo

Publicado por joel (460 intervenciones) el 06/04/2020 08:16:26
Hola Alexander, que deseas hacer, que el contenido de la pagina pase por encima del menú?
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

body por encima de menu fijo

Publicado por Alexander (3 intervenciones) el 06/04/2020 18:45:30
Joel lo que quiero que el contenido de la pagina pase por detras del menu osea el menu se me queda fijo pero El contenido de la pagina se coloca atras cuando doy scroll
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 joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

body por encima de menu fijo

Publicado por joel (460 intervenciones) el 06/04/2020 21:00:57
He probado el código, y simplemente poniéndole un color de fondo al .contenedor se soluciona el problema!!
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: 5
Ha aumentado su posición en 15 puestos en HTML (en relación al último mes)
Gráfica de HTML

body por encima de menu fijo

Publicado por Alexander (3 intervenciones) el 07/04/2020 03:08:44
listo Joel. Muchas gracias y para que quede aqui la solucion voy colocar el cambio. en .contenedor agregue background-color: white;

1
2
3
4
5
6
7
8
9
10
.contenedor {
    text-align: center;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
      margin: 0 auto;
    color: white;
    background-color: white;
}


y para mejorar un poco la vista modifiqque en .fixed el height a 90px

1
2
3
4
5
6
7
8
.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index:10;
    height:80px;
}

y en . contenedor quite max-width: 1200px; espero que esto le ayude a otro y muchas gracias al amigo Joel que nos ayudo a mejorar este codigo.
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