Listbox table layout specification

Text listbox

The text list box interface block is used for showing lists of data. In the admin user interface, this could be lists of users or images and in the front end, it is lists of purchases in the user account homepage. This interface type will be used more often as planned new features are added to the software. Using the listbox gives you a cleanly formatted and customisable layout that can be tweaked with inline styles for additional flexibility.

Text listbox layout

The diagram above shows the layout and HTML code for a listbox view. As with the form table interface block, the rows in this table view have alternating class attributes catered for by a Smarty tag in the class attribute value.

Text listbox CSS

/*  Styles for list views  */

.table-listbox
    {
    border-collapse:collapse;
    border: solid 1px #CCC;
    color:#444;
    width:100%;
    text-align:left;
    padding:0px;
    border-spacing:0px;
    margin-bottom:20px;
    }

.table-listbox th
    {
    font-size:9pt;
    padding:0px 0px 0px 3px;
    text-align:left;
    height:20px;
    font-weight:bold;
    background-image:url('<%$base_url%>resources/images/listbox_title.gif');
    }

.table-listbox td
    {
    vertical-align:middle;
    text-align:left;
    padding:0px 0px 0px 3px;
    line-height:20px;
    padding-left:2px;
    padding-right:2px;
    text-decoration:none;
    }

.table-listbox td a
    {
    text-decoration:none;
    }

.table-listbox td a:hover
    {
    text-decoration:none;
    }

Further reading

1. HTML and CSS specifications
2. Text table layout specification
3. Form table layout specification

Go back to contents

Created: Monday, September 11, 2006
Last edited: Monday, September 11, 2006