Welcome to WebmasterWorld Guest from 107.20.110.201

Forum Moderators: open

Message Too Old, No Replies

DW CS4 Spry Assests

horizontal menu bar not positioning properly...?

     

Gabby7

8:05 pm on Nov 5, 2010 (gmt 0)

5+ Year Member



Hello+

Thank you in advance for any advice/guidance you may have...I've just learned how to insert a Horizontal Meny Bar using Spry on DW CS4. My issue is the menu bar is not snug up to the image above it...here is some code that may help:


<body>
<div id="bannerImage">
<img src="" width="900" height="200" alt="" id="banner" /></div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">About Ella</a></li>
<li><a href="#">Calendar</a> </li>
<li><a href="#">Recognition</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Contact Ella</a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>


I have the following css code:

body { background-image:url(images/pat1.png);
text-align:center;
}
div#bannerImage {
height: 200px;
width: 900px;
margin-right: auto;
margin-left: auto;
background-color:#FCF;
border: none;
}
#nav {
height: 2.2em;
width: 900px;
margin-right: auto;
margin-left: auto;
}


I also have the "SpryMenuHorizontal.css" file that DW automatically creates (I can post it, but it is quite long).

AS I said, I'm just learning this...Thanx!

milosevic

10:08 am on Nov 17, 2010 (gmt 0)

5+ Year Member



Hi Gabby7

Ah the old spry menu bar eh! Takes me back a few years. It's not a bad menu system though and I still have it running on a few sites.

I'd say

#nav {
height: 2.2em;

could be your problem - remove this height and see if it works.

Otherwise you need to write rules to control the menubar. Either by editing the sprymenuhorizontal.css stylesheet or by writing styles for it in your main stylesheet.

All the sites I used this menubar on I had to edit the menubar CSS file quite a bit (though nowadays I would not edit this file, it's better practice to write the rules in your main stylesheet).

In particular the places to look at are:

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
...

And

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

....


This CSS file is very well commented to make it easy to understand and I would say not very long (compared to most stylesheets for entire sites)!

Hope this helps - P.S Qs like this you would be better asking in the CSS forum.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month