Foros del Web » Creando para Internet » Diseño web »

Footer tapa div

 Estas en el tema de Footer tapa div en el foro de Diseño web en Foros del Web. Buenos dias hermanos. Tengo una duda con un diseño que estoy creando. y quiero ver si pueden ayudarme. Tengo la pagina dividida en tres partes ...
  #1 (permalink)  
Antiguo 30/07/2012, 09:38
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 13 años, 2 meses
Puntos: 16
Pregunta Footer tapa div
Buenos dias hermanos. Tengo una duda con un diseño que estoy creando. y quiero ver si pueden ayudarme. Tengo la pagina dividida en tres partes un div para el panel izquierdo. uno para el central y uno para el panel derecho. los cuales me ocupan los 1024px de ancho. todos metidos dentro de un contenedor para elcuerpo. Hasta alli todo bien. El detalle esta en que el panel izquierdo es un menu que crece segun las opciones seleccionadas. y al crecer el div que tengo de footer lo tapa. No se cual es la razon. Adjunto los codigos:
Código CSS: 
Ver original
  1. #cuerpo{
  2.     margin-top:5px;
  3.     position:relative;
  4.     min-height: 500px;
  5.     width: 1024px;
  6. }
  7.  
  8. #panelI{
  9.     width:206px;
  10.     border:1px solid #f5832b;
  11.     margin:-0px 2.5px 0px 0px;
  12.     position: absolute;#le puse posicion absolute para poder colocar los otros paneles a los lados.
  13.     padding: 2px;
  14.     background:#fff;
  15. }
  16. #panelC{
  17.     /*border:1px solid #f5832b;*/
  18.     background: url(../imagenes/fondoTitle.png) no-repeat;
  19.     left:220px;
  20.     margin: 0px 2.5px 0px 0px;
  21.     min-height: 400px;
  22.     text-align:justify;
  23.     width:585px;
  24.     position:relative;
  25.     padding-top: 5px;
  26. }
  27. #panelD{
  28.     
  29.     right:0px;
  30.     width: 206px;
  31.     top: auto;
  32.     border:1px solid #f5832b;
  33.     padding:2px;
  34.     min-height: 300px;
  35.     margin:0px 0px 0px 2.5px;
  36.     position: absolute;
  37.     background: #fff;
  38. }
  39. #footer{
  40.     
  41.     clear: both;
  42.     background:url(../imagenes/bgfooter.png) no-repeat;
  43.     color:#fff;
  44.     width: 1024px;
  45.     height: 122px;
  46.     position: relative;
  47.     border-radius:0px 0px 10px 10px;
  48.     margin-bottom: 20px;
  49.     margin-top:0px;
  50.     
  51. }

Tienen alguna idea de como puedo solucionarlo? Gracias. Aun hay conceptos de Css que creo no manejo del todo.
__________________
Lo imposible es lo posible visto por los ojos de un incapaz.
Si te sirve la respuesta. dale + al karma.
Saludos
  #2 (permalink)  
Antiguo 30/07/2012, 10:35
 
Fecha de Ingreso: noviembre-2010
Mensajes: 1.242
Antigüedad: 13 años, 5 meses
Puntos: 73
Respuesta: Footer tapa div
prueba a quitar ese clear:both y de #panelD quita position: absolute;

Si no te sirve, ¿podrías poner el html completo o el link aquí?
__________________
:)
  #3 (permalink)  
Antiguo 30/07/2012, 10:53
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 13 años, 2 meses
Puntos: 16
Respuesta: Footer tapa div
El problemas es que el HTML se me genera con php porque El menu es dinamico. :S y pues. Ya hice pruebas.
El #PanelD y #panelI tienen posicion Absolute para que puedan situarse a la derecha y a la izquierda. si quieto el "absolute" al panel izquierdo. los otros dos paneles dejan de estar a un lado. y se ponen bajo el panel izquiedo. si se lo quito al #PanelD este se monta sobre el panel izquierdo pues pierde su ubicacion! :S

La pagina esta en desarrollo aun no la tengo en la nube!
__________________
Lo imposible es lo posible visto por los ojos de un incapaz.
Si te sirve la respuesta. dale + al karma.
Saludos
  #4 (permalink)  
