Overflow trouble Oo?...

[rootKID]

Hey again, i have some trouble with my design (snipped attached).

 

As you see, i have some trouble with the overflow stuff Oo...

 

What i am trying to do here, is when the green link (Friend List) has been clicked, it will drop-down a div under that link with jQuery style to show the friends... only problem is, its taking the hole Menu/statusbar down...

 

I have clicked a little bit around here and there, but without luck. So i have posted original code here so you guys could take a look at it perhaps.

 

Statusbar CSS:

#statusbar {	color:#FFFFFF;	background:url(images/statusbar.png) repeat-x;	width:1020px;	height:50px;	margin:0 auto;	margin-top:5px;	margin-bottom:5px;}		#statusbar div.left {		float:left;		width:auto;		color:#FFFFFF;		margin-left:5px;	}		#statusbar div.right {		float:right;		width:auto;		color:#FFFFFF;		margin-right:5px;	}

Statusbar function/HTML-Design:

function StatusBar(){	$HTMLOUT = "";		/*LEFT*/	/*===================*/	$HTMLOUT .= "<div class='left'>";		$HTMLOUT .= "User: ";		$HTMLOUT .= "<a href='profile.php'>";			$HTMLOUT .= "Hyperion";		$HTMLOUT .= "</a>";				$HTMLOUT .= "<br />";				$HTMLOUT .= "Online: ";		$HTMLOUT .= "<span style='color:#D32D2D;'>";			$HTMLOUT .= "yes";		$HTMLOUT .= "</span>";				$HTMLOUT .= "<br />";				$HTMLOUT .= chat_statusbar();		$HTMLOUT .= cl_statusbar_friend_list();	$HTMLOUT .= "</div>";		/*RIGHT*/	/*===================*/	$HTMLOUT .= "<div class='right'>";			$HTMLOUT .= "<a class='underline' href='my.php'>";			$HTMLOUT .= "EDIT PROFILE";		$HTMLOUT .= "</a>";				$HTMLOUT .= " ";				$HTMLOUT .= "<a class='underline' href='logout.php'>";			$HTMLOUT .= "LOGOUT";		$HTMLOUT .= "</a>";		$HTMLOUT .= "</div>";		return $HTMLOUT;}

Chatline functions:

function chat_statusbar (){	$HTMLOUT = "";		$HTMLOUT .= "<span class='chatline_statusbar'>";		$HTMLOUT .= "<a class='cl_show_friends' href='#'>";			$HTMLOUT .= "Friends (0)";		$HTMLOUT .= "</a>";	$HTMLOUT .= "</span>";		return $HTMLOUT;}function cl_statusbar_friend_list (){	$HTMLOUT = "";		$HTMLOUT .= "<div class='cl_friend_list'>";		$HTMLOUT .= "Friend List...";	$HTMLOUT .= "</div>";		return $HTMLOUT;}

Chatline CSS:

span.chatline_statusbar {}	span.chatline_statusbar a.cl_show_friends {color:#00CC33;}	div.cl_friend_list {	border:none;	background-color:#000000;	color:#FFFFFF;	width:100px;	height:200px;}

Chatline Javascript code:

$(".cl_show_friends").click(	function()	{		$(this).next('.cl_friend_list').slideToggle("fast");	});

Menu HTML/Design:

		$HTMLOUT .= "<table border='0' cellpadding='0' cellspacing='0'>";			$HTMLOUT .= "<tr>";				$HTMLOUT .= "<td>";					$HTMLOUT .= "<a href='index.php'>";						$HTMLOUT .= "HOME";					$HTMLOUT .= "</a>";				$HTMLOUT .= "</td>";								$HTMLOUT .= "<td>";					$HTMLOUT .= "<a href='forums.php'>";						$HTMLOUT .= "FORUMS";					$HTMLOUT .= "</a>";				$HTMLOUT .= "</td>";								$HTMLOUT .= "<td>";					$HTMLOUT .= "<a href='faq.php'>";						$HTMLOUT .= "FAQ";					$HTMLOUT .= "</a>";				$HTMLOUT .= "</td>";								$HTMLOUT .= "<td>";					$HTMLOUT .= "<a href='rules.php'>";						$HTMLOUT .= "RULES";					$HTMLOUT .= "</a>";				$HTMLOUT .= "</td>";								$HTMLOUT .= "<td>";					$HTMLOUT .= "<a href='staff.php'>";						$HTMLOUT .= "STAFF";					$HTMLOUT .= "</a>";				$HTMLOUT .= "</td>";			$HTMLOUT .= "</tr>";		$HTMLOUT .= "</table>"; 

Menu CSS (Note sure if needed, but here you have it):

#menu {	background:top url(images/menu.png) repeat-x;	color:#FFFFFF;	width:99%;	margin:0 auto;}	#menu table {		border:0px solid black;		border-collapse:collapse;		width:100%;	}			#menu table tr {}					#menu table tr td {				border:none;				text-align:center;			}							#menu table tr td a {					color:#FFFFFF;					text-decoration:none;				}									#menu table tr td a:hover {						color:#000000;						text-decoration:none;					}

I do know what i am doing wrong, i think. It's because im setting the HTML inside the statusbar, and it needed to be able to flow OVER that statusbar height, but at the same time dragging the hole menu down...

 

And it's the how to fix part i am lost in. So if you guys have any idea with what im doing wrong here, that would be awsome... or just a hint x).

 

-THANKS AS ALWAYS!

 

NOTE:

Note that this is still in development (the javascript code). So it's the design i need help with, not the actual JS code. Just posted it so you guys could take a look at it in case that was the code that was the trouble anyways. Even tho i must admit, i dont think so x).

 

But hoping you guys can find something i could not.

 

-THANKS!

Edited November 24, 2013 by rootKID

[rootKID]

Fixed the problem, no longer needed help