Making the buttons look like buttons

One of the most useful things you can do with CSS in XWeb is to make the text links in the navigation look like real buttons without creating images for them. All the buttons in this manual are just table cells with text colored in a way that they look nice.

The first thing you can influence is the look of the whole table containing the navigation. The following CSS code will create a blue border around the whole navigation:

  table.navigation {
    border-style:solid; 
    border-color:blue; 
    border-width: 2px, 2px, 2px, 2px;
  }

You can color the buttons for sections and normal entries, too. There are four classes in total, for active and nonactive sections and for active and nonactive entries. An entry is called active whenever it is displayed, a section is called active whenever an entry in it is displayed. This means there is always exactly one active entry and one active section.

This CSS code gives the navigation a blue/green/white coloring for the sections, white text on blue background for the inactive sections, white on green for the active:

  td.navNormalSection {
    color:white; 
    white-space:nowrap; 
    background-color:blue;
    padding:3px; 
    text-align:center; 
    font-weight:bold;
  }
  td.navNormalSection a:link, td.navNormalSection a:visited { 
    color:white; 
    white-space:nowrap; 
    font-weight:bold; 
    text-decoration:none;
  }
  td.navNormalSection a:hover, td.navNormalSection a:active { 
    text-decoration:underline;
  }
  td.navActiveSection { 
    color:white; 
    white-space:nowrap; 
    background-color:green; 
    padding:3px; 
    text-align:center; 
    font-weight:bold;
  }

We stopped the browser from wrapping the text to make sure that the buttons keep a constant height and the links are only visible as such if they have either the mouse or the keyboard focus. It should look like buttons, so we need no special link markup, it would spoil only the looks. A bold font, a centered alignment and some padding (space around the text in the table cell) give some additional touch.

For the entries we do something similar, just with swapping the colors (as in this site):

  td.navNormalEntry { 
    color:blue
    white-space:nowrap; 
    background-color:white; 
    padding:3px; 
    text-align:center;
  }
  td.navNormalEntry a:link, td.navNormalEntry a:visited { 
    color:green; 
    font-weight:bold; 
    text-decoration:none;
  }
  td.navNormalEntry a:hover, td.navNormalEntry a:active { 
    text-decoration:underline;
  }
  td.navActiveEntry { 
    white-space:nowrap; 
    background-color:white;
    font-weight:bold; 
    text-decoration:underline; 
    padding:3px; 
    text-align:center;
  }

One thing to notice is that normal section/entry buttons usually contain links, while active sections/entries have buttons without link in them. If all entries are visible (in nested navigation) all sections will not be linked, so the CSS has to be slightly different since all text-related attributes have to be on the table cells directly, similar to the active buttons.

There can be one of two special cells in the navigation table. The first one appears when the entries are nested in the sections and is behind the last entry of each section. It is empty (more exact: it contains a non-breaking space to avoid problems with Netscape Navigator 4.x) and can be addressed as td.marginInSection to add more spacing or visual effects between the last entry in the open section and the next section button.

Similar there is a special cell for splitting the last section button from the first entry button if the entries are positioned below the sections: td.spacingBehindSections can be used to change the distance between these two or to add special effects.

Note that you can also change the apperance of the cell borders and the font family, font style or font size to produce a look you like for your navigation. If all this should not be enough you probably have to read about rendering images in XWeb, this way you can create graphical buttons, using either a simple to use internal renderer or leveraging the full power of SVG, where you can even use filter effects like different shadows, textures, 3D lighting or glow effects.