Hola,
estoy intentando crear un div que se oculte y deje mas espacio al DIV que tiene el contenido pero este ultimo no se ve bien.
A ver si encontrais el problema o si hay otra manera de hacer esto.
Muchas gracias.
El cofigo:
Código HTML:
<HTML>
<HEAD>
<style>
#left_menu {
position: absolute;
left: 0px;
padding: 4px;
width: 200px;
height:660px;
background-color:#f5f7f6;
visibility:'';
}
#splitter_bar {
background-color:red;
position: absolute;
left:201px;
width =5px;
height: 660px;
}
#content {
left:207px;
margin-right:0px;
margin-botton:0px;
height: 660px;
background-color:orange;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function hb() //Show or hide the left_menu
{
if(document.all['left_menu'].style.visibility == 'hidden')
{
document.all['left_menu'].style.visibility = '';
document.all['splitter_bar'].style.position = 'absolute';
document.all['splitter_bar'].style.left = '201px';
document.all['content'].style.left = '206px';
}
else
{
document.all['left_menu'].style.visibility = 'hidden';
document.all['splitter_bar'].style.position = 'absolute';
document.all['splitter_bar'].style.left = '0px';
document.all['content'].style.left = '6px';
}
}
</SCRIPT>
</HEAD>
<body>
<div id="left_menu">
left menu
</div>
<div id=splitter_bar>
<a href="javascript:hb();"><<</a>
</div>
<div id="content">
<table border=0 width=400 align=left>
<tr><td>content</td><td>content</td><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td><td>content</td><td>content</td></tr>
</table>
</div>
</body>
</html>