Online Programz

The Basics of and Techniques for Horizontal Navigation with HTML List Items and CSS

Inline elements and padding :

“Have you ever tried to add padding toelements that have been set to ‘display: inline’? Did you find that the padding seemed to be rendering in an unusual way? … To understand why this is happening, we need to look at the different ways that block level and inline elements treat properties such as width, height, padding and margins.” For example, the W3C states that the width, height properties do not apply to inline, non-replaced elements, but line-heightdoes apply to the height of the box. Read Russ Weakley’s presentation to understand more of what does and doesn’t apply and how you can achieve the results you need for your inline list navigation or other inline elements. Fabulous presentation that explains things in an easy-to-understand way.

Turning a list into a navigation bar :

  • Fabulous tutorial with easy-to-understand instructions and packed with code samples all along the way explaining how to create a horizontal navigation bar using CSS and HTML unordered list item elements, CSS floats, and much more. Explains all the basics but also adds nice touches such as transforming the text to uppercase, adding a drop shadow using CSS, more. Great tips here.

    • Tags : css-tutorial, the-basics-of-and-techniques-for-horizontal-navigation-with-html-list-items-and-css

    You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    COMMENTS

    No Comments

    There are no comments posted yet. Be the first one!

    Leave a Reply