Slide Down Menu Not Lining Up

nlh205 · June 17, 2011, 1:42am

Ive been having a lot of trouble lining up this slide down menu with Jquery. But im sure the problem is in the css. Go to the site click on the More button in the menu. The menu is right where i want it but then it jolts up.

Game Junkie

Here’s my code

index.php:

<?php

include 'functions.php';

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Game Junkie</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#more_con {
	width:776px;
	height:150px;
	margin:12px 12px 0px 12px;
	position:relative;
	background-color:#0076AE;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	display:none;
}
</style>
</head>
<body>
<div id="page">
  <!-- Start:Page Banner -->
  <div id="top">
    <div class="back">&nbsp;</div>
    <div class="content">
      <p>Game Junkie</p>
    </div>
  </div>
  <!-- End:Page Banner -->
  <!-- Start:Bottom -->
  <div id="bottom">
    <div class="trans">&nbsp;</div>
    <div id="menu">
      <ul id="nav">
        <li><a href="category.php?value=action">Action</a></li>
        <li><a href="category.php?value=adventure">Adventure</a></li>
        <li><a href="category.php?value=arcade">Arcade</a></li>
        <li><a href="category.php?value=puzzle">Puzzle</a></li>
        <li><a href="category.php?value=simulation">Simulation</a></li>
        <li><a href="category.php?value=sports">Sports</a></li>
        <li><a href="category.php?value=strategy">Strategy</a></li>
        <li class="last"><a id="more_btn" onclick="$('#more_con').slideToggle(2000);">More</a></li>
      </ul>
    </div>
    <div id="more_con">More</div>
    <div class="content">
      <div style="float:left;width:582px;">
        <div id="section" style="width:582px;">
          <div id="header">New Games</div>
          <?php $query = mysql_query("SELECT * FROM games ORDER BY date DESC") or die(mysql_error());

			$i = 0;

			while($games = mysql_fetch_array($query)){

				$loc = explode(".", $games['swf']);

				if($i < 9){?>
          <div id="icon" onmouseover="this.style.backgroundColor='#333'" onmouseout="this.style.backgroundColor='#222'" onclick="document.location.href='play.php?game=<?php echo $games['id']; ?>'">
            <table border="0px" cellpadding="0px" cellspacing="0px" style="width:100%;">
              <tr>
                <th colspan="2"><?php echo $games['name']; ?></th>
              </tr>
              <tr>
                <td style="width:75px;"><img style="height:75px;border:1px solid black;" src="file_database/<?php echo $loc[0]; ?>.jpg" /></td>
                <td style="width:100%;font-size:9px;font-family:Verdana, Geneva, sans-serif;text-align:left;vertical-align:text-top;"><?php echo truncateString($games['description'], 100); ?>&nbsp;</td>
              </tr>
            </table>
          </div>
          <?php $i++;

				}

			}?>
        </div>
        <div id="section" style="width:582px;">
          <div id="header">Top Games</div>
          <?php $query = mysql_query("SELECT * FROM games ORDER BY total_plays DESC") or die(mysql_error());

			$i = 0;

			while($games = mysql_fetch_array($query)){

				$loc = explode(".", $games['swf']);

				if($i < 9){?>
          <div id="icon" onmouseover="this.style.backgroundColor='#333'" onmouseout="this.style.backgroundColor='#222'" onclick="document.location.href='play.php?game=<?php echo $games['id']; ?>'">
            <table border="0px" cellpadding="0px" cellspacing="0px" style="width:100%;">
              <tr>
                <th colspan="2"><?php echo $games['name']; ?></th>
              </tr>
              <tr>
                <td style="width:75px;"><img style="height:75px;border:1px solid black;" src="file_database/<?php echo $loc[0]; ?>.jpg" /></td>
                <td style="width:100%;font-size:9px;font-family:Verdana, Geneva, sans-serif;text-align:left;vertical-align:text-top;"><?php echo truncateString($games['description'], 100); ?>&nbsp;</td>
              </tr>
            </table>
          </div>
          <?php $i++;

				}

			}?>
        </div>
      </div>
      <div class="ad_1" style="float:right;">
        <table cellpadding="0" border="0" cellspacing="0" style="background-color:#900;height:600px;width:160px;">
          <tr>
            <td>ad</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <!-- End:Bottom -->
