Problema con posicion de div dentro de otro

[HHnn]

Tengo un div como el siguiente:

Código:

<div align="right" style="position: absolute; left: 400px; top: 20px; z-index:99; width:400px;"><img src="img.png" /></div>

ese div se encuentra dentro de otro div, pero el problema es que la posición se sitúa en base a la página y yo quiero que se sitúe en base al div contenedor, por lo que ahora se posiciona sobre el encabezado de la página en vez de posicionarse en el lugar que quiero.

[deirdre]

Hola HHnn

Al otro div, el que lleva a este dentro, le pones en el estilo position: relative. De esta forma el div que está dentro (el que mencionas), al llevar position: absolute, se posicionará respecto a su div "padre".

Bye

[HHnn]

Gracias deirdre, lo hice como djiste y funcionó.

[kennyhp]

Y si por ejemplo tengo un div contenedor principal, dentro una cabezera, donde ademas quiero meter mas divs para colocar las cosas y un div de contenido, con sus divs correspondientes, como decido la position de cada uno de ellos??

[deirdre]

Hola kennyhp

Pon el código completo y lo que deseas obtener exactamente y veremos. Así en "abstracto" es imposible contestarte.

Bye

[kennyhp]

Hola, actualmente tengo esto:

Código:

body {  
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;  
   margin: 5px 0 10 0px;  
   text-align: center;  
   background-color: #ebebeb;  
}  
#contenedor{  
   text-align: left;  
   width: 1024px;  
   margin: auto;  
}  
#pie{  
        
    background-color:#E1E7EB; 
    background-image:url(img/fondo_pie.png); 
    background-repeat:repeat-x; 
    border:1px solid #D4D4D4; 
    color:#000000; 
    padding:8px 10px; 
    height:84px; 

}  
#cabecera{  
    background-color: #FFFFFF;  
    background-image: url(img/cabecera2.png); 
    background-repeat:no-repeat; 
    background-position: right top; 
    height:150px; 
    color: #333300;  
    font-size:12pt;  
    font-weight: bold;  
    padding: 5px 3px 3px 10px;  
}  
#cabecera h2 a { 
    background-image:url(./../Images/logo.png); 
    background-repeat:no-repeat; 
    display:block; 
    height:159px; 
    margin:-22px 50px 0; 
    outline-color:-moz-use-text-color; 
    outline-style:none; 
    outline-width:0; 
    width:250px; 
} 
#cuerpo{  
   margin: 10 0 10 0px;  
}  

#articulos 
{ 
    padding:5px 10px 0px 10px; 
    background-color: #FFFFFF 
} 

#lateral ul{  
   margin : 0 0 0 0px;  
   padding: 0 0 0 0px;  
   list-style: none;  
}  
#lateral li{  
   background-color: #ffffcc;  
   margin: 2 2 2 2px;  
   padding: 2 2 2 2px;  
   font-weight: bold;  
}  
#lateral a{  
   color: #FFFFFF;  
   text-decoration: none;  
}  
#lateral{  
   width: 30%;  
   background-color: #999999;  
   float:right;  
}  
#principal{  
   background-color: #ffffff;  
   padding: 4 4 4 4px;  
   margin-right: 170px;  
   width:70%; 
   height:100%; 
   display:block; 
}

Código:

  <div id="contenedor"> 
        <div id="cabecera"> 
            <h2> 
                <a title="Todas las noticias sobre videojuegos, analisis y articulos. Niente Games" 
                    href="http://www.nientegames.com"></a> 
            </h2> 
        </div> 
        <div id="cuerpo"> 
            <div id="lateral"> 
            <div id="articulos" > 
CONTENIDO 
            </div> 
            </div> 
            <div id="principal"> 
                CONTENIDO 
            </div> 
        </div> 
        <div id="pie"> 
            NienteGames.com, todas las noticias de un solo vistazo. Para que no te pierdas ni 
            una. 
        </div> 
    </div>

Puedes ver como lo tengo en www.nientegames.com

Lo que me gustaría, y no consigo es poder colocar divs a mi gusto y que queden bien dentro de estos divs, por ejemplo, dentro de la cabezara quiero poner un campo de busqueda y unos textbox de login, cada uno con su div, pero no hay manera de que queden ubicados dentro de la cabecera, quiero poner un div dentro del cuerpo y que quede justo debajo de la cabecera, pero tampoco consigo colocarlo bien...

Gracias!

[deirdre]

Hola

Esto que te pongo podría servirte como prototipo de ayuda a tu propósito de añadir esos div que mencionas. Por supuesto que sólo es una aproximación y que debes ajustarlo a tus tamaños, posiciones, etc.

He puesto los estilos dentro de las etiquetas html sólo a efectos didácticos, para que sea más fácil ver como se juega con las posiciones relativas y absolutas para conseguir lo que se desea. Naturalmente en el trabajo definitivo es mejor pasar los estilos a la hoja de estilo. Lo mismo digo de los colores (son sólo para marcar visualmente y tienen únicamente carácter didáctico).

Código HTML:

 <div id="contenedor" style="position: relative">
        <div id="cabecera" style="position: relative; font-size: 11px; color: #ff9; font-weight: lighter">
            <div id="login" style="position: absolute; top: 5px; right: 150px; width: 300px; height: 50px; text-align: left;">
            <form method="post"><p><label>Nombre:</label> <input name="login" type="text" /><br /><label>Password:</label> <input name="password" type="password" /></p></form>
            </div>
            <h2>
                <a title="Todas las noticias sobre videojuegos, analisis y articulos. Niente Games"
                    href="http://www.nientegames.com"></a>
            </h2>
        </div>
        
        
        <div id="cuerpo" style="position: relative">
          <div id="bajo_cabecera" style="position: absolute; top: 0px; left: 0px; width: 50%; height: 40px; background-color:#ff9">Este es un div colocado debajo de la cabecera.</div>	
            <div id="lateral">
            Aquí el resto de tu página...

Si necesitas alguna aclaración... ya sabes dónde estamos.

Bye

[kennyhp]

Muchas gracias por la ayuda!!! pero es que soy un desastre con esto de los estilos, no te imaginas cuanta frustación! cuando consigo colocar una cosa, me cargo otra y así todo el rato.
Espero no estar abusando, pero teniendo en cuenta que sigo teniendo el css que pusé en el anterior mesaje... me gustaría conseguir esto:

http://www.nientegames.com/images/estructuraweb.png

Gracias por todo

[deirdre]

Y ¿porqué no lo intentas con lo que te he puesto?.

Luego vas ajustando los tamaños y posiciones.

Si lo intentas y pones tu código, y en un punto determinado te atascas, pues entonces intentaremos arreglarlo.

Bye

[mayid]

Es asi. Se desarma todo hasta que con el correr de los dias queda ok.

[kennyhp]

Bueno, en realidad es lo que comentaba, siguiendo lo que me has puesto en tu anterior mensaje, cuando consigo colocar algo para que quede como quiero, se me descoloca lo ortro, y os aseguro que le estoy dedicando muuuuuuuuuuuuchas horas

[kseso?]

si añades a tu css:

Código css:

#cabecera h2 {
float:left;
margin:0;
}
 

podrás poner el campo de "iniciar sesión" flotado a la derecha, y con su márgenes colocarlo top y right colocarlo en su sitio.

Un saludo

[charly_077]

muy buen aporte, de antemano muchas gracias tenia el mismo problema pero ya lo resolvi