Drupal UL Styles, Part 1: ul.links

13jupiters's picture

One of the challenges that faces any site designer involves using the UL tag to its best advantage. In drupal the challenge is complicated by the frequent appearance of several classes which are pre-styled by drupal.

In drupal 5.x, the following classes are found in modules/system/system.css. The default $links array that appears in nodes uses the "links" class, as do any arrays which pass through the theme('links') function.

Note that the left and right padding applied to <li> can be a source of mystification when you're trying to align $links in a node.

ul.links {
  margin: 0;
  padding: 0;
}
ul.links.inline {
  display: inline;
}
ul.links li {
  display: inline;
  list-style-type: none;
  padding: 0 0.5em;
}
.block ul {
  margin: 0;
  padding: 0 0 0.25em 1em;
}

In the current theme, ul.links appear as follows:

ul.links

ul.links.inline


A Sample Block

Here is a paragraph in the bottom block area.

  • a sample item
  • in an 'item-list' div
  • one of drupal's preferred
  • content wrappers
Valid XHTML 1.0 StrictValid css 2