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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need help aligning a Spry Menu Bar with a content div

    Hi there,

    I need help aligning a Spry Menu Bar with a content div. My footer and content seemed to be aligned together, however my Spry Menu Bar is shifted to the left. What could be the problem?

    Here is the CSS & site code:

    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">
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="untitled.css" rel="stylesheet" type="text/css" />
    <link href="sitelayout_content.css" rel="stylesheet" type="text/css" />
    <!-- InstanceBegin template="/Templates/home.dwt" codeOutsideHTMLIsLocked="false" -->
    <style type="text/css">
    A:link {color: #0099FF}
    A:visited {color: #0099FF}
    A:active {color: #0099FF}
    </style>
    <STYLE type="text/css">
    <!--A.noline {text-decoration: none};//-->
    </STYLE>
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Jeff Wiguna | Entrepreneur. Musician. Visionary.</title>
    <!-- InstanceEndEditable -->
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link href="untitled.css" rel="stylesheet" type="text/css" />
    
    <link href="sitelayout_content.css" rel="stylesheet" type="text/css" />
    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="file:///Leila/Users/shereen/Desktop/Design Work/Freelance Works/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <a href="http://www.jeffwiguna.com"><img src="images/jefflogo.jpg" border="0" class="bg" link="#666666"></a>
    
    <p align="left"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li>
        <div align="left"><a href="http://www.jeffwiguna.com" class="MenuBarHorizontal">HOME</a></div>
      </li>
      <li>
        <div align="left"><a href="http://jeffwiguna.tumblr.com/">BLOG</a></div>
      </li>
      <li>
        <div align="left"><a href="#" class="MenuBarItemSubmenu">PROJECTS</a>
          <ul>
            <li><a href="http://www.jeffwiguna.com/oprojects.html">Overview</a></li>
            <li><a href="http://www.jeffwiguna.com/remedy.html">Remedy</a></li>
            <li><a href="http://www.jeffwiguna.com/freefall.html">Freefall</a></li>
            <li><a href="http://www.jeffwiguna.com/lifeskill.html">Life Skill</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div align="left"><a href="#" class="MenuBarItemSubmenu MenuBarItemSubmenu MenuBarItemSubmenu MenuBarItemSubmenu MenuBarItemSubmenu">MUSIC</a>
          <ul>
            <li><a href="http://www.jeffwiguna.com/omusic.html">Overview </a></li>
            <li><a href="http://www.youtube.com/jeffwiguna">Youtube </a></li>
            <li><a href="http://www.myspace.com/jeffwiguna">Myspace</a></li>
            <li><a href="http://soundcloud.com/wiguna-project">SoundCloud </a></li>
            <li><a href="http://www.jeffwiguna.com/albums.html" class="MenuBarItemSubmenu">Albums </a>
                <ul>
                  <li><a href="ep.html">'Jeff Wiguna' EP</a></li>
                  <li><a href="wproject.html">'Give Us The Weekend' EP</a></li>
                </ul>
            </li>
          </ul>
        </div>
      </li>
      <li> <a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
        <ul>
          <li><a href="http://www.jeffwiguna.com/ocommunity.html">Overview</a></li>
              <li><a href="http://www.jeffwiguna.com/park.html">Park Community Church</a></li>
        </ul>
      </li>
      <li>
        <div align="left"><a href="#" class="MenuBarItemSubmenu">ABOUT</a>
          <ul>
            <li><a href="http://www.jeffwiguna.com/oabout.html">Overview</a></li>
            <li><a href="http://www.jeffwiguna.com/family.html">Family </a></li>
            <li><a href="http://www.jeffwiguna.com/professional.html">Professional</a></li>
            <li><a href="http://www.jeffwiguna.com/faith.html">Faith</a></li>
          </ul>
        </div>
      </li>
    </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    
    <!-- InstanceBeginEditable name="EditRegion3" -->
    <div id="sitelayout_content"><img src="images/Business.jpg" width="850" height="400" border="0" /></div>
    <!-- InstanceEndEditable -->
    
    
    <div class="footer">
      <div align="right"><font size="2" face="Arial, Helvetica, sans-serif">Let's connect <a href="mailto: jpwiguna@gmail.com">jpwiguna@gmail.com</a> </font>
        <font size="2" face="Arial, Helvetica, sans-serif">| 562.508.3397 </font> <a href="http://www.facebook.com/people/Jeff-Wiguna/1227107"><img src="images/facebook.jpg" alt="facebook" width="40" height="40" hspace="7" border="0" /></a><font size="2" face="Arial, Helvetica, sans-serif"><a href="http://twitter.com/#!/jeffwiguna"><img src="images/twitter.jpg" alt="twitter" width="40" height="40" hspace="7" vspace="0" border="0" /></a></font><font size="2" face="Arial, Helvetica, sans-serif"><a href="http://www.linkedin.com/in/jeffwiguna"><img src="images/linkedin.jpg" alt="linked" width="40" height="40" hspace="7" border="0" /></a></font></div>
    <!-- InstanceEnd --></html>
    
    
    
    
    ---------------
    
    
    @charset "UTF-8";
    
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /*******************************************************************************
    
     LAYOUT INFORMATION: describes box model, positioning, z-order
    
     *******************************************************************************/
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
    	list-style-type: none;
    	cursor: default;
    	margin: 0 auto;
    	position: fixed;
    	top: 240px;
    	width: 915px;
    	left: 250px;
    } 
    
    
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	position: relative;
    	text-align: left;
    	cursor: pointer;
    	width: 9.5em;
    	float: left;
    	border: 1;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	z-index: 1020;
    	cursor: default;
    	width: 9.5em;
    	position: absolute;
    	left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
    left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
    width: 9.5em;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
    position: inherit;
    margin: -5% 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
    left: auto;
    top: 0;
    }
    
    /*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
    	border:#666666
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    	display: block;
    	cursor: pointer;
    	background-color: #FFFFFF;
    	padding: 0.5em 0.75em;
    	color: #333;
    	text-decoration: none;
    	font-family: "Century Gothic", Arial, sans-serif;
    	text-align: left;
    	font-size: small;
    	font-weight: 300;
    	text-transform: capitalize;
    	border: #666666
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	background-color: #37adfc;
    	color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    	background-color: #37adfc;
    	color: #FFFFFF;
    }
    
    /*******************************************************************************
    
     SUBMENU INDICATION: styles if there is a submenu under a given menu item
    
     *******************************************************************************/
    
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarDown.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    	padding-right: 35px;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarRight.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    	padding-right: 35px;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    
    /*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
    position: absolute;
    z-index: 1010;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
    	display: block;
    	f\loat: left;
    	background: #FFF;
    }
    }


    Thanks so much!
    Last edited by orangetokyo1; 05-08-2011 at 06:26 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please edit your post and add [CODE][/CODE] tags around your code. Thanks!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! I fixed it. Sorry about that.


  •  

    Tags for this Thread

    Posting Permissions

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