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

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
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).
« Última modificación: 09 de Noviembre 2015, 09:12 por Mario R. Rancel »
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Re:¿Colocar un DIV dentro de otro DIV? HTML/CSS
« 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!
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1950
    • Ver Perfil
Re:¿Colocar un DIV dentro de otro DIV? HTML/CSS El div interno no se ve
« 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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".