Foros del Web » Creando para Internet » CSS »

Uso de divs

Estas en el tema de Uso de divs en el foro de CSS en Foros del Web. Buenas! Les hago una pregunta. Estoy con una pagina en php, que tengo un par de categorías, y en cada una de ellas, productos. Obviamente ...
  #1 (permalink)  
Antiguo 23/09/2008, 13:00
 
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires, Mar del plata
Mensajes: 250
Antigüedad: 15 años, 8 meses
Puntos: 2
Uso de divs

Buenas!

Les hago una pregunta.
Estoy con una pagina en php, que tengo un par de categorías, y en cada una de ellas, productos. Obviamente con una base de datos.
El problema que me surge es que el diseño que tengo hecho lo tengo con divs. Es decir, tengo la columna izquierda con las categorías, la parte central con los productos, y abajo tengo el pie de pagina.
El tema que cuando pongo una categoría, esta se imprime en la parte central, pero el pie de pagina queda estítico y entonces se imprime toda la lista, y el pie de pagina ahí estático.
La pregunta es: Como puedo hacer para que el pie de pagina se mueva según el contenido de cada categoría?

gracias!, espero que se haya entendido!
  #2 (permalink)  
Antiguo 23/09/2008, 13:01
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 17 años, 7 meses
Puntos: 70
Respuesta: Uso de divs con php

Hola Alemanarg, cómo vas?

Tu duda no es exactamente de php, es de css.

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #3 (permalink)  
Antiguo 23/09/2008, 13:03
Avatar de Ronruby  
Fecha de Ingreso: julio-2008
Ubicación: 18°30'N, 69°59'W
Mensajes: 4.879
Antigüedad: 15 años, 8 meses
Puntos: 416
Respuesta: Uso de divs con php

Eso no es problema de PHP, es de CSS.

Creo que lo que tienes que hacer para que no se quede estatico es ponerle un float a tu DIV.
  #4 (permalink)  
Antiguo 23/09/2008, 14:37
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 17 años, 9 meses
Puntos: 2135
Respuesta: Uso de divs con php

Tema trasladado a CSS
  #5 (permalink)  
Antiguo 23/09/2008, 15:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Uso de divs

Será mejor que muestres cómo es el html y el css, sobre todo del pie, pero si es todo el código (html generado), mejor.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 25/09/2008, 16:10
 
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires, Mar del plata
Mensajes: 250
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: Uso de divs

Ahi esta el archivo productos.php
Código PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BN - Tecnología y Comunicación</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="header">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','230','title','Back Net.com.ar','src','elementos_activos/peliculas/headerback','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','elementos_activos/peliculas/headerback' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="230" title="Back Net.com.ar">
    <param name="movie" value="elementos_activos/peliculas/headerback.swf" />
    <param name="quality" value="high" />
    <embed src="elementos_activos/peliculas/headerback.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="230"></embed>
  </object>
</noscript></div>

<div id="menu"><ul id="menu">
        <li><a href="#" target="_self">Inicio</a></li>
        <li><a href="#" target="_self">Quienes Somos</a></li>
        <li><a href="#" target="_self">Que Hacemos</a></li>
        <li><a href="#" target="_self">Servicios</a></li>
        <li><a href="#" target="_self">Contacto</a></li>
</ul>
</div>

<div id="contenido">
  <div id="colizq">
<? 
    
include('config.php');
    
    function 
display_tree($root,$dblink,$linkStyle){
        
//Muestra las categorias (construida con estructuras de árbol)
        //Obtener los valores izq y der de la raiz - parametro.
        
$resultmysql_query("SELECT lft,rgt FROM secciones WHERE id=$root",$dblink);
        
$row=mysql_fetch_array($result);
        
//Empezar con una pila derecha vacia.
        
$right=array();
        
//Obtener todos los descendentes del nodo raiz.
        
$result=mysql_query("SELECT * FROM secciones WHERE lft BETWEEN ".$row["lft"]." AND ".$row["rgt"]." ORDER BY lft ASC",$dblink);
        
//Mostrar cada fila
        
while ($row=mysql_fetch_array($result)){
            
//Solo chequear la pila si hay alguno.
            
extract($row);
            if (
count($right)>0){
                
//chequear si debemos eliminar algun nodo de la pila.
                
while ($right[count($right)-1]<$row["rgt"]){array_pop($right);}
            }
            
//Mostrar el titulo del nodo indentado.
            
echo str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;',count($right))."<a href='".$_SERVER['PHP_SELF']."?id=$id#top' class='$linkStyle'>$nombre</a><br>\n";
            
//Añadir este nodo a la pila
            
$right[]=$row["rgt"];
        }
    }
    
    
