Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » El main se pone encima de header

CSS - El main se pone encima de header

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Dennis
Val: 38
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por Dennis (15 intervenciones) el 28/02/2021 17:42:48
Saludos.
Porque cuando creo mi header y después el main, este ultimo se pone encima de el primero. Ya probé ponerle a ambos los position: absolute & relative, pero se ponen uno debajo del otro.
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: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por joel (252 intervenciones) el 28/02/2021 18:51:16
Sin ver el código no se muy bien como ayudarte... porque tienes puesto el position?
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 Dennis
Val: 38
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por Dennis (15 intervenciones) el 28/02/2021 19:22:09
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Inmoviliario</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
  <header>
    <div class="header__fondo">
      <img class="header__logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4PHrsepgYd-5taki5s8r6GpKjPCIkdi4QKA&usqp=CAU">
	    <nav class="header__navegation">
	        <ul class="header__navegation__lista">
		  <li><a href="#"> Inicio		</a></li>
		  <li><a href="#"> Servicios		</a></li>
		  <li><a href="#"> Sobre Nosotros	</a></li>
		  <li><a href="#"> Productos		</a></li>
		  <li><a href="#"> Contactos		</a></li>
		</ul>
	    </nav>
    </div>
  </header>
 
    <main>
      <section class="main__section1">
	<div class="main__section__galeria1">
		<div class="main__section__galeria__img1" class="main__galeria__img1"></div>
		<div class="main__section__galeria__img2" class="main__galeria__img1"></div>
		<div class="main__section__galeria__img3" class="main__galeria__img1"></div>
	</div>
	<div class="main__section__galeria2">
		<div class="main__section__galeria__img4" class="main__galeria__img2"></div>
		<div class="main__section__galeria__img5" class="main__galeria__img2"></div>
		<div class="main__section__galeria__img6" class="main__galeria__img2"></div>
	</div>
	</section>
    </main>
  </body>
</html>

Cabezera.css

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
/*---------------
		#Cabezera
	 --------------*/
 
.header__fondo
{
	background: url("https://markepymes.com/wp-content/uploads/2018/09/5-estrategias-de-marketing-inmobiliario.png");
	background-repeat: no-repeat;
	width: 100%;
	height: 500px;
	max-width: 100%;
	position: absolute;
	background-size: 100% 500px;
	top: 0;
	left: 0;
}
 
.header__logo
{
	width: 150px;
	height: 150px;
	border-bottom-right-radius: 50%;
}
 
.header__navegation{
	background-color: rgba(140,130,115,0.7);
	bottom: 0;
	position: absolute;
	width: 100%;
}
 
.header__navegation__lista{
	display: flex;
}
 
.header__navegation__lista li{
	display: inline-flex;
	width: 100%;
/*	border: 1px solid red;	*/
}
 
.header__navegation__lista li a{
	padding: 15px 20px;
/*	border: 1px solid blue;	*/
	border-radius: 10px;
	background-color: #73c6b6;
}
 
.header__navegation:hover{
	background-color: rgba(140,130,115);
	transition: .5s;
}
 
.header__navegation__lista a:hover{
	background-color: #2da48d;
	color: lime;
	transition: .5s;
}

Main.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body{
	background-color: #c8c8c8;
}
 
main{
	margin: auto;
	width: 100%;
	height: 1500px;
	border: 1px solid red;
	margin-top: 525px;
}
 
.main__section1{
	border: 1px solid blue;
	width: 100%;
	height: 500px;
}
 
.main__section__galeria1{
	border: 1px solid green;
	width: 100%;
	height: 250px;
	display: flex;
}

Para separar el main de header utilize margin-top: 525px; porque no daba con eso, trate con position, porque pense que era buena idea ,pero bueno, le agradeceria la ayuda
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: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por joel (252 intervenciones) el 28/02/2021 20:28:29
He probado tu codigo y no entiendo que quieres hacer... puedes explicar que resultado quieres obtener?
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 Dennis
Val: 38
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por Dennis (15 intervenciones) el 28/02/2021 21:47:27
Header: La navegacion tenga un bottom: 0;

Main: Aqui quiero hacer una minigaleria con 6 fotos, pero el primer problema es que estaba encima del header a no ser por el margin-top: 525px; que no estoy claro que eso este correcto pero es como pude separarlo.

main__section1: lo quiero es poner 3 fotos en main__section__galeria1 y main__section__galeria2, con flexbox, pero no lo logro aun, es decir que se separen ocupando el 100% del espacio, no se si hay otra forma mejor.

