Menu
Hi,
Thunderbird has a nice, 3 resizeable pane layout; left for folder tree structure, top for list of all emails in the selected folder, and bottom for the selected email. And, all of the areas are resizeable by dragging and dropping the borders. Many if not most of the programs I use daily have this feature (like Mysql browser, Quanta, Gvim, windoz explorer (bad example), rhythmbox, itunes, …). I realize that these are C++ or Java applications. There has to be an easy way to do this in Firefox, doesn’t there.
I can do this in 10 seconds with a decent WYSIWYG frame editor like Quanta but I want to learn and use CSS. I have tried using CSS style features like overflow : auto; cursor : xx-resize; position : absolute|relative, … The “resizeable” borders appear to be a link to a scroll bar.
As a simple test case, I tried to do a thumbnail table in a div, followed by a “handle” div separator 9 pixels tall in red with a South-resize, followed by another picture table. I had hoped that when I moved the handle, both the thumbnail and picture divs would see it and move. Didn’t work. Here’s my crude attempt:
<form method=”post” action=”/cgi-bin/pw2.pl?Command=NewPath;Path=20080103o/bin” enctype=”multipart/form-data” name=”pwform”>
<div align=”left” id=”thumbnail_div”
style=”background-color : #157ad8; height : 280px;
left : 0px; position : relative; width : 100pc; top : 0px;
overflow : auto; “>
<table cellspacing=”1″ cellpadding=”2″ border=”4″ frame=”box”
style=”position : absolute;”>
<th colspan=2 align=left>Path = 20080103o/bin [2]</th>
<tr><td><div align=’center’ ID=’thumb0′ onclick=”getToe(‘18233’)”>
<img src=”/image/1.18233.jpg” border=4><br>1</div></td>
<td><div align=’center’ ID=’thumb1′ onclick=”getToe(‘14162’)”>
<img src=”/image/emily1.14162.jpg” border=4><br>emily1</div></td></tr>
</table>
</div>
<div id=’bHandle’ style=”top:320px; left:0px; width:100pc;
height:9px; background-color:Red; position:absolute;
cursor:s-resize; “></div>
<div align=”left” id=”toenail_div”
style=”background-color : #157ad8; top : 50px; left : 20px;
width : 100pc; position : relative; overflow : auto; “>
<table cellspacing=”1″ cellpadding=”2″ border=”4″ frame=”box”>
<th align=center>20080103o/bin/1.jpg</th>
<tr><td> <img src=”/image/toe/1.18233.jpg” border=4 id=’toe0′>
<br><center>Emily1</td></tr>
</table>
</div>
</form>
What am I missing here? Any pointers appreciated,
BrianP