Feb 25 2010

Wordpress menu trick with separators

If you work with wordpress on a regular basis you know that it has a “wp_page_menu()” template tag/function with which you can generate a list of your pages. It’s especially useful if you use it as a simple CMS. Now this tag generates html in this form: ‘<ul><li><a…>link</a><li>……</li></ul>’. You can theme it to show something like this:

This is achieved by “display:inline” -ing all li elements and adding a 1px border to the right side of the li’s, and adding a separate style rule for the rightmost side li’s border to none. It’s all fine and dandy - but the border usually reaches below and above the text. Some of you might think it’s not a big deal - and rightly. However sometimes you just have that proverbial itch to fix it and come up with a solution that gives you this instead:

The difference here is › Continue reading