Los bordes de colores es para guiarme como esta quedando la maquetación.
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: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por joel (252 intervenciones) el 01/03/2021 08:08:32
Hola Dennis, pero el main tiene que ir debajo del header?
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 Dennis
Val: 38
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por Dennis (15 intervenciones) el 01/03/2021 12:07:11
Si, pero en la estructura de HTML lo tengo así, pero a la hora de revestirlo con css, no veo como puede caer debajo del header, a no ser por el margin-top, no se si me explico bien.
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: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por joel (252 intervenciones) el 01/03/2021 12:58:02
Si tiene que ir debajo, pero que utilizas el position?? por defecto los elementos que son block, se ponen uno debajo del otro!!!

Por que razón utilizas position??
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 Dennis
Val: 38
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por Dennis (15 intervenciones) el 01/03/2021 13:51:39
Bueno en el header si no lo pongo la imagen tiene un margen con respecto a lo bordes arriba-izquierda-derecha, pero cuando pongo position: absolute se pega completamente. A lo mejor pensarás que tengo que resetear los css, pero ya tengo un documento que lo hace que es este que lo descargue por recomendación, no recuerdo si fue aquí o en otro foro, pero la verdad es que no tengo ni idea de como arreglar este porblema:
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
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
li{ list-style-type: none; }
 
a{ text-decoration: none;}
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: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por joel (252 intervenciones) el 01/03/2021 14:08:56
Segun entiendo, has puesto los position porque no se pegaba a la parte superior de la web?

Te he modificado un poco el codigo para que te quede bien... hay bastante que revisar, pero he modificado para que se te pegue arriba y el main este debajo del header.

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
li{ list-style-type: none; }
 
a{ text-decoration: none;}
 
.header__fondo
{
	background: url("https://markepymes.com/wp-content/uploads/2018/09/5-estrategias-de-marketing-inmobiliario.png");
	background-repeat: no-repeat;
	height: 500px;
	background-size: 100% 500px;
    position: relative;
}
 
.header__logo
{
	width: 150px;
	height: 150px;
	border-bottom-right-radius: 50%;
}
 
.header__navegation{
	background-color: rgba(140,130,115,0.7);
    position: absolute;
    width: 100%;
	bottom: 0;
}
 
.header__navegation__lista{
	display: flex;
}
 
.header__navegation__lista li{
	display: inline-flex;
	width: 100%;
/*	border: 1px solid red;	*/
}
 
.header__navegation__lista li a{
	padding: 15px 20px;
/*	border: 1px solid blue;	*/
	border-radius: 10px;
	background-color: #73c6b6;
}
 
.header__navegation:hover{
	background-color: rgba(140,130,115);
	transition: .5s;
}
 
.header__navegation__lista a:hover{
	background-color: #2da48d;
	color: lime;
	transition: .5s;
}
 
body{
	background-color: #c8c8c8;
}
 
main{
	border: 1px solid red;
}
 
.main__section1{
	border: 1px solid blue;
	width: 100%;
	height: 500px;
}
 
.main__section__galeria1{
	border: 1px solid green;
	width: 100%;
	height: 250px;
	display: flex;
}
    </style>
</head>
 
<body>
    <header>
      <div class="header__fondo">
        <img class="header__logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4PHrsepgYd-5taki5s8r6GpKjPCIkdi4QKA&usqp=CAU">
          <nav class="header__navegation">
              <ul class="header__navegation__lista">
            <li><a href="#"> Inicio		</a></li>
            <li><a href="#"> Servicios		</a></li>
            <li><a href="#"> Sobre Nosotros	</a></li>
            <li><a href="#"> Productos		</a></li>
            <li><a href="#"> Contactos		</a></li>
          </ul>
          </nav>
      </div>
    </header>
 
      <main>
        <section class="main__section1">
      <div class="main__section__galeria1">
          <div class="main__section__galeria__img1" class="main__galeria__img1"></div>
          <div class="main__section__galeria__img2" class="main__galeria__img1"></div>
          <div class="main__section__galeria__img3" class="main__galeria__img1"></div>
      </div>
      <div class="main__section__galeria2">
          <div class="main__section__galeria__img4" class="main__galeria__img2"></div>
          <div class="main__section__galeria__img5" class="main__galeria__img2"></div>
          <div class="main__section__galeria__img6" class="main__galeria__img2"></div>
      </div>
      </section>
      </main>
    </body>
  </html>
</html>
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 Dennis
Val: 38
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

El main se pone encima de header

Publicado por Dennis (15 intervenciones) el 01/03/2021 14:15:46
Un millón de gracias, estoy con esto hace días.
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