Ubicar tablas en body

sandovalchrist · #1 (**permalink**) 31/07/2009, 14:02

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?

abimaelrc · #2 (**permalink**) 31/07/2009, 14:12

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<style type="text/css">
#algo{
position: relative;
top: 250px;
left: 350px;
}
</style>
 
<table id="algo" border="1">
    <tr>
        <td>informacion</td>
        <td>Segunda informacion</td>
    </tr>
</table>

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<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#navcontainer {
   margin: 0;
   padding: 0;
   height: 319px;
   width: 190px;
   position:absolute;
   display:inline;
   top: 150px;
   margin-right:20px;
   left:0;
   float:left;
}
#navcontainer ul li {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: block;
}
#navcontainer #navlist {
   padding: 0;
   margin: 0;
   float:left;
}
@media screen {
   div#navcontainer {position: fixed;}
   * html {overflow-y: hidden;}
   * html body {overflow-y: auto;height: 100%;padding: 0;}
   * html div#navcontainer {position: absolute;}
}
#contenedor {
   margin: 0;
   padding: 0;
   display:block;
   height: auto;
   width: 810px;
}
#contenido {
   float:right;
   width: 600px;
   height:auto;
   margin:0;
   padding:0;
}
-->
</style>
</head>
<body>
<div id="contenedor">
<div id="navcontainer">
<ul id="navlist">
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n------------------</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
</ul>
</div>
<div id="contenido">
<table width="100" height="1479" border="3" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>
</div>
 
</body>
</html>

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

sandovalchrist · #3 (**permalink**) 31/07/2009, 14:20

Gracias abimaelrc.... justo estaba mirando en otro foro q se podia hacer asi... solo me faltaba lo de top... muchas gracias groso!