HTML horizontal list without bullets
Tutorial 4 - Horizontal lists - all steps combinedThere are many methods that can be used to making a horizontal list. The main ingredient is "display: inline", applied to the "LI" element. Show
#navcontainer ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: inline; } #navcontainer ul li a #navcontainer ul li a:hover HTML CODE
Step 1 - Make a basic listStart with a basic unordered list. The list items are all active (wrapped in ) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link. Step 2 - Remove the bulletsTo remove the HTML list bullets, set the "list-style-type" to "none". Step 3 - Remove padding and marginsStandard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation. To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL". #navcontainer ul{ margin: 0; padding: 0; list-style-type: none; } Step 4 - Display inlineTo force the list into one line, apply "display: inline;" to the "LI". CSS CODE#navcontainer ul { margin: 0; padding: 0; list-style-type: none; } #navcontainer ul li { display: inline; } Step 5 - Removing text decorationAt this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link. #navcontainer ul{ margin: 0; padding: 0; list-style-type: none; } #navcontainer ul li { display: inline; } Step 6 - Padding around list itemsTo make each list item into a box, we need to add padding to the "a" element. { margin: 0; padding: 0; list-style-type: none; } #navcontainer ul li { display: inline; } #navcontainer ul li a Step 7 - Adding background colorAt this point a background color and border can be applied. There are many combinations of border and background colors that can be used. #navcontainer ul{ margin: 0; padding: 0; list-style-type: none; } #navcontainer ul li { display: inline; } #navcontainer ul li a Step 8 - Add a rollover colorUse "a:hover" to set a second background color, as a rollover. Roll over the list now you will see how it works. #navcontainer ul{ margin: 0; padding: 0; list-style-type: none; } #navcontainer ul li { display: inline; } #navcontainer ul li a #navcontainer ul li a:hover Step 9 - Center the list#navcontainer ul{ margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: inline; } #navcontainer ul li a #navcontainer ul li a:hover Finished!« Back to main menu Other Max Design articles and presentationsAssociated with webstandardsgroup.org |