Aosoft - HTML and CSS Information and Examples

Technical Support

Toll: 888.289.1124
Intl:01.941.894.6426
Submit Support Request

Support Tools

HSphere Tutorials
HSphere Guide
Plesk Guide
WebLog
Web Tools
Network Status

How to build a menu list without tables

We were recently asked by another designer how they might go about creating a menu list of products without using tables. This can ba a tricky task as browsers do not render certain attributes of div tags the same. Here is the way it looks and the code to produce it.

Product 1

$50

Product two

$80

Product 3

$37

Product Four

$95 and up

The StyleSheets:
DIV.parent {width:auto; padding:5px; color:#333333; text-align:left;}
DIV.div1test {width:350px; float:left; margin-right:5px; background-color:#cccc33; text-align:left;}
DIV.div2test {text-align:left;}

The HTML Code:
For each menu line item do the following:

<div class="parent">
<div class="div1test">
Product Name
</div;>
<div class="div2test">
Price
</div>
</div>

Serving Your Internet Presence

Technical Support

Support Tools

How to build a menu list without tables