Foros del Web » Creando para Internet » CSS »

¿Div dinamico?

Estas en el tema de ¿Div dinamico? en el foro de CSS en Foros del Web. 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 { ...
  #1 (permalink)  
Antiguo 14/10/2005, 05:43
Avatar de Bytevamp  
Fecha de Ingreso: junio-2005
Ubicación: /var/www/
Mensajes: 789
Antigüedad: 12 años, 6 meses
Puntos: 7
¿Div dinamico?

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.
__________________
"zankius veri mach" a todos los que me habeis ayudado.
carteles para inmobiliarias || alquiler de coches
  #2 (permalink)  
Antiguo 14/10/2005, 05:55
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 384
Antigüedad: 12 años, 10 meses
Puntos: 0
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!
__________________
m!ketrix
CINE25 - Red Social de Cine
byinspiroh
  #3 (permalink)  
Antiguo 14/10/2005, 06:29
Avatar de Bytevamp  
Fecha de Ingreso: junio-2005
Ubicación: /var/www/
Mensajes: 789
Antigüedad: 12 años, 6 meses
Puntos: 7
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?
__________________
"zankius veri mach" a todos los que me habeis ayudado.
carteles para inmobiliarias || alquiler de coches
  #4 (permalink)  
Antiguo 14/10/2005, 13:28
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
agregale un clear:both; se ha hablado bastante de esta función en el pasado, busca en las FAQ.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #5 (permalink)  
Antiguo 17/10/2005, 17:13
Avatar de Bytevamp  
Fecha de Ingreso: junio-2005
Ubicación: /var/www/
Mensajes: 789
Antigüedad: 12 años, 6 meses
Puntos: 7
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.
__________________
"zankius veri mach" a todos los que me habeis ayudado.
carteles para inmobiliarias || alquiler de coches
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 12:11.