I'm having some problems with making a horizontal menu bar have a
consistent height from block to block. I created a Spry menu bar,
utilizing Dreamweaver's Spry menus to create the content. The CSS is
as follows:
ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
cursor: default;
width: auto;
margin-bottom: 0;
margin-top: 0;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
padding: 0;
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: 100px;
font: 10pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
font-size: 10pt;
width: 10em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 100px;
border-top-style: none;
border-bottom-style: none;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
}
ul.MenuBarHorizontal
{
background: #044c00 url(../images/menuBkgd.jpg) repeat-x;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
text-decoration: none;
padding: 5px .5em;
background: #044c00 url(../images/menuBkgd.jpg) repeat-x;
color: white;
}
ul.MenuBarHorizontal a:visited
{
display: block;
cursor: pointer;
text-decoration: none;
background: #044c00 url(../images/menuBkgd.jpg) repeat-x;
color: white;
padding: 5px .5em;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #044c00;
color: #FFF;
background-image: url(../images/menuBkgd.jpg);
text-decoration: underline;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible
{
background-color: #044c00;
color: #FFF;
text-decoration: underline;
}
I have added a few javascript items to the menu bar, which I believe
is causing this variance. The first is the ShareThis button. I used
this css to override the standard menu, but to also move the text to
the right:
.stbuttontext {
padding-left: 15px;
}
I also added a calendar application to the menu. When moused over,
the WebCal dates appear (though no dates are currently entered, it
does work). This has a massive CSS layout, but to make it appear here
I have to use an iFrame. To make the UL menu display these two
javascripts, I used a link hack in Dreamweaver: <a
href="javascript:;">iframe/ShareThis code here</a>
Testing pages are available here:
http://www.pleasetouchtheart.com/berkshiretheatre.org/
Thanks!
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
