Change style of link bar based on navigation structure

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

By creating a new theme, I managed to create a new picture (with arrowhead)
for the vertical navigation item. I then had to create a longer button
background picture to accommodate the text of the link. However, the first
letters of the text are superimposed on the arrowhead. I don't know how to
include space between the arrowhead (at start of the button) and the text of
the link.
Ideally, I would like to manage all this via a css... but don't know the
tags that would let me do this.
Version of product: 2002 SP2
 
The only way I know of getting variable-width nav bar links is to choose a
plain-text nav-bar style, enclose each Nav bar in a one-celled table that
asssigns a CSS class, and then apply the colors, rollovers, and background
pictures via CSS. Here's a simple example:

<head>
<style>
table.linkbar a {background-color:pink;
background-image:url('images/abc.gif')}
table.linkbar a:hover {background-color:yellow}
</style>
</head>
<body>
<table class="linkbar"border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!-- Nav bar goes here --></td>
</tr>
</table>
</body>

This works because all the Link Bar links will all be text hyperlinks, and
they'll all be within tables coded class="linkbar" (or whatever). Other
hyperlinks on the same page won't be affected, because they're not within
tables coded class="linkbar" (or whatever).

Unfortunately, I don't think you can apply end trim (such as arrowheads at
the left and right) this way. A CSS background image can tile or not, but I
don't think it can stretch, and even if could stretching would distort the
arrowheads.

Jim Buyens
Microsoft MVP
http://www.interlacken.com
Author of:
o--> Microsoft Visual Web Developer 2005 Express Edition: Build a Web Site
Now!
o--> Microsoft Office FrontPage 2003 Inside Out
o--> Microsoft Windows SharePoint Services Inside Out
o--> Faster Smarter Beginning Programming
 
Back
Top