Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Drop Down Positioning

    If anyone is able to help I would greatly appreciate it. I'm trying to duplicate this page - http://pmportfolio.net/tester/ with DIVs instead of TABLES. Problem is that I'm just learning how to use these DIVs and I'm having trouble positioning the drop down menu. (I also had help making this drop down menu, so I don't exactly understand it.)

    Here is the page: http://simpledark.webs.com/template-divs/index.html I'd like to position the menu like it is on the other page. On a side note, I'm sure there are things in there that are not need, and I'm not sure which, so if anyone could clean up the DD Menu's CSS a bit, that would be awesome.

    Here is the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Test Script Collection</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <meta name="keywords" content="" /> 
      <meta name="description" content="" />
      <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
      <link rel="stylesheet" type="text/css" href="div-style.css" />
      <script type="text/javascript" src="./scripts/pmportfolio.js"></script>
      <script type="text/javascript">
      window.onload=(function(){
        LastMod().Copyright().ddmenu.init();
      });
      </script>
    </head>
    <body>
    <div id="wrapper">
      <div id="logo">
        <div id="date">
          <ul>
            <li>
              <span class="blue">Last Update:</span>
              <span id="LastMod"></span>
    	    </li>
    	  </ul>
        </div>
    	<div id="rgbar">
    	  <div id="container">
    		<div id="specialtext">
    		  <div id="gameselector">
    			<div class="menu">
    			  <ul>
    				<li id="ddmenu"><a class="ddm">Drop Down Links</a>
    				  <ul id="ddinner" style="position:absolute;display:none;">
    					<li><a href="#" target='_blank'>&nbsp;First One</a></li>
    					<li><a href="#" target='_blank'>&nbsp;Second One</a></li>
    					<li><a href="#" target='_blank'>&nbsp;Third One</a></li>
    					<li><a href="#" target='_blank'>&nbsp;Fourth One</a></li>
    				  </ul>
    				</li>
    			  </ul>
    			</div>
    		  </div>
    		</div>
    	  </div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    And here is the CSS (DD Menu is at the bottom):
    Code:
     /***********************************************
    *********************** @MAIN STYLES
    ***********************************************/
    
    body {
      background-color: #0c0c0c;
      background-image: url("images/background.png");
      padding: 0;
      margin: 0;
    }
    
    .pointer a {
      cursor: pointer
    }
    
    #wrapper {
      width: 1000px;
      margin: 5px auto;
      margin-bottom: 25px;
    }
    
    #wrapper #logo {
      width: auto;
      height: 100px;
      background-image: url("images/banner.gif");
      border: 1px solid #000000;
      -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5); /*Mozilla Drop Shadow*/
      -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5); /*Safari and Chrome Drop Shadow*/
      box-shadow: 2px 2px 4px rgba(0,0,0,.5); /*Opera Drop Shadow*/
      -moz-border-radius: 6px; /* mozilla border radius */
      -webkit-border-radius: 6px; /*Safari and Chrome Border Radius*/
      border-radius: 6px; /*Opera Border Radius*/
    }
    
    #wrapper #logo #date {
      float: right;
      padding-top: 10px;
      padding-right: 5px;
    }
    #wrapper #logo #date ul{
      padding: 3px 0;
      margin: 1px 0 0 0;
      font: bold 10px Verdana;
      list-style-type: none;
    }
    #wrapper #logo #date li {
      display: inline;
      margin: 0;
      text-decoration: none;
      padding: 5px 7px;
      margin-right: 5px;
      color: #c8c8c8;
      border: 1px solid #000000;
      -moz-border-radius: 6px; /* mozilla border radius */
      -webkit-border-radius: 6px; /* safari and chrome border radius */
      border-radius: 6px; /* opera border radius */
      -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
      -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* safari and chrome box shadow */
      box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* opera box shadow */
      background: #0c0c0c;
      background: -moz-linear-gradient(center top, #0c0c0c, #242424 25%, #3c3c3c 45%, #242424 85%, #0c0c0c); /*mozilla gradient*/
      background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #0C0C0C),
        color-stop(0.25, #242424),
        color-stop(0.45, #3C3C3C),
        color-stop(0.85, #242424),
        color-stop(1, #0C0C0C)
      );
      opacity: .9;
    }
    
    /***********************************************
    *********************** @FONTS
    ***********************************************/
    
    .blue {
      font-family: verdana;
      font-size: 10px;
      color: #2a78c6;
    }
    
    /***********************************************
    *********************** @DD MENU
    ***********************************************/
    
    
    /* SPECIAL TEXT FORMATION */
    #rgbar #container #specialtext {
      width: 190px;
      text-align: center;
      font-size: 10px;
      color: #FFFFFF;
      padding: 4px 0px 0px 0px;
    }
    
    #rgbar a, #rgbar a:link, #rgbar a:visited, #rgbar a:active, #rgbar a:hover {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #CCCCCC;
    }
    
    /* remove all the bullets, borders and padding from the default list styling */
    #rgbar #container #specialtext #gameselector .menu ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    #rgbar #container #specialtext #gameselector .menu li {
      float: left;
      width: 175px;
      position: relative;
      z-index: 100;
      left: 5;
    }
    
    /* style the links for the top level */
    #rgbar #container #specialtext #gameselector .menu a,
    #rgbar #container #specialtext #gameselector .menu a:visited {
      display: block;
      text-align: left;
      font-size: 10px;
      text-decoration: none;
      color: #000000;
      width: 169px;
      height: 16px;
      padding-left: 4px;
      line-height: 16px;
      background-color: #c8c8c8;
      border: 1px solid #000000;
      font-weight: bold;
      -moz-border-radius-topright: 2px; /* mozilla border radius */
      -webkit-border-radius-topright: 2px; /* safari and chrome border radius */
      border-radius-topright: 2px; /* opera border radius */
      -moz-border-radius-topleft: 2px; /* mozilla border radius */
      -webkit-border-radius-topleft: 2px; /* safari and chrome border radius */
      border-radius-topleft: 2px; /* opera border radius */
    }
    
    /* a hack so that IE5.5 faulty box model is corrected */
    * html #rgbar #container #specialtext #gameselector .menu a,
    * html #rgbar #container #specialtext #gameselector .menu a:visited {
      width: 175px;
      /* QUIRKS MODE */
      /* w\idth: 175px; */
      /* VALID MODE */
      w\idth: 173px;
    }
    
    /* IE 6 to OPERA Switch */
    html > body #rgbar #container #specialtext #gameselector .menu ul ul {
      position: relative;
      display: none;
      top: 18px; left:-5;
    }
    
    /* style the second level links */
    #rgbar #container #specialtext #gameselector .menu ul ul a,
    #rgbar #container #specialtext #gameselector .menu ul ul a:visited {
      text-align: left;
      background: #222;
      color: #bbb;
      font-weight: normal;
      height: auto;
      line-height: 12px;
      padding: 3px;
      width: 167px;
      border: 1px solid #000000;
      border-width: 0 1px 1px 1px;
      -moz-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.8);
      -webkit-box-shadow: inset 0 0 1em #000000;
      box-shadow: inset 0 0 1em #000000;
      -moz-border-radius: 0px; /* mozilla border radius */
      -webkit-border-radius: 0px; /* safari and chrome border radius */
      border-radius: 0px; /* opera border radius */
    }
    
    #rgbar #container #specialtext #gameselector .menu #ddmenu .ddm,
    #rgbar #container #specialtext #gameselector .menu #ddmenu:hover {
      background-color: #c8c8c8;
      background-image: url("images/dropbg.png");
    }
    
    #rgbar #container #specialtext #gameselector .menu #ddmenu .ddm {
      color: #000000;
    }
    
    #rgbar #container #specialtext #gameselector .menu ul ul li.last,
    #rgbar #container #specialtext #gameselector .menu ul ul li.last:visited {
      text-align: left;
      background: #000000;
      color: #bbb;
      height: auto;
      line-height: 12px;
      padding: 0;
      width: 171px;
      w\idth: 173px;
      border: 1px solid #555;
      border-width: 0 1px 1px 1px;
      b\order-width: 0 1px 1px 1px;
    }
    
    #rgbar #container #specialtext #gameselector .menu ul ul li.last a,
    #rgbar #container #specialtext #gameselector .menu ul ul li.last:visited a:visited {
      border: 0px;
      width: 173px;
      w\idth: 166px;
    }
    
    /* yet another hack for IE5.5 */
    * html #rgbar #container #specialtext #gameselector .menu ul ul a,
    * html #rgbar #container #specialtext #gameselector .menu ul ul a:visited {
      width: 175px;
      /* QUIRKS MODE */
      /* w\idth: 175px; */
      /* VALID MODE */
      w\idth: 167px;
    }
    
    /* style the top level hover */
    #rgbar #container #specialtext #gameselector .menu ul a:hover {
      color: #000000;
      background-color: #c8c8c8;
    }
    
    #rgbar #container #specialtext #gameselector .menu ul ul li a:hover {
      color: #FFF;
      background: #2a78c6;
    }
    
    #rgbar #container #specialtext #gameselector .menu :hover > a,
    #rgbar #container #specialtext #gameselector .menu ul ul :hover > a {
      color: #c8c8c8;
      background: #222;
    }
    
    /* IE 6 to OPERA Switch */
    html > body #rgbar #container #specialtext #gameselector .menu ul li:hover ul,
    html > body #rgbar #container #specialtext #gameselector .menu ul a:hover ul {
      d\isplay:block;
    }
    Last edited by jimmyd; 12-21-2010 at 11:29 PM.

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Seems I finally figured it out. :P

    I added this to the CSS:
    Code:
    #rgbar {position: absolute;
      float: right;
      margin-left: 813px;
      margin-top: 70px;
    }
    But I'd still like to get this out of the HTML and into the CSS instead:
    Code:
    style="position:absolute;display:none;"
    Where would I put this??


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •