...

View Full Version : I need help aligning a Spry Menu Bar with a content div



orangetokyo1
05-07-2011, 08:48 AM
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:


<!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!

abduraooft
05-07-2011, 09:30 AM
Please edit your post and add
][/COLOR] tags around your code. Thanks!

orangetokyo1
05-08-2011, 07:26 PM
Thanks! I fixed it. Sorry about that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum