Skip navigation
vlad mateika
vlad mateika Calculating status...
Currently Being Moderated

Can I add image spacers in between horizontal spry menu items?

Jun 14, 2012 7:30 AM

Tags: #cs5 #html #dreamweaver #spry #css #submenus #ajax #sprymenubar #spry_menu

I found a similar post on adding image spacers in a vertical spry menu: http://forums.adobe.com/message/3187009

 

That post did not help (I tried it), so, I want to know how to add image spacers between Horizontal spry menu bars. My image will be between 10x10 and 25x25 pixels. I cannot add a link to my site since it is not live, but here is a roughpicture of what I want (X stand for the image):

 

Home   X   Galleries   X   Exhibition News   X   etc...

1426 Views   8 Replies   Latest reply: vlad mateika, Jun 25, 2012 10:52 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jun 14, 2012 4:41 PM   in reply to vlad mateika
    Report

    There are a number of ways to achive this, depending on what you want. If you just want a spacer, add/modify

    ul.MenuBarHorizontal li {

        margin: 0 30px 0 0;

    }

    You could also place a background image to give it a more dramatic effect.

     

    We'll have to wait until you have uploaded the file before we can give you more personalised assistance. You will have to upload it sooer or later anyway.

     

    Gramps

     
    |
    Mark as:
  • vlad mateika
    Currently Being Moderated
    2. vlad mateika,
    Jun 14, 2012 8:47 PM   in reply to Ben Pleysier
    Report

    I would like an image spacer of 15x15 pixels positioned evenly between each menu item for asthetic purposes.

     

    I can't upload for awhile yet, but here is the code I am working with for the spry menu:

     

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

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

                        <li><a class="MenuBarItemSubmenu" href="#">Galleries</a>

                                  <ul>

                                            <li><a href="conceptual_gallery.php" target="_blank">Conceptual Gallery</a></li>

                                            <li><a href="wildflower_gallery.php" target="_blank">Wildflower Gallery</a></li>

                                            <li><a href="portraits_gallery.php" target="_blank">Portrait Gallery</a></li>

                                            <li><a href="prints-cards_gallery.php">Prints and Cards</a></li>

                                  </ul>

                        </li>

                        <li><a href="exhibition_news.php">Exhibition News</a></li>

                        <li><a href="specials.php">Specials</a></li>

                        <li><a class="MenuBarItemSubmenu" href="#">Special Services</a>

                                  <ul>

                                            <li><a href="art_instruction.php">Fine Art Instruction</a></li>

                                            <li><a href="commissioned_work.php">Commissioned Work</a></li>

                                            <li><a href="art_rental.php">Art Rental</a></li>

                                  </ul>

                        </li>

                        <li><a href="biography.php">Biography</a></li>

                        <li><a href="contact.php">Contact</a></li>

              </ul>

     

    I've tried using and "img src" in the <li> and <a> of each top level menu item, as well as position the "img src" code between two top level <li> menu items, but none of them work. here are examples of what I tried:

     

    <li><a href="index.php">Home </a><img src="../media/image_spacer.gif" width="15px" height="15px" /></li>

     

    OR

     

    <li><a href="index.php">Home <img src="../media/image_spacer.gif" width="15px" height="15px" /></a></li>

     

    OR

     

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

        <img src="../media/image_spacer.gif" width="15px" height="15px" />

                        <li><a class="MenuBarItemSubmenu" href="#">Galleries</a>

     

    Basically I want:

     

    MENU ITEM (X)* MENU ITEM (X) MENU ITEM (X) MENU ITEM

     

         *(X) denotes a 15x15 pixel image

     

    As I've said, this is the design I've tried to accomplish, I'm not concerned with how I do it, as long as it works (and hopefully the code is clean ).

     

    On this example site, there are dots between the menu items. Just replace the dots with little 15x15 images of a flower and you have what I want (only in spry):

     

    http://alittlephotography.smugmug.com/

     

    I hope this all helps.

     
    |
    Mark as:
  • Rormeister
    Currently Being Moderated
    3. Rormeister,
    Jun 19, 2012 7:35 PM   in reply to vlad mateika
    Report

    Vlad, I too am very interested in this challenge.  I would like to add small square dots (in an image the height of the menubar).  I'm hoping someone has a means to do this in Spry.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    4. Ben Pleysier,
    Jun 19, 2012 8:22 PM   in reply to Rormeister
    Report

    You might try something like

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">

    <style>

    ul.MenuBarHorizontal li.spacer {

        width: 15px;

        padding: 0.5em;

        cursor: default;

    }

     

    </style>

    </head>

     

    <body>

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

      <li><a href="#">Item 1</a></li>

      <li class="spacer"><img src="images/dot15x15.gif" width="15" height="15"></li>

      <li><a href="#">Item 2</a></li>

      <li class="spacer"><img src="images/dot15x15.gif" width="15" height="15"></li>

      <li><a href="#">Item 3</a></li>

      <li class="spacer"><img src="images/dot15x15.gif" width="15" height="15"></li>

      <li><a href="#">Item 4</a></li>

    </ul>

    <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:
  • vlad mateika
    Currently Being Moderated
    5. vlad mateika,
    Jun 21, 2012 11:41 AM   in reply to Ben Pleysier
    Report

    This almost gave me what I want. The only issue I had was that the actual image didn't show up. I'm not sure what went wrong. I put in exactly what you said (except I changed my image file path of course), but I cannot get the image to show... I'm stumped!

     

    I will post if I figure out the issue.

     
    |
    Mark as:
  • Rormeister
    Currently Being Moderated
    6. Rormeister,
    Jun 23, 2012 7:11 PM   in reply to Ben Pleysier
    Report

    Hi Gramps...(i'm one too   )

    I'll definitely give that a try.  Right now, I'm about to tear what little hair I have left out at the roots.  What is it with IE (7 & 8) and not behaving nicely with Spry Menus?  Everything works perfectly in (pick your flavor) FF/Chrome/Safari/Dolphin(android)...But IE anything on Win XP is the pits. When I hover, each button image turns White, and eventually fades to either Normal or Hover. Grrrr.

     

    Based on your post count, you're an expert. I don't want to abuse you, so if there are other locales to learn the subtelties I'd be most grateful.

     

    Cheers!

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    7. Ben Pleysier,
    Jun 23, 2012 8:16 PM   in reply to Rormeister
    Report

    As one grandfather to another, WE RULE THE WORLD...

     

    What is it we were talking about? Oh yes, your SpryMenuBar.

     

    The best way for me, or anyone for that matter, to help you is by starting a new topic wherein you supply a link to your site and a short description of your hair my problem your problem.

     

    As long as we can keep smiling 

    Gramps

     
    |
    Mark as:
  • vlad mateika
    Currently Being Moderated
    8. vlad mateika,
    Jun 25, 2012 10:52 AM   in reply to Ben Pleysier
    Report

    I found my solution:

     

    In my menu bar code, I added:

    <li class="spacer"></li>

     

    In the css I added:

    ul.MenuBarHorizontal li.spacer {

              width: 10px;

              height: 10px;

              background-repeat: none;

              padding: 0.5em;

              cursor: default;

              background-image: url(flower_spacer.png);

              top: 6px;

    }

     

    I did it in this way because doing an img src in the spacer li did not provide any results, only a blank box. The "top" attribute was to center the spacer image with the menu text, and the width and height made sure you didn't see any repeat of the spacer. I guess the width and height attribute would change depending on the size of your spacer.

     

    I find this to be a messy fix, but it works!

     
    |
    Mark as:
Actions

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