¿Div dinamico?

Bytevamp · #1 (**permalink**) 14/10/2005, 04:43

Si suena raro, pero es asi, me explico, tengo el siguiente codigo:

estilos.css

Código HTML:

div#Superior { 
	position:absolute; 
	top:0; 
	left:2%; 
	width:100%; 
	height:203; 
}
div#Izquierda { 
	position:absolute; 
	top:202; 
	left:2.5%; 
	width:25%; 
	height:85%; 
}
div#Derecha { 
	position:absolute; 
	top:202; 
	left:25%; 
	width:70%;
	height:85%; 
}
div#Inferior { 
	position:absolute; 
	top:720; 
	left:2.5%; 
	width:100%; 
	height:203; 
}

y en la pagina que los llama:

Código HTML:

<body>
	<div id="Superior"><? include ('cabecera.php');?></div>
	
	<div id="Izquierda"><? include ('left.php');?></div>
	
	<div id="Derecha"><? include ('inicio.php');?></div>
	
	<div id="Inferior"><? include ('pie.php');?></div>
</body>

El problema es el siguiente, en principio esto me sirve perfectamente, el problema se da cuando la pagina crece hacia abajo, pues el div del pie no se mueve, queda siempre a la misma altura, con lo que si esta pagina crece, el pie corta la pagina(no se si me explico), ¿habria alguna forma de conseguir que el pie bajase si la pagina crece hacia abajo?, gracias.

miketrix_esp · #2 (**permalink**) 14/10/2005, 04:55

Yo lo que haría es agrupar el div #Derecha y el #Inferior y que este último tenga una posición relativa (pie del div Derecha):

Código HTML:

<body>
	<div id="Superior"><? include ('cabecera.php');?></div>
	
	<div id="Izquierda"><? include ('left.php');?></div>
	
            <div id="Cuerpo">
   	    <div id="Derecha"><? include ('inicio.php');?></div>
	    <div id="Inferior"><? include ('pie.php');?></div>
             </div>
</body>

En los CSS cambiar:

Código HTML:

div#Derecha { 
	position:[COLOR="Red"]relative[/COLOR]; 
	top:[COLOR="red"]0[/COLOR]; ; 
	left:25%; 
	width:70%;
	height:85%; 
}

div#Inferior { 
	position:[COLOR="Red"]relative[/COLOR]; 
	top:[COLOR="red"]0[/COLOR]; 
	left:2.5%; 
	width:100%; 
	height:203; 
}


/* AÑADIR ESTE NUEVO DIV */
[COLOR="red"]
div#Cuerpo{
	position:absolute; 
	top:202; 
	left:25%; 
	width:70%;
	height:85%;
}[/COLOR]

A ver si te sirve. Cuentanoslo. Suerte!

Bytevamp · #3 (**permalink**) 14/10/2005, 05:29

He echo un pequeño cambio para que se vea correcto inclui los tres div en el cuerpo de esta forma:

Código HTML:

<body>
	<div id="Superior"><? include ('cabecera.php');?></div>
	
	<div id="Cuerpo">

        <div id="Izquierda"><? include ('left.php');?></div>

        <div id="Derecha"><? include ('inicio.php');?></div>

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

y modifique el estilo.css un poco a

Código HTML:

div#Superior { 
	position:absolute;
	top:0; 
	left:2%; 
	width:100%; 
	height:203; 
}
div#Izquierda { 
	position:relative;
	top:0;
	left:0%;
	width:25%; 
	height:85%; 
}
div#Derecha {
	position:absolute;
	top:0;
	left:32%;
	width:70%;
	height:85%;
}
div#Inferior {
	position:relative;
	top:0;
	width:100%;
	height:203;
}
div#Cuerpo{
	position:absolute;
	top:202;
	left:2.5%;
	width:70%;
	height:85%;
}

elproblema es que el pie aparece no abajo del todo,sino cortando abajo los divs derecha e izquierda¿

?¿alguien da mas?

baccxus · #4 (**permalink**) 14/10/2005, 12:28

agregale un clear:both; se ha hablado bastante de esta función en el pasado, busca en las FAQ.

Saludos

Bytevamp · #5 (**permalink**) 17/10/2005, 16:13

Gracias a todos, en especial a baccxus, usando el clear:both; salio como queria, por si alguien se encuentra con el mismo problema, ahi van los codigos:

estilos.css

Código:

div#Superior { 
	position:absolute;
	top:0; 
	left:2%; 
	width:100%; 
	height:203; 
}
div#Izquierda { 
	position:absolute;
	top:203;
	left:2.5%;
	width:25%; 
	height:85%; 
}
div#Derecha {
	position:relative;
	top:0;
	left:32%;
	width:70%;
	height:85%;
	clear:both;
}
div#Inferior {
	position:relative;
	top:0;
	width:100%;
	clear:both;
}
div#Cuerpo{
	position:absolute;
	top:202;
	left:2.5%;
	width:70%;	
}

index.php

Código PHP:

 
<body> 
    <div id="Superior"><? include ('cabecera.php');?></div> 
 
        <div id="Izquierda"><? include ('left.php');?></div> 
         
        <div id="Cuerpo"> 
 
            <div id="Derecha"><? include ('inicio.php');?></div> 
 
            <div id="Inferior"><? include ('pie.php');?></div> 
 
</div> 
</body>

Gracias a todos, sois lo mejorcito que hay.
Saludos.