Skip to main content

Replace a FrontPage Link Bar with CSS

In FrontPage, the Link Bars web component (webbot) provides an easy and centralized way to maintain your website’s navigation menus without having to modify the navigation menus on each and every page of the website.  But the options for customizing the appearance of a link bar are quite limited compared to the options provided by cascading style sheets (CSS). In addition, Link Bars require FrontPage Server Extensions which fewer and fewer web hosts are supporting and which Microsoft will eventually stop supporting altogether. So now is a good time to learn some new modern techniques.

In this article, we’ll show you how to design the CSS-based navigation menu in the following screenshot as well as a horizontal version of the same menu.

Create a bulleted list of links

Although you can use paragraph breaks or line breaks between links to create a vertical list of links, or links separated by pipe characters ( | ) to create a horizontal list, a bulleted list format  that is styled with CSS is the semantic and standards-friendly way to create modern website navigation. And it’s much easier than you may think, especially using the method I’ll show you now using Expression Web.

  1. Open your existing website. To create a new HTML page, on the File menu, point to New, and click HTML.
  2. Put your cursor in the Design view of your page, and then click the Bullets button  in the Common toolbar to start your bulleted list of links.
  3. Type the label for your first link. For example, I typed Home for mine.
  4. Press Enter, and type the label for your next link. Repeat this step until you’ve entered all of the links for your navigation menu.  Now you should have a pretty boring bulleted list of words. We’ll fix the boring aspect later with CSS, but first we need to add some links.

  5. Select the text next to one of the bullets in your list, (Home, for example) and then click the Insert Hyperlink button in the Common toolbar. In the Insert Hyperlink dialog box, select the web page you want to link to, and click OK.
  6. Repeat this step for each of the items in your bulleted list. Now your boring list of words is hyperlinked, but still boring, so it’s time to apply some CSS magic to the list and give it a style all your own.

Format your link bar with CSS

Our first task is to hide the bullets that appear next to each item in our list.

  1. Click inside one of your text links, and then click the <ul> element in the Quick Tag Selector bar along the top of the page to select the entire bulleted list.

  2. On the Format menu, click New Style.

  3. The New Style dialog box appears.

  4. In the Selector box, type a period (.) followed by a name for your style; for example, .linkbar.
  5. In the Define in box, if you don’t have a .css file, select New style sheet; otherwise, select Existing style sheet and set the URL box to the path to your .css file.
  6. Under Category, click Box. Make sure "Same for all" is selected for both padding and margin. Under padding, next to top, set the value to 0px, and repeat for the margin top value.

  7. Under Category, click List. In the List-style-type list, click none.

  8. Click OK to create the style.
  9. Click Yes in the dialog box that asks “Do you want to attach the style sheet for the new style?”, which automatically attaches the new style sheet to your open page.
  10. In the Quick Tag Selector bar, click the <ul> tag again to select the entire list.
  11. In the Apply Styles task pane, click the .linkbar style to apply the style to the selected list.

    You’ll notice that the bullets are gone and the list is flush with the left margin.

  12. Save your page and .css file to your web site.

Next you’ll apply additional formatting to create the button look and feel.

Adding some color to your links

This set of steps defines the style for the links in their normal state.

  1. On the Format menu, click New Style.
  2. In the Selector box, type .linkbar a:link, where “.linkbar” is the name you gave your new style in the previous section.
  3. Under Category, click Font. And then set the following properties to the specified values:
    • font-family: Verdana
    • font-size to 1em
    • font-weight to bold
    • color: #008080 (teal)
    • text-decoration: None
  4. Click the Apply button to see your changes in your web page without leaving the dialog box, which you’ll continue editing in the next steps.

Adding the button look

Next we’ll make the links look more like buttons by adding a background color and border, and other properties to make the buttons all the same size.

  1. Under Category, click Block. Set text-align to left.
  2. Under Category, click Background. In the background-color box, type #c2c2c2.
  3. Under Category, click Border, and set the following properties.
    • Clear all three "Same for all" checkboxes
    • Under border-style, set left to solid
    • Under border-width, set left to 10px
    • Under border-color, set left to #666798

    The Preview box in the Modify Style dialog box shows you how your style looks as you set properties.

  4. To create some room between the text and the box that contains it, we’ll add some padding. Under Category, click Box. Under padding, set the following:
    • Clear the "Same for all" checkbox
    • top: 2px
    • bottom: 2px
    • left : 10px
  5. Under Category, click Position, and then set the following properties:
    • Width: 120px
    • Height: 15px
  6. Under Category, click Layout. Set Display to Block. Click Apply to see your changes in your page. If the appearance of your link matches the link bar in the following screenshot, then click OK.

Setting the link styles

You’ll notice that the links are starting to look more like buttons. Now you’ll apply additional formatting to define the style for the links in their active and hover states.

  1. On the Format menu, click New Style.
  2. In the Selector box, type .linkbar a:active, .linkbar a:hover . (If you named your style something other than “linkbar”, then replace “linkbar” with the name you chose earlier.)
  3. Make sure Define in is set to "Existing style sheet" and the URL is a path to the .css file in your website.
  4. Under Category, click Background. In the Background-color box, type #9ec9d1. Click OK.
  5. Save your page and the .css file, and then preview your page in the browser. When you put your cursor over the buttons, the background color should change.

Create a horizontal link bar

If you followed all of the previous steps you should have a nice vertical CSS-based link bar. To make the link bar horizontal, use the following steps.

  1. On the Format menu, click New Style.
  2. In the Selector box, type .linkbar li . (If you named your style something other than “linkbar”, then replace “linkbar” with the name you chose earlier.)
  3. Under Category, click Layout, and set float to left, and click OK.

  4. Save your page and .css file, and then preview your page in the browser.