Borders on Horizontal Spry Menus

by James Cook on May 27, 2009

Chris Tordesillas recently asked via the contact form how to:

…make a simple horizontal spry menu where the sections are divided by a neat 1 pixel border all around.  My problem is when I place the border on the "ul.MenuBarHorizontal a" selector it places a 1 pixel border around each cell.  The end result is the border between 2 cells ends up becoming 2 pixels.

I just want a simple 1 pixel border in between my "buttons"

There are probably many ways to accomplish this but the one that occurs to me is to wrap three sides of the ul.MenuBarHorizontal a selector with a border:

border-top: 1px solid #F00;
border-right: 1px solid #F00;
border-bottom: 1px solid #F00;

And then create a special class style to provide the missing left border for the first "cell":

.leftBorder {
border-left: 1px solid #F00;

You'll then need to apply the class to the proper link <a> tag:

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

As I said, there are probably other solutions. If you have one, please feel free to leave it in the comments below.

And, as always, feel free to email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

Jody June 5, 2009 at 12:30 pm

Another option for doing this would be to place a 1px border on the ul,
and a 1px bottom border to each li.

You would then still need a special class to remove the bottom border from the last li item

ul {width:???px; border:1px solid #000;}
li {border-bottom:1px solid #f00;}
li.last {border:none;}

<li>First line</li>
<li>Second line</li>
<li class="last">Third Line</li>

jcook June 5, 2009 at 1:03 pm


Thanks, that’s a good solution for Dreamweaver’s vertical Spry menus.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact