Foros del Web - Ver Mensaje Individual

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;}