Foros del Web » Creando para Internet » CSS »

Problema con posicion de div dentro de otro

Estas en el tema de Problema con posicion de div dentro de otro en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/09/2009, 21:16
 
Fecha de Ingreso: octubre-2004
Mensajes: 198
Antigüedad: 13 años, 2 meses
Puntos: 1
Problema con posicion de div dentro de otro

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.
__________________
La seguridad es la infinita inseguridad de lo seguro.
  #2 (permalink)  
Antiguo 07/09/2009, 21:25
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema con posicion de div dentro de otro

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
  #3 (permalink)  
Antiguo 07/09/2009, 23:24
 
Fecha de Ingreso: octubre-2004
Mensajes: 198
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Problema con posicion de div dentro de otro

Gracias deirdre, lo hice como djiste y funcionó.
__________________
La seguridad es la infinita inseguridad de lo seguro.
  #4 (permalink)  
Antiguo 08/09/2009, 13:12
Avatar de kennyhp  
Fecha de Ingreso: julio-2006
Mensajes: 370
Antigüedad: 11 años, 5 meses
Puntos: 5
Respuesta: Problema con posicion de div dentro de otro

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??
  #5 (permalink)  
Antiguo 08/09/2009, 17:45
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema con posicion de div dentro de otro

Hola kennyhp

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

Bye
  #6 (permalink)  
Antiguo 09/09/2009, 17:21
Avatar de kennyhp  
Fecha de Ingreso: julio-2006
Mensajes: 370
Antigüedad: 11 años, 5 meses
Puntos: 5
Respuesta: Problema con posicion de div dentro de otro

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!
  #7 (permalink)  
Antiguo 09/09/2009, 18:09
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema con posicion de div dentro de otro

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
  #8 (permalink)  
Antiguo 11/09/2009, 09:46
Avatar de kennyhp  
Fecha de Ingreso: julio-2006
Mensajes: 370
Antigüedad: 11 años, 5 meses
Puntos: 5
Respuesta: Problema con posicion de div dentro de otro

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
  #9 (permalink)  
Antiguo 11/09/2009, 10:29
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema con posicion de div dentro de otro

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
  #10 (permalink)  
Antiguo 11/09/2009, 11:01
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Problema con posicion de div dentro de otro

Es asi. Se desarma todo hasta que con el correr de los dias queda ok.
  #11 (permalink)  
Antiguo 11/09/2009, 11:26
Avatar de kennyhp  
Fecha de Ingreso: julio-2006
Mensajes: 370
Antigüedad: 11 años, 5 meses
Puntos: 5
Respuesta: Problema con posicion de div dentro de otro

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
  #12 (permalink)  
Antiguo 11/09/2009, 11:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con posicion de div dentro de otro

si añades a tu css:
Código css:
Ver original
  1. #cabecera h2 {
  2. float:left;
  3. margin:0;
  4. }
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 03/03/2010, 12:17
 
Fecha de Ingreso: marzo-2010
Mensajes: 1
Antigüedad: 7 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Problema con posicion de div dentro de otro

muy buen aporte, de antemano muchas gracias tenia el mismo problema pero ya lo resolvi
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:33.