$dblink mysql_connect($hostname,$username,$password)
             or die(
"Could not connect: " mysql_error());
       
mysql_select_db($databasename$dblink) or die ( mysql_error());
    
   
/*    mysql_query ("SET NAMES 'utf8'"); /* PARA EL PROBLEMA DE LOS ACENTOS */
    
?>    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <? display_tree(13,$dblink,"contenido");?>
  </div>
  <div id="colder">
    
    <?php
        
if(isset($_GET["id"])){
            
$id=$_GET["id"];
            
$query="SELECT * FROM secciones WHERE id=$id;";
            
$res=mysql_query($query,$dblink);
            
$row=mysql_fetch_array($res,MYSQL_ASSOC);
            
extract($row);
            
$qDetail="SELECT e.*,s.nombre FROM productos e,secciones s  
            WHERE s.id=e.seccionid AND s.lft BETWEEN $lft AND $rgt 
            ORDER BY e.articulo DESC;"
/* LO ORDENAMOS POR NUMERO DE ARTICULO */
            
$resDetail=mysql_query($qDetail);
            if (
mysql_num_rows($resDetail)==0){
                echo 
"<p class='colderima'><br><h2>Por el momento no hay productos disponibles</span>";    
                
/*exit();*/
            
}
            
/*echo "<p name='top'>\n";*/
            
while ($row mysql_fetch_array($resDetail,MYSQL_ASSOC)){
                
extract ($row,EXTR_OVERWRITE);
                
/***************** IMPRIMIMOS LOS ARTICULOS *********************/
                
                
                
echo "<p class='colderima'>CODIGO: $articulo</p>";
                
/* SI HAY IMAGEN QUE APAREZCA. CASO CONTRARIO, QUE NO APAREZCAN. */
                
                
if ($imagen <> "")
                  {
                  
                  
$imagen "<a href=imagenes/".$imagen." rel=\"lightbox\" > <img src=imagenes/".$imagen." border='0' width='120' height='140'> </a>";
                  echo 
"<p align='left'> $imagen </p>" ;  /* Le podemos cambiar las medidas: height= 168 width= 180*/
                 
                  
}
                  else
                  {
                  echo 
"<b> No Hay Imagen para Mostrar";
                  } 
                echo 
"<p class='colderima'><h2><b> $titulo </b></h2></p>\n";
                
                
/*echo "<p class='colderima'> <td background=images/bola_precio.jpg width='69' height='80'><div class='precio2' align='center'> $precio </div></td></p>";*/
                
                
echo "<p class='colderima'><img src=images/dolar.gif width='15' height='15'> $precio</p><br>\n";
                
                
                echo 
"<p class='colderima'><p> $comment </p></p><br>\n";
        
        
                echo 
"<hr><br>\n"/* Linea que separa a los articulos */
                
                
/**************** FIN IMPRIMIMOS LOS ARTICULOS *****************/

            
}
            
/*echo "</p>\n";*/
            
        
} else {//No está establecido id en $_GET
        
        /* AQUI PONER UN LOGO PRINCIPAL */
        
        
echo "<p class='colderima'><br><h2>Elija alguna categoria.</span>";
        
        }
        
?>
  </div>
  <br />
  
<div id="footer">Copyright © 2008 Back Net Tecnología y Comunicación 
  <div id="diseno">Diseño Web: <a href="http://www.com.ar" target="_blank">FA</a></div>
</div>  
</div>



</body>
</html>

y parte del estilo.css:

Código PHP:
@charset "utf-8";
/* CSS Document */

* {
    
margin0padding0
}

