Autor Tema: ¿Colocar un DIV dentro de otro DIV? HTML/CSS El div interno no se ve (Leído 26485 veces)

Dan_SB · « **en:** 08 de Noviembre 2015, 19:50 »

Buenas tardes a todos!

Vengo a hacerles una pequeña consulta técnica... resulta que hago un deber de la U, una pagina web. Tengo solo dos etiquetas DIV por ahora.... lo que quiero hacer es que mi DIV principal, este al centro de la pantalla (todo bien aqui) y que esa etiqueta vaya teniendo elementos en su interior (aquí es donde no se que ocurre..). Note que al agregarle la segunda etiqueta a la etiqueta central, lo que pasa es que la etiqueta principal se coloca encima de la ultima que añadí (cosa que no quiero para nada)... ¿Que propiedad usarían para lograr que una DIV admita mas Divisiones en su interior?... Yo tenia entendido que tan solo escribiendo asi todo saldria normal:

Código: [Seleccionar]

<div>
      <div>

     </div>
</div>

Mis etiquetas HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tienda de Videojuegos</title>
    <link type="text/css" rel="stylesheet" href="StyleSheet.css"/>
</head>
<body>
    <div id="cuerpos">
        <div class="login">

        </div>
    </div>
</body>
</html>

Codigo CSS:

Código: [Seleccionar]

body {
    background-color: black;
    font-family: 'Lucida Console';
    font-size: 25px;
}


#cuerpos{
    position: absolute;
	top:10%;
	left:49%;
	width:1000px;
	margin-left:-500px;
	height:1300px;
	margin-top:-350px;
	border:1px solid #808080;
	padding:5px;
    background-color:#0B0B61;
}

.login{
    width:300px;
    height:80px;
    background-color:#58ACFA;
    border: 5px solid;
    border-color: aliceblue;
    margin-left: 680px;
    position:absolute;
}

Como se ve con ambas etiquetas puestas:

Como se ve al eliminarle la DIV principal (la centrada):

Claramente se puede apreciar que mi etiqueta principal al colocarla se pone encima de la otra (cosa que no quiero), mas bien, qusiera que la otra se colocara encima de la principal (y asi sucesivamente).

Dan_SB · « **Respuesta #1 en:** 08 de Noviembre 2015, 21:08 »

Disculpenme, olviden el tema, el problema ya lo pude resolver.. resulta que por alguna razon u motivo, las propiedades margin-left y margin-top (las negativas "-") al incluirlas se colocaban sobre la etiqueta con marco blanco.

Ni idea porque ocurrio, tuve que modificarlo un poco con left y right con %. Esta seria una buena pregunta.. que se supone que ocurrio aqui?! xDDD!

Mario R. Rancel · « **Respuesta #2 en:** 09 de Noviembre 2015, 09:13 »

Hola Dan tratando de explicar lo que ocurre podríamos decir lo siguiente.

La clase login definida con .login tiene un posicionamiento absoluto respecto a su contenedor. Cuando existe el div con id cuerpos, el contenedor del div con class login es el otro div

Cuando no existe el div con id cuerpos, el contenedor del div con class login es el body

Al tener definido para cuerpos un posicionamiento absoluto con un desplazamiento hacia arriba con margin-top de -350px, el div con class login queda oculto fuera de la pantalla (digamos que queda dentro de la parte desplazada).

En este código se ve cómo aparece el div que estaba oculto (anulando algunas reglas css):

Código: [Seleccionar]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tienda de Videojuegos</title>
    <style type="text/css">
	body {
    background-color: black;
    font-family: 'Lucida Console';
    font-size: 25px;
}


#cuerpos{
    position: absolute;
	top:10%;
	left:49%;
	width:500px;
	/*margin-left:-500px;*/
	height:1300px;
	/*margin-top:-350px;*/
	border:1px solid #808080;
	padding:5px;
    background-color:#0B0B61;
}

.login{
    width:300px;
    height:80px;
    background-color:red;
    border: 5px solid;
    border-color: aliceblue;
    /*margin-left: 680px;*/
    /*position:absolute;*/
}

	</style>
</head>
<body>
   <div id="cuerpos">
	
        <div class="login"> Probando

        </div> 
     </div>
</body>
</html>

Realmente el problema está en tu forma de definir estilos en este ejemplo, ya que aparentemente estás haciendo cosas un tanto confusas o difíciles de entender, como desplazar a la derecha usando left:49%; y luego desplazar a la izquierda usando margin-left:-500px; esto no parece "razonable"

Saludos cordiales

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: