Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.

This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!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>
<meta name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
    color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    border-top:5px dotted #003399;
    border-bottom:5px dotted #003399;
    margin:20px;
#menu4 ul li a{
    color: #003399;
    padding: 10px 5px 10px 10px;
    width: 170px;
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    font-family: Georgia, serif;
    font-size: 13px;
    color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
    <div id="branding">
      <h1>
      <div>
        <p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
      <div id="flash">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
        <param name="movie" value="LorentzBanner.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
          </div>
          
        </object>
        
      </object>
      </h1>
<div>
<div id="menu4">
    <ul>
      <li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
      <li><a href="">Services<span class="text">What we do</span> </a> </li>
      <li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
      <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
    </ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
      <div></div>
    </div>
    <div id="wrapper-2">
      <div id="content-top" class="png"></div>
      <div id="wrapper-3">
        <div id="content-1">
          <div class="content-wrap">
            <p>Home</p>
            <p>Contact</p>
          </div>
        </div>
        <div id="content-2">
          <div class="content-wrap">
stuff
<p> </p>
          </div>
        </div>
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
        event: "click",
        collapsible: false,
        autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    color: #6B6B6B;
    background: #8D927C url(images/bg_body.jpg) repeat-x;
    margin: 0;
    padding: 0;
    min-width: 800px;
    text-align: center;
    background-color: #000;
h2, h3, h4
    font-size: 16pt;
    font-weight: normal;
    margin: 15px 0 0 0;
#wrapper-3 p
    padding: 0;
    line-height: 1.35em;
    margin-top: 8px;
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: 0;
#wrapper-3 ul
    list-style-type: none;
    margin: 8px 0;
    padding: 0;
#branding
    margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
    color: #4f4f3f;
a:hover, a:active
    color: #000000;
@Inline image styles
img.float-left
    float: left;
    margin: 0 6px 6px 0;
img.float-right
    float: right;
    margin: 0 0 6px 6px;
img.border
    background: #FFF;
    padding: 2px;
    border: 1px solid #999;
@Tab navbar styles
#hornav ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0;
    text-align: center;
    margin-bottom: 60px;
    font-size: 0.8em;
    text-transform: uppercase;
#hornav ul li
    display: inline;
    margin: 0 2px 0 0;
    padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
    height: 400px;
#hornav ul li a
    text-decoration: none;
    margin: 0;
    background-repeat: inherit;
    background-position: center center;
    padding-top: 50%;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
    color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
    color: #000000;
@Secondary navigation styles
#navcontainer
    background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
    margin: 0;
    padding: 12px 0 0 0;
#navcontainer ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0 0 12px 0;
    border-top: 1px solid #FFF;
    background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
    display: block;
    padding: 3px 6px;
    width: 168px;
    margin: 0 10px;
    background-color: #c4bfac;
    border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
    color: #FFF;
    text-decoration: none;
#navcontainer a:hover
    background-color: #90937e;
    color: #FFF;
@Masthead text styles
#branding
    margin: 0;
    padding: 0;
#branding h1
    color: #000;
    padding: 10px 0 0px 0;
    border-top: 4px solid #656e5d;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 28px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    margin: 0;
@Layout styles
#wrapper-body
    background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
    width: inherit;
    margin: 0;
    padding: 0;
#wrapper-1
    width: auto;
    background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
    margin: 0;
    padding: 0;
#wrapper-2
    width: 45em;
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#wrapper-3
    background: url(images/bg_wrapper-3.jpg) repeat-y;
    color: #333;
    text-align: left;
#content-top
    margin: 0;
    height: 1em;
    background: url(images/bg_content-top.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
#content-1
    float: left;
    width: 12em;
    font-size: 0.9em;
    padding: 0;
    margin-top: 2em;
    margin-right: 2em;
    margin-bottom: 0em;
    margin-left: 0em;
#content-2
    float: left;
    width: 40em;
    padding: 0;
    font-size: 0.8em;
    margin-top: 2em;
    margin-right: 0px;
    margin-bottom: 0em;
    margin-left: 0em;
#content-3
    float: left;
    width: 250px;
    font-size: 10pt;
    margin: 0;
    padding: 0;
#content-4 {
    width: 190px;
    padding: 0px;
    line-height: 0px;
#content-bottom
    clear: both;
    height: 1em;
    background: url(images/bg_content-bottom.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
.content-wrap
    margin: 0;
    padding-top: 0px;
    padding-right: 2em;
    padding-bottom: 5px;
    padding-left: 0px;
#footer p
    font-size: .75em;
    margin: 12px 0;
p.content-wrap {
    font-size: 9pt;
    color: #999;
@Blog post styles
.date
    float: left;
    height: 52px;
    width: 52px;
    background: url(images/date.png) no-repeat;
    margin-right: 10px;
    padding-top: 0px;
    line-height: normal;
.date .month
    display: block;
    text-align: center;
    color: #FFF;
    font-size: 11px;
    padding-top: 4px;
    text-transform: uppercase;
.date .day
    display: block;
    text-align: center;
    padding-top: 5px;
    color: #222;
    font-size: 18px;
    font-weight: bold;
.meta
    display: block;
    font-size: 11px;
    color: #666;
    clear: right;
.blog-entry
    clear: both;
    padding-top: 2px;
#searchform
    margin: 8px 0;
    padding: 0;
@Search form styles
#searchform fieldset
    margin: 0;
    padding: 0;
    border: 0;
#searchform label
    color: #999;
    display: none;
#searchform input
    width: 160px;
    color: #222;
#searchform #submitquery
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
    line-height: 1.35em;
    text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
    line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
    font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
    display: none;
#website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 3em;
.fieldname {
    font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
    width: 829px;
    margin: 0 auto 0 auto;
#menu4 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    border-top:5px dotted #c7e7f3;
    border-bottom:5px dotted #c7e7f3;
    float:left;
    clear:both;
    margin:20px;
    text-align:center
#menu4 ul li{
    float:left;
#menu4 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#66b8d8;
    width:170px;
#menu4 ul li a span{
    display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
#menu4 ul li a:hover span.text{
    visibility:visible;
Thanks!

Similar Messages

Spry Navigation Bar

I'm new to dreamweaver CS5 and have created a new spry navigation bar. Is there a way to create one generic navigation bar to be used in several different pages so when I have to update the menus, I don't have to change each spry navigation bar for each page. Basically one main navigation bar to be used in several different pages w/out having to create a nav bar for each page.

See here http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps

Spry navigation bar covers flash movie beneath it but not the jpg image, why?

i have a spry navigation bar with a flash movie underneath,
and when i hover over the navbar and the submenu pops down it
covers the flash movie, but it doesn't cover the .jpg image that is
next to the flash movie. how can i fix this? thanks.

thanks for the reply Murray, a responder from the flash forum
gave me the following answer and it worked perfect.>>
The <object> and/or <embed> HTML elements that
reference your Flash content accept a number of optional
parameters. For the <object> element, these parameters are
supplied via nested <param> elements. Simply add the
following new <param>:
<param name="wmode" value="opaque">
The <embed> parameters are supplied via attributes. For
the <embed> element, add the following new attribute:
wmode="opaque"
That’s it. Your Flash content is now stackable via
z-index; for example, you may wrap your
<object>/<embed> pair in a <div> and set the
<div>’s z-index as you please.
<div style="position: absolute; z-index=1;">
<object attributes >
<embed attributes />
</object>
</div>
If you’re using Dreamweaver, just press the Parameters
button in the Insert > Media > Flash dialog or in the
Property inspector when selecting existing Flash content. Type
“wmode” (without quotes) in the name/parameter column
and “opaque” (without quotes) in the value column. That
will handle the above HTML for you, even with the new JavaScript
embedding available since the 8.0.2 update.

Spry Navigation Bars - Make them look GOOD

Have Dreamweaver CS4 PC
Using the plain gray spry navigation bars...im somewhat
new...
Question:
Is there any company that sells or Free to "Change the Look"
of the nav bars easily?
I might w ant to change colors, make rounded edges, make type
smaller, compact specing some, adjust the length.
Does someone have a plugin or extension that works
interactively??
Thanks
Ive searched with little results on customizing spry

A more full-featured menu building tool, with lots of styles:
http://www.projectseven.com/products/menusystems/pmm2/carbon.htm
Another nice menu builder, with lots of styles. Because there
are no timers,
I would recommend these for single-level menus or for menus
with a single
sub-menu level:
http://www.webassist.com/professional/products/productdetails.asp?PID=146
Neither is free.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"suzzie12" <[email protected]> wrote in
message
news:gmq9u2$mfl$[email protected]..
> Have Dreamweaver CS4 PC
>
> Using the plain gray spry navigation bars...im somewhat
new...
>
> Question:
>
> Is there any company that sells or Free to "Change the
Look" of the nav
> bars
> easily?
>
> I might w ant to change colors, make rounded edges, make
type smaller,
> compact
> specing some, adjust the length.
>
> Does someone have a plugin or extension that works
interactively??
>
> Thanks
>
> Ive searched with little results on customizing spry
>

How to remove empty space in CSS table and move spry menu bar?

Hello! I created www.stonecreekha.com about a year ago basically by watching youtube tutorials and haven't done much with it since so I've forgotten everything! In IE7, everything appears as it should; but in Firefox and IE8, the spry menu bar is positioned slightly higher than it should be (it slightly cuts off the foot of the golfer) and there is an empty space between the navigation bar and the photo. The source code can be viewed from the website. Here are some pics:
IE7 - how it is supposed to look:
IE8:
Firefox:
Dreamweaver:
So basically, I need to know how to remove that empty space between the navigation bar and the picture, and how to move the spry menu bar down a few pixels, in a way that it looks correct in IE8 and Firefox, and preferably IE7 as well.
P.S. I'm a noob so if you could be as specific as possible on what to do in Dreamweaver I'd really appreciate it. Thanks

I belive it's because of the -minus margin being used on the navbar, that you will need to use a negative margin to bring up both the left and right bodyArea divs.
Try : margin-top: -18px; on both divs. You may need to play around with that to get it more precise.
Again, not sure what effect that has on IE as I can't test it.
If it affects IE, then you may need to feed IE a conditional comment for the placement of those divs.

How do I get rid of the white space between my header and my spry navigation bar?

I have been grappling with a problem for the past 2 days and cannot seem to work my way around it. I have been working on a page in dreamweaver cs4 that seems to have whitespace between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari show it correctly. Could you steer me in the right direction for getting rid of that space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html
Here is my code and thanks in advance for your help:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="250" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 3.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 3.swf" width="1000" height="250">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="#">Lunch</a></li>
          <li><a href="#">Dinner</a></li>
          <li><a href="#">Cocktail</a></li>
          <li><a href="#">Take Out</a></li>
        </ul>
      </li>
      <li><a href="#">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="#">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Directions</a></li>
    </ul>
</div>
<div id="maincontentlayout3">Content for id "maincontentlayout3" Goes Here</div>
<div id="specials"><img src="png-gif-jpg/Tuesday Night Banner.jpg" width="200" height="70" alt="Margarita's Tuesday Night Special" /><img src="png-gif-jpg/Wednesday Banner.jpg" width="200" height="70" alt="Wednesday 2 for 1 dinner special at Margarita's" /><img src="png-gif-jpg/Thursday Banner.jpg" width="200" height="70" alt="Ladie's Night Thursdays at Margarita's Cafe" /><img src="png-gif-jpg/Friday Banner.jpg" width="200" height="70" alt="TGIF Happy Hour on Friday's at Margarita's Cafe" /><img src="png-gif-jpg/Sunday Banner.jpg" width="200" height="70" alt="Sunday Kids Eat Free at Margarita's Cafe!" /></div>
<div id="footer"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /> <img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

CSS:
#navigation {margin-top: -3px;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Clearing Spry Menu Bars within the website

How do I clear the spry menu bar values within a website. I am trying to create a horizontal spry menu bar on one page and then another horizontal one on another page. It keeps the same values everytime I create a new page. How do I clear the values for each page?
Thanks!

heatherfar69 wrote:
I am redesigning the website in the test environment using a new page. While doing so I am redoing the spry menu bar. It changed the spry menu bar in the original website (production environment). I would like to have the spry menu's be separate. How do you create separate spry menu bars for a situation as such?
Thanks!
If you are editing locally it should not overwrite your remote file unless you have the option "Automatically upload files to server on save" checked off. If that is the case you should uncheck that box.
If you want to further separate the old version from the new version, the only other method is to just create a new site. Even if you start with a duplicate of the existing site. Then you don't risk the chance of overwriting the existing files on the server.

Spry Navigation Bar going wrong way in IE

I have horizontal navigation bar through spry in Dreamweaver. In all other web browsers, my first level of drop down menus go directly down from the main menu items. In IE they go directly right! Does anyone know what I can do to fix this problem and quickly. My final presentation is Tuesday. I am new to all this and I don't have the foggiest how to fix it! Thanks in advance for any and all assistance with this matter!!!!!!

It would be a lot easier to answer your question if you had a link to your site or at the very laest showed your markup.
I assume that you have made the menu item widths as being auto rather than a fixed width in which case IE will use the full width available to show the submenu items.
To counteract this you need the following style rules
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
The !important overrides the style rule that is given the element by the JS.
Gramps

Position Spry Menu Bar inside Header Div

Hi,
I have a horizontal menu bar that I am trying to position inside a header div at the top of my site. FYI, the layout of my site is that I have an outer wrapper div and the first div within the outer wrapper is the header div. I am following isntructions from a video tutorial I foudn that suggests that I set the ul.MenuBarHorizontal CSS rule to be "position - absolute" and "bottom - 0px". When I do this, it positions the menu bar at the bottom of the page, outside the margins of the header div. When I say bottom of the page, I don't mean at the bottom of the website page, but for some reason, at the bottom of the dreamweaver page, even outside of the outer wrapper div, depending on what I have the zoom set to. I hope the way I'm explaining this makes sense because it is completely baffling.
All I want to do is have the menu bar positioned at the bottom and horizontally centered inside the header div. Any suggestions?

I've put up an example of what you're attempting to do here:
http://perrelink.com.au/forum/sky/menu-in-header.php
Instructions on the page :-)
Hope this helps.
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Spry Menu bar 2.0 from Widget Browser only works in Firefox, not other browsers

Hello,
I have downloaded and customized the Spry Menu Bar 2.0 from Adobe Widget Browser.
I have made a seemingly functionable horizonatl navigation bar that will be displayed on all of my website's pages.
While in live view in Dreamweaver and when I preview the page in FireFox the entire navigation bar works and displays perfectly.
However, when I preview the page in another browser, like Safari, the navation does not display and shows up as an ordered list. I have tried a couple of fixes with no success. I have also spent some time searching the forums for an asnwer, but more commonly I find that people have problems with the spry menu functioning in Firefox while I have the exact opposite problem.
Please help! I'm to have this website completed by the end of next week!
Thank you!!

Hi John,
Thanks, however, my site is still only on my local computer and not live or on a testing server yet. I could copy and paste my code in, I thought that may be cumbersome, but here goes :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pennsylvania Academy of Music, Welcome</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="NavigationDec2.html" rel="stylesheet" type="text/css" />
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<title>Spry Menu Bar - Basic : December 2</title>
<link type='text/css' href='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css' rel='stylesheet'/>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/SpryMenu.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPl ugin.js'></script>
<script type='text/javascript' src='file:///Macintosh HD/Users/ABaer/Documents/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPl ugin.js'></script>
<style type="text/css">
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:#f9e440;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    padding:0;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:12px;
    border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 750px;
.MenuBarFixedCentered {
    float: none;
    width: 750px;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 4px 6px 4px 4px;
    background-color:#f9e440;
    border-width:0px;
    border-color: #cccccc #ffffff #cccccc #ffffff;
    border-style: none solid none solid;
#MenuBar .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#003366;
    background-color:#f9e440;
    width:82px;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 13px;
    font-style: normal;
    background-color:#c82f6a;
    padding:2px 2px 2px 2px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:#c82f6a;
    color:#000000;
    padding: 6px 10px 6px 5px;
    width: 25em;
    width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: #ffff99;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #ffff99; /* consider exposing this prop separately*/
    color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #ffff99;
    color: #000000;
#MenuBar .SubMenu .MenuItemHover {
    background-color: #cc99ff;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #FFFDB8;
    color: #333366;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #c82f6a;
    min-width:100px; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:10px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #c82f6a;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: #ffff99; /* consider exposing this prop separately*/
    color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: #cc99ff; /* consider exposing this prop separately*/
    color: #333366;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -2px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
<style type="text/css">
</style>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="Header"> </div>
<div id="mainContent">
    <div id="Nav"><ul id="MenuBar">
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a>
<ul>
    <li> <a href="history.html">History and Mission</a> </li>
    <li> <a href="admin.html">Administration</a>
    <li> <a href="faculty.html">Faculty</a>
    <li> <a href="artists-in-residence.html">Artists in Residence</a> </li>
</ul>
</li>
<li> <a href="#">Programs</a>
<ul>
    <li> <a href="lessons.html">Lessons</a> </li>
    <li> <a href="classes.html">Classes</a>
    <li> <a href="ensembles.html">Ensembles</a>
<li> <a href="adultprograms.html">Adult Programs</a> </li>
</ul>
   </li>
<li> <a href="#">Departments</a>
    <ul>
      <li> <a href="choir.html">Choir</a> </li>
      <li> <a href="ealrydevelopment.html">Early Development</a> </li>
      <li> <a href="guitar.html">Guitar</a> </li>
      <li> <a href="jazz.html">Jazz</a></li>
        <li> <a href="piano.html">Piano</a></li>
          <li> <a href="strings.html">Strings</a></li>
           <li> <a href="theory.html">Theory and Composition</a></li>
               <li> <a href="voice.html">Voice</a></li>
                   <li> <a href="windsandpercussions.html">Winds and Percussion</a></li></ul></li>
                    <li> <a href="admissions.html">Admissions</a> </li>
                     <li> <a href="#">Events</a>
                       <ul>
    <li> <a href="concertseries.html">Concert Series</a> </li>
    <li> <a href="studentevents.html">Student Events</a>
    <li> <a href="festivals.html">Festivals</a>
</ul></li>
    <li> <a href="community.html">Community</a> </li>
        <li> <a href="#">Support</a>
         <ul>
    <li> <a href="donate.html">Donate</a> </li>
    <li> <a href="volunteer.html">Volunteer</a>
</li></ul></li>
<li> <a href="contact.html">Contact Us</a> </li>
      </li>
    </ul>
</li>
</ul></div>
<div id="connect"> <div id="connectbox">
<img src="emailus.jpg" width="55" height="52" alt="Email Us" /><p>
<img src="apply.jpg" width="55" height="52" alt="Apply" /><p>
<img src="newsletter.jpg" width="55" height="52" alt="Newsletter" /><p>
<img src="Facebook.jpg" width="52" height="53" alt="Facebook" /><p>
<img src="Twitter.jpg" width="55" height="55" alt="Twitter" /><p>
<p></div>
</div>
<div id="pageheader"><img src="adultprograms.gif" width="800" height="61" alt="adult programs" /></div>
<div id="MainCopy"> <div id="copywide">General Copy about Adult Programs
    <div id="classbox"><img src="earlymusicensemblece.gif" width="770" height="42" />
      <p>
     Directed by Rainer Beckmann, the Pennsylvania Academy of Music's Early Music Program provides opportunities for students to learn more about historical performance practice. The program's current activities focus on the school's Early Music Ensemble, made up of enthusiastic amateur musicians performing on recorders and violas da gamba. The recent donation of a two-manual harpsichord will allow the program to include special Baroque ensemble lessons in the near future. In addition, individual Academy students will have the possibility to be accompanied on an instrument regularly used in music of the 17th and 18th centuries. The class meets 1 hour per week.
   </div>
   <div id="smallclassbox"><img src="grouppiano.gif" width="770" height="42" />
<p>
Learn to play the piano in a group setting of 4-6 students. Classes are offered for all beginner piano students. Our qualified teachers will teach you to read notes and make music with your family and peers!</div>
<div id="smallclassbox"> <img src="amateurchamber.gif" width="770" height="42" />
<p>
This course is designed for the adult amateur who would like to play his/her instrument in a chamber music setting with other amateurs of the same level. Groups meet once a week for a one-hour coaching and prepare a work to be performed at the end of the semester. Coachings address both individual needs and techniques of collaborative playing.
</div>
    <div id="largeclassbox"><img src="rockandroll.gif" width="770" height="42" />
This course traces the American popular music from the work songs of enslaved Africans through the Beatles. The course focuses on the history, theory, and sociological implications of gospel, blues, bluegrass, rhythm and blues, rock and roll, and psychedelic rock. Class will include lecture, discussion, and demonstration. Students will give presentations on popular styles of the 1980s, 1990s, and beyond.
Course Objectives:
In this course, students will:<br/>
1. Understand the development of various styles/genres of popular music.
2. Understand the connectivity of the cultural, political and social, with the musical.<br/>
3. Become familiar with music terminology in order to discuss music with insight and authority.<br/>
4. Develop keen listening skills enabling them to discern such elements as instrumentation, stylistic characteristics, and beats/grooves.<br/>
5. Gain insight into the recording industry and its effects on American culture.
   </div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarLeftShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
</script>
</body>
</html>

Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="../CSS/main.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* 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: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* 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: 132.8px;
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: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
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: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* 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
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
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(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* 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%;
/* 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(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* 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(SpryMenuBarDownHover.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;
filter:alpha(opacity:0.1);
/* 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: inline;
f\loat: left;
background: #FFF;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

Graphical navigation bar using css

I am trying to create a navigation bar for a page I am
designing. Unfortunately, I am new to HTML and CSS and the little
code I do know is not working for me in this regard. I found a
tutorial that basically fakes an unordered list and turns it into
graphical blocks The end result, however, is (1) not centered, and
(2) messes with the layout. I want to contain the navigation bar
within the nav_bar div. In a way it is, but with the navigation bar
present, the div the encloses it moves down the page. Any
suggestions?

Inside code view, place the curser where you want the menu.
Select the spry tab, and choose the fourth button from the
right. It should be right under the Data button. Then select the
horizontal menu from the pop up menu.
Next hover over the new menu and click the blue spry menu tab
that shows up. The properties menu will allow you to edit what is
in the menu. If you do not need the drop down children, select them
and click the "-" above it.
With the menu item selected in the properties menu, on the
right side you can name each one and also give it a link, title,
and target.
Then play with the css file that dreamweaver generated for
you and you are in business. One safty thing, make a copy of the
css file as a back up. So if anything does happen, you do not have
to start all over. Also if you print out the css code, you can get
an idea of what everything is doing by reading the comments.

Spry Menu Bar CS4

I have used the horizontal Spry Menu Bar for the navigation for my website. I used a tiered system because I needed two levels of drop downs for the menu. When we loaded the site to the web yesterday it worked fine on Mozilla but there was a glitch on IE. Instead of dropping down in a stacking order, the submenus would be lined up horizontally along the screen in a long line. I'm not sure if I need to edit the .css file for the spry menu bar, or the .js file. Any help would be greatly appreciated!
Note: I've attached the javascript code AND the css code for reference.

I was just struggling with this, too. I think I have it fixed -- it's looking good in IE7 and IE8 (my standalone of IE6 has conflicts and refuses to open this morning).
You need to update the CSS. Give this a try.
ul.MenuBarHorizontal ul li
    clear:left;
    float: none;
    background-color: transparent;
     color: #878189;
Take a look -- the menus should be displaying vertically in a list in IE, but you'll see the background color isn't extending to fill the entire list box.
So add the background-color property with the correct color to the ul.MenuBarHorizontal ul entry.
I haven't gone through your code line by line, but those two changes fixed it for me. Let me know if it works.

Spry Menu Bar not showing up in Internet Explorer 7

So, after hours of playing with CSS code yesterday and today,
I finally got my Spry navigation bar laid out the way I would like
it to display in Safari. It look a very long time for me to
customize it the way I wanted it, but it the end, it turned out
fine.
Then... to my horror, I jumped into Internet Explorer 7, and
there is no navigation bar to be seen. I've heard of some problems
when viewing Spry menus in different browsers, but I never heard of
the menu simply not being displayed.
Any ideas on why this would occur? You can view the page I'm
working on
here.
Any insights would be greatly appreciated. Thanks!

I am sorry, but I do not see a SpryMenuBar in your document nor do i see a problem with the menubar that you do have. I have tested in IE7+
Gramps

Spry Menu Bar Vertical Help

Hi,
Since the site isn’t online yet I posted my project for downloading. I am using Dreamweaver CS4.
For the website I am creating I would like to have a spry menu bar. I have been trying to figure this out but I can’t do it. The main file I am working with is named “theme_02_design.html” which is found in the Publish folder inside of In Play by Heather Ashley Inc. As you can see there is a left navigation area with 3 items listed (Home, Products, and Contact Us). I would like to change this into a vertical spry menu bar. Every time I try to do this the page is distorted in some way or another. I would like the menu on the left of the screen to look the same but with the vertical spry menu bar functions.
When someone visits the page I would like them to hover over the word products and have a submenu with multiple items.
It would look something like this...
Home
Products - submenu - Warm Up Series (I would insert a submenu here as well)
Contact Us                   Lace Up Hooded Sweatshirt
                                    Fleece Name Pants
                                    Shorts
                                    Accessories
                                    Shell Colors
                                    Trim Colors (I would insert a submenu here as well)
Can anyone help?
Thanks

I fiddled around with your file. I will attach the zip of your files.
Take a look at your page. I commented out your original navigation and added a Vertical Spry Menu Bar.
You will have to do some more adjusting, but I copied portions of your own CSS file into the Spry Menu Bar CSS.
See what you can do with it.
Beth

Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

Similar Messages

Maybe you are looking for