html {
    
width100%;
}
body {
    
background-imageurl(elementos_activos/imagenes/fondo.jpg);
    
background-repeatrepeat-x;
    
background-positiontop;
}
#header {
    
height230px;
    
width800px;
    
margin-rightauto;
    
margin-leftauto;
}

#contenido {
    
height512px;
    
width798px;
    
margin-rightauto;
    
margin-leftauto;
    
border-right-width1px;
    
border-left-width1px;
    
border-right-stylesolid;
    
border-left-stylesolid;
    
border-right-color#000000;
    
border-left-color#000000;
    
background-color#FFFFFF;
    
background-imageurl(elementos_activos/imagenes/fondocontenido.gif);
    
background-repeatno-repeat;
    
background-positionright bottom;
    
positionrelative;
    
float:inherit;
}
#colizq {
    
height461px;
    
width258px;
    
background-imageurl(elementos_activos/imagenes/fondo-colizq.jpg);
    
background-repeatno-repeat;
    
positionabsolute;
    
left10px;
    
top10px;
    
background-positioncenter top;
}
#colder {
    
positionabsolute;
    
width510px;
    
height461px;
    
top10px;
    
padding-top10px;
    
padding-left5px;
    
background-imageurl(elementos_activos/imagenes/fondoder.gif);
    
background-repeatno-repeat;
    
background-positioncenter center;
    
right10px;
    
/*overflow: scroll;*/
}

#contenido #colizq a:link {
    
font-familyArialHelveticasans-serif;
    
font-size12px;
    
color#000000;
    
padding-right5px;
    
text-decorationnone;
    
padding-left140px;
    
displayblock;
}

#contenido #colizq a:visited {
    
color#279B00;
    
text-decorationnone;
    
padding-right5px;
    
padding-left140px;
    
displayblock;
    
font-size12px;
}
#contenido #colizq a:hover {
    
color#33CA00;
    
text-decorationunderline;
    
padding-right5px;
    
padding-left140px;
    
displayblock;
    
font-size12px;
}
#contenido #colizq a:active {
    
color#269700;
    
text-decorationnone;
    
padding-right5px;
    
padding-left140px;
    
displayblock;
    
font-size12px;
}

#contenido #colder a:link {
    
font-familyArialHelveticasans-serif;
    
font-size12px;
    
color#000000;
    
text-decorationnone;
    
text-alignright;
    
padding-right5px;
    
displayblock;
}

#contenido #colder a:visited {
    
color#279B00;
    
text-decorationnone;
    
padding-right5px;
    
font-size12px;
    
font-familyArialHelveticasans-serif;
    
text-alignright;
    
displayblock;
}
#contenido #colder a:hover {
    
color#33CA00;
    
text-decorationunderline;
    
padding-right5px;
    
font-size12px;
    
text-alignright;
    
displayblock;
}
#contenido #colder a:active {
    
color#269700;
    
text-decorationnone;
    
padding-right5px;
    
font-size12px;
    
font-familyArialHelveticasans-serif;
    
text-alignright;
    
displayblock;
}
#footer {
    
height25px;
    
width795px;
    
margin-rightauto;
    
margin-leftauto;
    
background-color#000000;
    
font-family"Trebuchet MS"VerdanaArial;
    
font-size12px;
    
color#FFFFFF;
    
padding-left5px;
    
padding-top8px;
    
font-weightbold;
    
position:absolute;
    
float:none;
    
top480px;
    
clear:both;

  #7 (permalink)  
Antiguo 25/09/2008, 16:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Uso de divs

Con estas propiedades:

position:absolute;
top: 480px;

le estás diciendo que se mantenga siempre quieto a 480px de la parte superior.

Cambia eso por position: relative y el número de top que necesites para mantener la distancia a las categorías que te interese.

Si no va así, yo te pedía el código "generado" en el navegador, porque si no no hay forma de ver el html que resulta de tus funciones.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 30/09/2008, 07:31
 
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires, Mar del plata
Mensajes: 250
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: Uso de divs

Gracias!

Tenia varias cosas para cambiar, como la posicion absoluta de los contenidos...
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 03:26.