<div style="position:absolute">

bichomen · #1 (**permalink**) 27/10/2007, 13:16

Si yo tengo un menu, y donde pongo la palabra menu, quiero que debajo haya un retangulo con las diferentes opciones con width yheight le marco las dimensiones y con left y top le marco la posición y me sale como yo quiero, el problema es que este codigo se encuentra dentro de un include de php y cuando cargo toda la página la capa aparece donde yo le dije pero en relación a la página madre y no a la hija, que tengo que poner relative??

bichomen

Escoffie · #2 (**permalink**) 28/10/2007, 12:28

Hola bichomen.

Si usas include de PHP, lo que tengas en tu página "hija" pasa a ser parte del DOM de la página "madre". Así que se rige por las reglas del DOm y del CSS como si fuera una sola página. ¿Me explico?

Luego entonces, el elemento que estás posicionando se está posicionando con respecto al View Port del navegador. No es que se esté colocando con respecto a la "madre".

Para que se posicione con respecto al elemento que lo contiene, es decir, con respecto al DIV donde tienes puesto tu include de PHP, a este DIV le tienes que poner div#fulano{position:relative;} y con eso le dices a tu menú que su posición será en relación al elemento que lo contiene y no con respecto al View Port.

Espero haberme explicado y que te sirva. Cualquier duda, pregunta, y si puedes, postea tu código.

Intenta esto: corre tu Script y copia y pega el HTML resultante. Verás que no hay páginas madres o hijas, sólo un DOM HTML.

Saludos.

bichomen · #3 (**permalink**) 28/10/2007, 12:44

No entiendo yo tengo un div id="menu" y dentro todo lo que tiene que salir en el menu y tu me dices que el include lo meta dentro de div relativo al div menu?? puedes ponerme algun ejemplo??

Lo de madre e hija era solo para hacerme entender

bichomen

Escoffie · #4 (**permalink**) 28/10/2007, 12:56

Hola Bichomen:

Lo escribo de memoria.

Si tienes un HTML con esto:

Código HTML:

<body>
<div id="lienzo">
<div id="menu">
<ul>
<li><a href="#">Opción 1</li>
<li><a href="#">Opción 2</li>
<li><a href="#">Opción 3</li>
</ul>
</div>
</div>
</body>

... que lo hayas generado con un PHP como este, por ejemplo:

Código PHP:

 
<body>
<div id="lienzo">
<?php include('menu.php');?>
</div>
</body>

Los estilos para posicionarlo serían:

Código:

#lienzo{
     position:relative;
     width:640px;
     margin: auto;
}
#lienzo #menu{
     position:absolute;
     top:50px;
     left:50px;
}

Espero te sirva.
Si puedes, postea tu código, así es más fácil ayudarte.

Saludos,

bichomen · #5 (**permalink**) 28/10/2007, 13:39

ok, gracias

bichomen