SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div problem creating a splitter bar

    Hi,
    i have 3 divs:left_menu, splitter_bar and content.
    I want to hide the left menu when i click in the splitter_bar.The problem comes with the content div... i don't know how to resize the content.

    The code:
    HTML Code:
    <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>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of using positioning to place your elements on the screen, try using floats, and then change the script to make the menu disappear and reappear.

    As it is right now, everything has been taken out of the normal page flow and positioned absolutely on the screen. If you let the elements float, you will remove this problem.

    Using floats and margins should solve your problem (and for the record, the content area expands to fill the entire screen, and then the left sidebar sits on top of that).

    I'd like to help you more (at the moment), but it's past 2AM here and I need to be up in 7 hours so I can get my laundry done before heading in to the sweatshop--I mean work.

    Try making the changes I suggested above, and if you're still having problems I'll try to help you out further.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •