9 Replies Latest reply on Jul 1, 2010 5:35 AM by RC/

    Center Text in Spry Menu


      Hi there,

      I am building a basic website using DW CS4.

      I have put together a page that works without messing up the code too much:



      In the Spry menu I would like to center the text vertically and

      have not been able to find a tutuorial that  included this tip.

      Can any of you folks get me going in the right direction?


      Thanks in advance!


        • 1. Re: Center Text in Spry Menu

          Here is your code for the overall box. Try adding what is emphasized in the text below.



               margin: auto;
               list-style-type: none;
               font-size: 100%;
               cursor: default;
               width: 8em;

                 height: auto;

               background-color: #F5E7B6;
               padding: 0;
               font-family: Arial, Helvetica, sans-serif;
               color: #600;
               border: medium none #600;

          Here is your code for each individual submenu header. Try adding the stressed code.

               margin: 0;
               padding: 0;
               list-style-type: none;
               font-size: 100%;
               position: relative;
               text-align: left;
               cursor: pointer;
               width: 175px;

                  height: 2em;

               border-top-style: none;
               border-right-style: none;
               border-bottom-style: none;
               border-left-style: none;

          See if that works.
          • 2. Re: Center Text in Spry Menu
            rcshell Level 1

            Hi there PV Pro,

            Thank you very much for your response.

            I should have mentioned that I am very new to css coding.

            Are you talking about working under the main heading "SpryMenuBarVertical.css" ?

            If so, which of the sub headings should I modify? for example: "ul.MenuBarVertical".

            Sounds like you are suggesting two different lines but I don't know which ones.


            I only ask because I have made a real mess of a bunch of pages by trial and error stuff.


            Thanks again for any help!


            • 3. Re: Center Text in Spry Menu
              rcshell Level 1

              Hi again,

              I think I found the areas that you were suggesting change:




              I put the changes that you suggested into these rules (if that is the word that I want).

              It put a horizontal line through the center of each box.

              When I entered live view it kind of shortened the line vertically and put a number of double

              border type lines through them.


              Did I do what you suggested?


              Could there be a "padding" number that I could set that would help?


              Sorry for not understanding too well!




              Message was edited by: rcshell

              • 4. Re: Center Text in Spry Menu
                PvPr0ductions Level 1

                Hey I got your message but I'm really busy at the moment, I'll try to respond a bit later. Hopefully this post will help bump your thread up and maybe someone else will be able to respond.

                • 5. Re: Center Text in Spry Menu

                  Hi again PV Pro,

                  Thanks so much for your update...Not a huge rush.

                  I reduced teh height of my buttons...Just seemed too tall.

                  That made the off center less noticeable but I would like to know

                  a solution if there is one.


                  Thanks again for your update...Very thoughtful!


                  • 6. Re: Center Text in Spry Menu
                    PvPr0ductions Level 1

                    Alright I believe that you put my suggestions somewhere incorrect.  These menubars can be confusing.


                    The easiest way to  center vertically is to simply make the box that is in a size that makes  the text in the middle.


                    By this I mean that if this is your box (the ---- is the text)


                    [        ]


                    [        ]

                    [        ]      <-----------------| Then the easiest way to make the box fit around the ----- is to get rid  of the bottom [      ]


                    (just a figurative way of looking at the box, there is no actual division like [  ] its all just one box)


                    You can do that by setting a height for the boxes. The height for the boxes is controlled by a particular div element. By default the height is left blank, which usually works because then it auto formats but in your case it does not appear to be working.


                    We get rid of the bottom [      ] by setting the entire box's height to 35 px (which leaves enough room for the text to still show).


                    Here is the code you want to modify. It is the second sub section down from the top. Pay attention to the CSS notes put there by the Adobe spry designer.



                    /* Menu item containers, position children relative to this container and are same fixed width as parent */
                    ul.MenuBarVertical li

                         margin: 0;
                         padding: 0;
                         list-style-type: none;
                         font-size: 100%;
                         position: relative;
                         text-align: left;
                         cursor: pointer;
                         width: 175px;
                            height: 35px;
                         border-top-style: none;
                         border-right-style: none;
                         border-bottom-style: none;
                         border-left-style: none;

                    If this does not work (make sure to update the live view or click the little globe icon to preview in
                    a browser, or right click on the home page in your local files and click put to view on your actual remote
                    server)then there might be another problem via a div box from the layout that is overriding it. If what I said
                    above does not work then try visiting this part in the test stylesheet, and modify both the padding and
                    width and height to see if that is the problem. The spry vertical menu might be trying to expand itself to fit in
                    that div or another div somewhere on the page.

                    .twoColFixLtHdr #sidebar1 {
                         float: left; /* since this element is floated, a width must be given */
                         width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
                         padding: 15px 10px 15px 20px;
                         background-color: #F5E7B6;

                    I hope this all helped. If not, then I'm sorry- it's kind of hard to tell you exactly what to do, its much easier just
                    to go through and change some stuff and troubleshoot it in dreamweaver. When messing around with the code, you should
                    probably make an effort to edit the actual code and not use the built in interface, because its easier to lose
                    track with the interface than when you actually go in and edit a part.

                    Also, if you are new to CSS like you said, you might want to try to grasp the basics. Here is a good page to look through:

                    Good luck!

                    • 7. Re: Center Text in Spry Menu
                      RC/ Level 1

                      Hey again PV Pro,

                      Thank you for your detailed response.

                      After messing around with the Spry code for a long time

                      I decided that buttons were too tall anyway so I reduced them

                      (coincidentally to about what you suggested!) and text is really close to center.


                      Regarding working in code....I started in DW in design mode...I am a construction

                      type and have no background in computer tech stuff...All self taught as a hobby.

                      I do recognize the benefit of working in code so I have been using DW in split view mode

                      to at least try to see what is going on....It's a steep learning curve!


                      Here is link to the progress I made...


                      Still playing around with design and layout...

                      Not ready for big launch day quite yet!


                      Thanks again so much for your time and effort!!

                      Is there a way to say on the forum that your answer was helpful?



                      • 8. Re: Center Text in Spry Menu
                        BenPleysier Adobe Community Professional & MVP

                        Also have a look here http://foundationphp.com/tutorials/sprymenu/customize1.php This is a tutorial by David Powers

                        • 9. Re: Center Text in Spry Menu
                          RC/ Level 1

                          Hi Ben,

                          I took a quick look at tutorial that you linked to.

                          Looks like a it covers a lot of ground and, as an added bonus,

                          is in a form that I can understand.


                          I also got quite a bit of help with the basics from www.thesitewizard.com



                          You guys in the forum have saved me from myself again!


                          Thanks abunch!



                          Message was edited by: RC/