</div>
</body>
</html>

style.css:

/* Start:Cross-Page Styles */
html {
	border:0px;
	margin:0px;
	outline:0px;
	padding:0px;
	cursor:default;
}
body {
	background-image:url(images/back.jpg);
	background-color:#111;
	background-repeat:repeat;
	background-position:right top;
	color:#fff;
	font:12px Arial Black, Gadget, sans-serif;
}
a {
	color:#000;
}
#page {
	position:relative;
	text-align:center;
	width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	border:0px;
	outline:0px;
	padding:0px;
}
/* Start: Banner */
#top {
	width:800px;
	height:75px;
	position:relative;
	float:left;
	overflow:hidden;
	margin:0px 0px 16px 0px;
}
#top .back {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:75px;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#top .content {
	position:relative;
}
#top .content p {
	color:#069;
	font-size:24px;
	text-shadow: 0px -1px 0px #111;
}
/* End: Banner */
/* Start: Menu */
#menu {
	text-align:center;
	width:100%;
	height:auto;
	position:relative;
	display:block;
}
#nav {
	width:100%;
	height:34px;
	float:left;
	display:block;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding:0px;
	list-style:none;
	background-color:#069;
	color:#000;
	font:13px Arial Black, Gadget, sans-serif;
}
#nav li {
	float:left;
	display:block;
}
#nav li a {
	display:block;
	padding:8px 22px;
	text-decoration:none;
	font-weight:bold;
}
#nav li a:hover {
	background-color:#0076AE;
}
#nav li.last {
	float:none;
	overflow:hidden;
}
/* End: Menu */
/* Start: Bottom */
#bottom {
	width:800px;
	height:100%;
	position:relative;
	float:left;
	overflow:hidden;
}
#bottom .trans {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	background-color:#000;
	width:800px;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
#bottom .content {
	position:relative;
	padding:12px;
}
/* End: Bottom */
#section {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 0px 8px;
	overflow:auto;
	margin-right:12px;
	margin-bottom:12px;
}
#icon {
	text-align:center;
	background:#222;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
	margin-right:8px;
	margin-bottom:8px;
	padding:3px;
	width:180px;
	cursor:pointer;
}
#header {
	text-align:left;
	padding:0px 25px 0px 3px;
	background:#069;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	clear:right;
	margin-bottom:8px;
	position:relative;
	left:-8px;
	color:#000;
	font:18px Arial Black, Gadget, sans-serif;
	height:26px;
	width:auto;
}
#game {
	text-align:center;
	background:#111;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	padding:8px;
	overflow:hidden;
	clear:right;
	margin:auto;
	margin-bottom:12px;
}
#info {
	text-align:center;
	background:#111;
	width:728px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:8px 0px 8px 8px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
/* End:Cross-Page Styles */
/* Start: Ads */
.ad_1 {
	text-align:center;
	background:#111;
	width:160px;
	height:600px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	margin-bottom:12px;
}
.ad_2 {
	text-align:center;
	background:#111;
	width:728px;
	height:90px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:7px;
	margin-left:17px;
	margin-bottom:12px;
	clear:right;
}
.ad_3 {
	text-align:center;
	background:#222;
	width:300px;
	height:250px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	float:left;
	padding:5px;
	clear:right;
}
/* End: Ads */

ralphm · June 17, 2011, 1:56am

Yep. Add overflow: hidden to #menu so that it will wrap around its floated children:

#menu {
  display: block;
  height: auto;
  [COLOR="Red"]overflow: hidden;[/COLOR]
  position: relative;
  text-align: center;
  width: 100%;
}

nlh205 · June 17, 2011, 2:12am

I have to thank you so much for your help. I’ve been so frustrated with this and i’ve been fiddling with it for a while.

ralphm · June 17, 2011, 2:16am

Excellent! I’m glad that helped, and thanks for the feedback.