SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slide Down Menu Not Lining Up

    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:
    Code HTML4Strict:
    <?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:
    Code 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 */

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nlh205 View Post
    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.
    Yep. Add overflow: hidden to #menu so that it will wrap around its floated children:

    Code:
    #menu {
      display: block;
      height: auto;
      overflow: hidden;
      position: relative;
      text-align: center;
      width: 100%;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Excellent! I'm glad that helped, and thanks for the feedback.


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
  •