Problemas con div's

[dilan_snoopy]

saludos compañeros

lo que sucede es que tengo problemas para organizar el contenido de mi pagina web, es decir no puedo ubicar bien un div dentro del div del contenido alguien me podria ayudar si es alguna propiedad que me falta porque puedo centrar el div interno pero al hacer un margin top baja es el div de contenido y no el interno

como la imagen



este es mi fragmento html

Código:

  <!--***********************Cuerpo de la pagina*************--> 
                 <div id="contenido">
                        <div id="contenido-log">
                            <div id=log></div>
                        
                        </div> 
                   
                 </div>

y este es mi css

Código:

* {
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#e7e6e6;
    height: 100%;
    width: 100%;
}   

#contenedor{  
    width: 1000px;
    box-shadow: -15px 0 40px 0 rgba(0, 0, 0, 0.2),15px 0 40px 0 rgba(0, 0, 0, 0.2);
    background: #ccc;
    margin: 15px auto;
} 

/****************Banner de la aplicacio**************/
#header{
    width:1000px;
    background-color:#FFFFFF;
    height: 200px;
    margin-bottom: 10px;
    margin: 0 auto;
    padding: 0px;
}

/*****************Cuerpo de la aplicacion************/
#contenido{
    margin: auto;
    margin-top:36px;
    width: 1000px;
    background-color:rgba(206, 215, 214, 0.80);
    height: auto;
    text-align: center;
}

/**************Footer de la Aplicacion**************/
footer {
    clear: both;
    background-color: #cec9c9;
    text-align: center;
    padding: 0.4em;
    color: rgba(255, 0, 0, 0.87);
    border-top: 0.4rem solid #6a0f13;

}

footer h3,h4{
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    font: bold 90% monospace;
    color: #000;
}
/*******************Menu horizontal*******************/
#menu  {
      width: 100%;
      float: left;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; 
    
}

#menu  ul {
    margin-top:1px;
    width:100%;
    padding: .0em;
    float: left;
    list-style: none;
    background-color: #f2f2f2;
}

#menu  li {
    float:left;
}
#menu li  a {
      display: block;
      padding: 8px 8px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc;
 }

#menu a:hover, nav a:focus {
    outline: 0;
    color: #c00;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #fff;
 } 

#menu  a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 
#menu  li:first-child a {
    border-left: 0;
}
/***************Parte del Administrador*****************/
#menu-ver{
    width: 250px;
    height: 700px;
    background: rgba(0, 0, 0, 0.2);
    float: left;
}

#contenido-admin{
    width: 750px;
    height: 700px;
    background: #fff;
    float: right;   
    text-align: center;
}

#contenido-log{
   text-align: center;
   position: relative;
   width:1000px;
   height:500px;
   margin: auto;
}

#log{
    width: 400px;
    height: 300px;
    margin:0 auto;
    margin-top: 50px;
    background: #f00;
}

/************************Menu Vertical********************/
#nav { margin: 0; padding: 0; float: left; }
#nav li { list-style: none; background: #e7e6e6; width: 250px; border-bottom: 1px solid #666; }
#nav li a { display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; }
#nav li a:hover { border-left: 4px solid #069; background: #f8f8f8; }
#nav li ul { display: none; }
#nav li:hover ul { display: block; }
#nav li:hover ul li { background: #333; }
#nav li:hover ul li a { color: #ccc; }
#nav li:hover ul li a:hover { background: #222; border-left: 4px solid #900; }

si me quieren aconsejar algo mas sera bien recibido :D
gracias

[nikimoto]

buenas amigo
a simple vista veo que te falta ponerle comillas al identificador del div log
tu pones
<div id=log></div>
y seria
<div id="log"></div>
espero que esto te ayude
venga, un saludo

[dilan_snoopy]

gracias, los acomode pero no me sirvio :s no se porque me no me deja trabajar el div de log de manera centrada y con un margin top :s

[kike2lucas]

Entiendo que querés centrar el div rojo en el gris. Probá declarar el div="log" con position: absolute; y a partir de ahí le ajustás el margen en porcentaje o píxeles

algo así hasta que encuentres la posición

#log{
width: 400px;
height: 300px;
position: absolute;
margin-top:100px;
margin-left: 30%;
background: #f00;
}

[pzin]

Es un problema de colapsamiento de CSS.

Lo único que tienes que hacer es añadir al contenedor un overflow para evitar que los márgenes se colapsen.

Código CSS:

#contenido-log {
  overflow: auto;
}
 

Hay varias otras técnicas, como añadir bordes o relleno al contenedor.

Iniciado por nikimoto

buenas amigo
a simple vista veo que te falta ponerle comillas al identificador del div log
tu pones
<div id=log></div>
y seria
<div id="log"></div>
espero que esto te ayude
venga, un saludo

Si está usando HTML5 no hacen falta las comillas.

Iniciado por kike2lucas

Entiendo que querés centrar el div rojo en el gris. Probá declarar el div="log" con position: absolute; y a partir de ahí le ajustás el margen en porcentaje o píxeles

algo así hasta que encuentres la posición

#log{
width: 400px;
height: 300px;
position: absolute;
margin-top:100px;
margin-left: 30%;
background: #f00;
}

Un tanto bruto esto ¿no?

[dilan_snoopy]

saludos pzin, muchas gracias me sirvio tu ayuda :)

algun libro de css que me recomiendes ando nuevo en esto :D

saludos!!

[pzin]

Http://librosweb.es tienen buenos manuales sobre HTML/CSS/JavaScript y demás.