Skip navigation
Currently Being Moderated

Changing horizontal menu bar text layout.

Nov 11, 2011 7:44 PM

I am using Spry's horizontal menu and wish to do the following:

I want the text in the menu bar to be indented by about a quarter of an inch, but I want the gap between the menu bar items to remain the same.

When a menu bar item item is highlighted I want there to be a gap at the top and bottom between the highlight color and the top and bottom edges of the menu bar.

 

You can see the website here: http://staging-area-2.com/

 
Replies
  • Currently Being Moderated
    Nov 12, 2011 12:52 AM   in reply to Peter A. Forkes

    Have a look at the following

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHor izontal.css" rel="stylesheet">

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    html {

        color: #333;

        font-family: Cantrell, Arial, Verdana, "Lucida Bright", Helvetica, Sans-serif;/* Cantrell is a Google web font */

        background-color: #999;

        font-size: 0.8em;

    }

    body {

        width: 920px;

        margin: 36px auto 20px;

        overflow: hidden;

    }

    #header {

        height: 206px;

        background: url(http://staging-area-2.com/images/Header.png) no-repeat left top;   

    }

    #nav {

        height: 53px;

       padding: 12px 0;

        background: url(http://staging-area-2.com/images/BeigeMenuBar.png) no-repeat;

    }

    ul.MenuBarHorizontal li {

        width: auto;

    }

    ul.MenuBarHorizontal ul {

        width: auto;

    }

    ul.MenuBarHorizontal ul li {

        display: block;

        float: none !important;

        width: auto;

        white-space: nowrap;

        border-bottom: solid 1px #EEE;

    }

    ul.MenuBarHorizontal a {

        background-color: #DCC7AE;

        padding: 0.5em 2.3em;

    }

    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {

        background-color: #DCC7AE;

        color: #000;

    }

    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {

        background-color: #F7EFE5;

        color: #333;

    }

    ul.MenuBarHorizontal a.MenuBarItemSubmenu {

        padding: 0.5em 2em 0.5em 0.75em;

    }

    </style>

    </head>

     

    <body>

    <div id="header"></div>

    <div id="nav">

      <ul id="MenuBar1" class="MenuBarHorizontal">

        <li><a href="/index.html">Home</a>  </li>

        <li><a href="/CraigClark.html">About Craig D. Clark, MD</a></li>

        <li><a href="/HealthLibrary.html">Health library</a></li>

        <li><a href="/Location.html">Location</a></li>

        <li><a href="/Hours.html">Hours</a></li>     

        <li><a href="/Specialties.html">Specialties</a></li>

        <li><a href="/FormsPayments.html">Forms & payment</a></li>

      </ul>

    </div>

    <script src="SpryAssets/SpryMenuBar.js"></script>

    <script>

    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

    </script>

    </body>

    </html>

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points