так что ли?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#divOuter{
position: relative;
height: 250px;
width: 834px;
}
#divInner{
position: absolute;
bottom: 0;
}
#controlPanel{
height: 200px;
width: 834px;
color: #d3e0e7;
background: #004874;
overflow: hidden;
display: none;
z-index: 1;
}
#toolbar{
top: 0;
height: 56px;
width: 834px;
overflow: hidden;
background: transparent url("top.png");
position: relative;
padding: 0;
z-index: 2;
}
a{
text-decoration: none;
color: #0083c1;
}
p{
color: #d3e0e7;
}
h1{
color: #0083c1;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#open").click(function(){
$("div#controlPanel").slideDown("slow");
});
$("#close").click(function(){
$("div#controlPanel").slideUp("slow");
});
$("#toolbar a").click(function(){
$("#toolbar a").toggle();
});
});
//-->
</script>
</head>
<body bgcolor="gray">
<div id="divOuter">
<div id="divInner">
<div id="toolbar">
<table border="0" width="100%">
<tr valign="top">
<td align="right" width="72%">
<p>Hello Guest!</p>
</td>
<td align="left">
<p>
<a id="open" class="open" href="#">Log In | Register </a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</p>
</td>
</tr>
</table>
</div>
<div id="controlPanel"></div>
</div>
</div>
</body>
</html>
если не так, то прошу нарисовать "в картинках" что и где появляется и кого и куда смещает