Center Text in Spry Menu

Question

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:
http://rcconnelly.net/900Fixed2.html
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!
RC

Answer 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:
http://www.adobe.com/devnet/dreamweaver/css.html
Good luck!