homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
Forum Library, Charter, Moderator: open

WYSIWYG and Text Code Editors Forum

    
DW CS4 Spry Assests
horizontal menu bar not positioning properly...?
Gabby7

5+ Year Member



 
Msg#: 4227250 posted 8:05 pm on Nov 5, 2010 (gmt 0)

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



 
Msg#: 4227250 posted 10:08 am on Nov 17, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved