Foros del Web » Creando para Internet » HTML »

Ubicar tablas en body

Estas en el tema de Ubicar tablas en body en el foro de HTML en Foros del Web. Hola cm estan? Bueno les cuento tengo 2 tablas con sus respectivas cositas. Ahora bien necesito que el segundo table se quede abajo de todo.... ...
  #1 (permalink)  
Antiguo 31/07/2009, 15:02
 
Fecha de Ingreso: junio-2009
Mensajes: 96
Antigüedad: 8 años, 5 meses
Puntos: 1
Ubicar tablas en body

Hola cm estan?

Bueno les cuento tengo 2 tablas con sus respectivas cositas.

Ahora bien necesito que el segundo table se quede abajo de todo....

Tengo un body que ocupa obviamente todo la pantalla.

Lo que necesito es colocar un table abajo de todo....

Claro q podria hacer bajar la tabla con <br>... pero es poco ortodoxo :P.

Para q se den una idea lo quiero por donde esta el menu de inicio de win o linux :)

Hay una forma de decirle a la tabla q se posicione en X lugar del body?
  #2 (permalink)  
Antiguo 31/07/2009, 15:12
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Ubicar tablas en body

Necesitas en este caso CSS para poder lograr lo que estas pidiendo y Javascript si quieres que permanezca siempre abajo cuando la persona haga baje el scroll.

Código HTML:
Ver original
  1. <style type="text/css">
  2. #algo{
  3. position: relative;
  4. top: 250px;
  5. left: 350px;
  6. }
  7.  
  8. <table id="algo" border="1">
  9.     <tr>
  10.         <td>informacion</td>
  11.         <td>Segunda informacion</td>
  12.     </tr>

Aunque tambien yo creo que con CSS se puede dejar estatico.

Edito:
Sí se puede dejar estatico el table aunque haya scroll con solamente CSS. Mira este ejemplo

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. #navcontainer {
  8.   margin: 0;
  9.   padding: 0;
  10.   height: 319px;
  11.   width: 190px;
  12.   position:absolute;
  13.   display:inline;
  14.   top: 150px;
  15.   margin-right:20px;
  16.   left:0;
  17.   float:left;
  18. }
  19. #navcontainer ul li {
  20.   list-style-type: none;
  21.   padding: 0;
  22.   margin: 0;
  23.   display: block;
  24. }
  25. #navcontainer #navlist {
  26.   padding: 0;
  27.   margin: 0;
  28.   float:left;
  29. }
  30. @media screen {
  31.   div#navcontainer {position: fixed;}
  32.   * html {overflow-y: hidden;}
  33.   * html body {overflow-y: auto;height: 100%;padding: 0;}
  34.   * html div#navcontainer {position: absolute;}
  35. }
  36. #contenedor {
  37.   margin: 0;
  38.   padding: 0;
  39.   display:block;
  40.   height: auto;
  41.   width: 810px;
  42. }
  43. #contenido {
  44.   float:right;
  45.   width: 600px;
  46.   height:auto;
  47.   margin:0;
  48.   padding:0;
  49. }
  50. -->
  51. </head>
  52. <div id="contenedor">
  53. <div id="navcontainer">
  54. <ul id="navlist">
  55.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  56.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  57.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  58.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  59.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  60.   <li><a href=" " target="_self">Opci&oacute;n------------------</a></li>
  61.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  62.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  63.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  64.   <li><a href=" " target="_self">Opci&oacute;n</a></li>
  65. </ul>
  66. </div>
  67. <div id="contenido">
  68. <table width="100" height="1479" border="3" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
  69.   <tr>
  70.     <td></td>
  71.     <td></td>
  72.     <td></td>
  73.   </tr>
  74.   <tr>
  75.     <td></td>
  76.     <td></td>
  77.     <td></td>
  78.   </tr>
  79.   <tr>
  80.     <td></td>
  81.     <td></td>
  82.     <td></td>
  83.   </tr>
  84. </div>
  85. </div>
  86.  
  87. </body>
  88. </html>

El truco es con esta linea en el CSS
div#navcontainer {position: fixed;}

Última edición por abimaelrc; 31/07/2009 a las 15:22
  #3 (permalink)  
Antiguo 31/07/2009, 15:20
 
Fecha de Ingreso: junio-2009
Mensajes: 96
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Ubicar tablas en body

Gracias abimaelrc.... justo estaba mirando en otro foro q se podia hacer asi... solo me faltaba lo de top... muchas gracias groso!
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 15:11.