Antiguo 30/07/2012, 11:03
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 13 años, 2 meses
Puntos: 16
Respuesta: Footer tapa div
El Codigo HTML es mas o menos asi:
Código HTML: 
Ver original
  1. <HEAD>
  2.     
  3.         <title>Compania C. A.</title>
  4.         <link rel="shortcut icon" href="../Compania/imagenes/iconCompania.png">
  5.  
  6.         <link href="../Compania/css/cuerpo.css" rel="stylesheet"/>
  7.  
  8.         <link href="../Compania/css/headerMenu.css" rel="stylesheet"/>
  9.  
  10.         <link href="../Compania/css/panelAdmin.css" rel="stylesheet" />
  11.  
  12.         <link href="../Compania/css/panelIzquierdo.css" rel="stylesheet" />
  13.  
  14.         <link href="../Compania/css/panelCentral.css" rel="stylesheet" />
  15.  
  16.         <link href="../Compania/css/panelDerecho.css" rel="stylesheet" />
  17.  
  18.         <link href="../Compania/css/footer.css" rel="stylesheet"/>
  19.  
  20.         <script src="../Compania/js/jq1.6.2.js"></script>
  21.  
  22.         <script src="../Compania/js/jqui1.8.15.js"></script>
  23.  
  24.         <script src="../Compania/js/slide.js"></script>
  25.  
  26.         <script src="../Compania/js/funciones.js"></script>
  27.  
  28.         <script src="../Compania/js/objetoAjax.js"></script>
  29.  
  30.         <script src="../Compania/js/activities.js"></script>
  31.  
  32.         <script src="../Compania/js/funcionesCompania.js"></script>
  33.  
  34.         
  35.         
  36.  
  37.     </HEAD>
  38.  
  39.     <body>
  40.     
  41.         <div id="contenedorBanner"> 
  42.             
  43.             <div id="bannerComp">   
  44.             <div class="iconos">    
  45.                     <a href="#"><img src="imagenes/iconCarrito.png" /></a>
  46.  
  47.                     <a href="#"><img src="imagenes/iconCelular.png" /></a>
  48.  
  49.                     <a href="#"><img src="imagenes/iconNota.png" /></a>
  50.  
  51.                     <a href="#"><img src="imagenes/iconUser.png" /></a>
  52.  
  53.  
  54.                 
  55.             </div>
  56.     
  57.                 <div id="buscCentral">
  58.     
  59.                     <form name="busqueda" action="principal.php" method="get">
  60.     
  61.                         <input type="text" class="busqueda" id="busqueda" name="b">
  62.  
  63.                         <button class="botonBusqueda"></button>
  64.  
  65.                     </form> 
  66.  
  67.                 </div>
  68.  
  69.  
  70.                 
  71.             <div id="menu_p">
  72.  
  73. <!--ENLACES HEADER-->
  74.     <div class="LinksH">
  75.                     
  76.                 </div>
  77.  
  78.  
  79. <!--FIN ENLACES HEADER-->
  80. <ul class="menuPI"><li><a href="principal.php">Principal</a></li></ul>
  81. <ul class="menuPD"> 
  82.     <li id="inicioSesion" class="casillaHover">
  83.         <a href="#">Ingresar</a>
  84.     </li>
  85. </ul>
  86.  
  87. <div id="cuadroSesion"></div>
  88.             </div>
  89.             </div>
  90.             <!--
  91.             <div id="banner_op"></div>
  92.             <div id="banner">
  93.                 <input type="text" class="busqueda"><button class="botonBusqueda"></button>
  94.                 
  95.             </div>
  96.             <div id="banner_in">
  97.             -->
  98.         </div>
  99.         <div id="cuerpo">
  100.         
  101. <div id="panelI">
  102.     <h3 class="titulo">Categorias</h3><ul class="categorias">
  103.     <li><a href="/Compania/registroUsuario.php?cat=1">Informatica</a></li>
  104. <li><a href="/Compania/registroUsuario.php?cat=2">Impresora</a></li>
  105. <li><a href="/Compania/registroUsuario.php?cat=3">Prueba</a></li>
  106. <li><a href="/Compania/registroUsuario.php?cat=4">Prueba 2</a></li>
  107. <li><a href="/Compania/registroUsuario.php?cat=5">Prueba 3</a></li>
  108. <li><a href="/Compania/registroUsuario.php?cat=6">Prueba 4</a></li>
  109. <li><a href="/Compania/registroUsuario.php?cat=7">Prueba 5</a></li>
  110. <li><a href="/Compania/registroUsuario.php?cat=8">Prueba 6</a></li>
  111. <li><a href="/Compania/registroUsuario.php?cat=9">Prueba 7</a></li>
  112. <li><a href="/Compania/registroUsuario.php?cat=10">Prueba 8</a></li>
  113. <li><a href="/Compania/registroUsuario.php?cat=11"></a></li>
  114.  
  115. </ul>
  116.  
  117. <img src="imagenes/logo_dos.png" /></div><div id="panelD">
  118. <h3 class="titulo">Carrito de Compras</h3> 0 productos
  119.  
  120.     <div id="infProducto" class="oculto">
  121.     </div>
  122.     
  123. </div>
  124. <div id="panelC">
  125.     <h3 class="tituloPanelC">DATOS DE USUARIO</h3><form name="usrRegistro" method="POST" action="/Compania/registroUsuario.php" id="form">
  126.     
  127.         <table border ="0" align="center" cellspacing="0" cellpading="0" class="t_formulario">
  128.             <tr>
  129.                 <td></td>
  130.                 <td><input type="hidden" name="id_usuario" value="" id="id_usuario"></td>
  131.             </tr>
  132.                 <tr><td></td>
  133.                 <td><input type="hidden" name="estatus_usuario" value="" id="estatus_usuario"></td>
  134.             </tr><tr>
  135.                 <td>Cedula</td>
  136.                 <td><input  id="cedula" type="text" size="20" maxlength="20" name="cedula" value=""></td>
  137.             </tr><tr>
  138.                 <td>Primer Nombre</td>
  139.                 <td><input  id="nombres" type="text" size="30" maxlength="30" name="primer_nombre" value=""></td>
  140.             </tr><tr>
  141.                 <td>Segundo Nombre</td>
  142.                 <td><input  id="" type="text" size="30" maxlength="30" name="sdo_nombre" value=""></td>
  143.             </tr><tr>
  144.                 <td>Primer Apellido</td>
  145.                 <td><input  id="apellidos" type="text" size="30" maxlength="30" name="primer_apellido" value=""></td>
  146.             </tr><tr>
  147.                 <td>Segundo Apellido</td>
  148.                 <td><input  id="" type="text" size="30" maxlength="30" name="sdo_apellido" value=""></td>
  149.             </tr><tr>
  150.                 <td>Tlf. Local</td>
  151.                 <td><input  id="tlflocal" type="text" size="15" maxlength="15" name="tlflocal" value=""></td>
  152.             </tr><tr>
  153.                 <td>Celular</td>
  154.                 <td><input  id="celular" type="text" size="15" maxlength="15" name="celular" value=""></td>
  155.             </tr><tr>
  156.                 <td>Direccion</td>
  157.                 <td><textarea name="direccion" id="direccion"></textarea><td>
  158.             </tr><tr>
  159.                 <td>Usuario</td>
  160.                 <td><input  id="usuario" type="text" size="30" maxlength="30" name="usuario" value=""></td>
  161.             </tr><tr>
  162.                 <td>Clave</td>
  163.                 <td><input  id="clave" type="text" size="30" maxlength="30" name="clave" value=""></td>
  164. </tr><tr><td colspan="2" class="botonForm">
  165.     
  166.             <input onclick="" type='submit' name="registrarUsr" value="Registrarme!"></td></tr>
  167.  
  168.             </table></form></div>
  169.  
  170.   <div class="corte"><br></div>
  171. </div><!--Cierre div cuerpo-->
  172. <div id="footer">
  173.         <ul>
  174.             <li class="quienes">
  175.                 <h3 class="titulo"> &iquest;Quienes Somos?</h3>
  176.                 <p>Somos una compa&ntilde;ia creada con la finalidad de ofrecerte los mejores productos a los mejores precios</p>   
  177.             </li>
  178.             <li class="ubicacion">
  179.                 <h3 class="titulo">&iquest;Donde estamos?</h3>
  180.                 <p>
  181.                     Boulevar de Sabana Grande , 
  182.                     <b>Edf. Galerias Cristal</b> Piso 8 Oficina 8 c , Caracas
  183.                 </p>
  184.             </li>
  185.             <li class="contactanos">
  186.                 <h3 class="titulo">&iquest;Deseas Contactarnos?</h3>
  187.                 <hr>
  188.                     <b>M&oacute;vil:</b>
  189.                     <br>
  190.                     <b>Local:</b>                   
  191.                 </li>
  192.         </ul>
  193.     <div class="usSite">
  194.         <img src="imagenes/facebook.png" />
  195.         <img src="imagenes/twiter.png" />
  196.         <img src="imagenes/ml.png" />
  197.     </div>
  198. </div>
  199.     </body>
  200.     
  201. </HTML>
__________________
Lo imposible es lo posible visto por los ojos de un incapaz.
Si te sirve la respuesta. dale + al karma.
Saludos

Etiquetas: css, diseño, footer
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:50.