Skip to main content link. Accesskey S

Banner

The banner sits at the very top of the UI and contains application links, utility links (help, log in) and the application logo.

Directionality:

Classes

  • lotusBanner - the class that goes on the outermost containing div.
  • lotusRightCorner - the class that goes on the next outermost containing div (for additional styling options).
  • lotusInner - the class that goes on the innermost containing div (for additional styling options).
  • lotusInlinelist - general class used for making the lists horizontal that is used for the two sets of links in the banner.
  • lotusUtility - an additional class that goes on the list of utilities (user name, log in, help).
  • lotusLinks - an additional class that goes on the list of application links.
  • lotusNavMenu - a class assigned to a div that wraps a list of navigation links - which shows up as a drop-down menu

Basic Implementation

The banner is created using three nested divs for additional styling options for customer customization. The three classes used are described above.

The banner includes a logo which should be created with no extra pixels on the edges so it will align properly horizontally and vertically.

A list with the class of lotusInlinelist and lotusUtility appears next in the banner, followed by a list with a class of lotusInlinelist and lotusLinks.

See the interactive.htm example page for the drop-down navigation menus code.

IMPORTANT CODING NOTE: Firefox has rendering issue when there are return characters within the inline list html, so code the application links and utility lnks as one string with no carriage returns.

Examples

Sample HTML

CSS (banner.css)

Theme CSS (bannerTheme.css)

This component started off being styled by using lotusBanner as an id. This is obsolete. Assign lotusBanner as a class.

There are 3 wrapping divs to support a look of rounded corners, which originated with Connections R1 and other products.

6/17/09: moved lotus product logo to a background image and added lotusAltText for high contrast mode.

4/22/09: created drop-down navigation menus (seen on interactive.htm page)

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.