HTML - duda sobre <div>

 
Vista:

duda sobre <div>

Publicado por javier alejandro (3 intervenciones) el 01/06/2021 22:05:46
hola, muy buenas a todos.
como les comente en otra ocacion, estoy aprendiendo y tengo una duda:
ultimamente estoy dandole F12 a toda pagina web que se me cruce por el camino y note que muchas usan <div> dentro de otros <div>. mu pregunta es ¿que diferencia hay en poner uno solo y poner uno dentro de otro?
por ejemplo:

1
2
3
4
5
6
7
8
9
10
<div>
        <nav>
        	<a href="Inicio">Inicio</a>
        	<a href="Imagenes">Imagenes</a>
        	<a href="Programas">Programas</a>
        	<a href="Registro">Registro</a>
        	<a href="Contacto">Contacto</a>
        	<a href="Ayuda">Ayuda</a>
        </nav>
</div>
O!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
    	<div>
    		<div class="toolbar">
     		   <nav>
      		  	<a href="Inicio">Inicio</a>
      		  	<a href="Imagenes">Imagenes</a>
     		   	<a href="Programas">Programas</a>
     		   	<a href="Registro">Registro</a>
     		   	<a href="Contacto">Contacto</a>
     		   	<a href="Ayuda">Ayuda</a>
     		   </nav>
    		</div>
    	</div>
</div>
lo hice asi para que se den una idea de lo que estoy diciendo.
bueno, espero me pueda sacar las dudas porque busque en internet pero me sale como usar la etiqueta y para que sirve pero no me saca esta duda.
desde ya muchas gracias
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

duda sobre <div>

Publicado por joel (460 intervenciones) el 02/06/2021 08:14:01
Hola Javier, en el primer ejemplo, solo hay un <div>, pero en el segundo que hay dos, faltaría ver los estilos... a simple vista, no tiene mucho sentido, ya que un <div> dentro de otro sin estilos hace lo mismo, pero con estilo puede cambiar por completo.

Si miras el código fuente de este pagina o cualquier otra, veras que esto se da muchas veces, pero cada <div> tiene un estilo diferente o engloba a otros <div>
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

duda sobre <div>

Publicado por javier alejandro (3 intervenciones) el 03/06/2021 18:53:58
hola joel, al contenido no le des importancia, solo lo puse ahi de relleno para que no este el <div> solo.
mi duda era ¿por que se usa un <div> dentro de otro <div>? y por lo que entendi es para separar estilos. lo que me llevo a hacer un codigo para ver la diferencia pero no, la verdad que no le encontre la vuelta.
podrias darme un ejemplo? de como hacerlo. si no es mucha molestia, obviamente.
si queres te paso el codigo para que lo mires, es muy corto y basico, y no se si esta bien hecho pero bueno... estoy aprendiendo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
	<title>sensember</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="titulo">
		<h1>prubea</h1>
	</div>
	<div class="lor1">
		<div class="lor2">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
	</div>
</body>
</html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.titulo
{
	color: #0e93f6;
	text-align: center;
	text-decoration: #000;
	border-top: 25%;
}
.lor1
{
	position: relative;
	background-color: #db51d9;
}
.lore2
{
	position: absolute;
	background-color: #6851db;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 20px;
}
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

duda sobre <div>

Publicado por joel (460 intervenciones) el 04/06/2021 07:44:10
Hola Javier, he modificado un poco tu código, para poner por ejemplo el texto con una anchura mas pequeña, pero mostrando el fondo con toda la anchura del navegador.

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
<!DOCTYPE html>
<html>
<head>
	<title>sensember</title>
</head>
<body>
	<div class="titulo">
		<h1>prubea</h1>
	</div>
	<div class="lor1">
		<div class="lor2">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    		tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
</body>
</html>
 
<style>
.titulo
{
	color: #0e93f6;
	text-align: center;
	text-decoration: #000;
	border-top: 25%;
}
.lor1
{
	background-color: #db51d9;
}
.lor2
{
    width:600px;
	margin: auto;
}
</style>
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

duda sobre <div>

Publicado por javier alejandro (3 intervenciones) el 04/06/2021 21:10:16
buenas tardes.
me fije pero me aparece un solo color, el rosa, no estoy entendiendo mucho para que sirve tener uno dentro de otro.
jajaja perdon pero no veo una diferencia como para decir "ah, es para esto". tal vez tengo que ver algun curso de css
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

duda sobre <div>

Publicado por joel (460 intervenciones) el 05/06/2021 08:22:08
No se donde estas mirando el código... pero para este ejemplo, yo veo esto:

Screenshot

Tu como lo ves?
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