FW5: Horizontal Lists

In my last screen-cast I laid out the way to style a vertical list that had colored rollovers without using the CSS Menu Action. It could then be used, for example, as a link list for a recent entries section within a CMS built site. Although there are several other uses for vertical lists, a horizontal list can serve as a way to present a CSS based navigation that is simple but elegant. Lists are one of the most versatile items found on the web and by understanding the basics of styling them one can achieve some great effects while keeping high on search-ability.

Starting on a simplistic level you can style a list by first targeting "li" or "ul" or "ol" HTML tag elements and then you can style those specific elements using CSS attributes. As we've learned from the previous screen-cast that "ul" (unordered list) or "ol" (ordered list) deals with telling the browser that a list is here and "li" (list item) stands for each item in a list, either ordered or unordered. As we've learned in Freeway 5 Pro, they've made it easy to create a list but your options kind of end there. We've learned how to identify lists by id and class and that they can go either horizontal or vertical directions.

Changing a vertical list into a horizontal list involves merely changing one CSS attribute. When we created a vertical list we set the "display" CSS attribute to a value of "block." This meant that the list item will be displayed as a block-level element, with a line break before and after the element. Meaning it will keep the enter down's we put in there and put the next list item directly underneath it. When it comes to creating a horizontal list we simply change that display attribute to "inline." What this does is put the list items in one straight horizontal line with no line breaks before or after it. Then by simply adding margins and paddings to our "li a" or "li" tags you can then space things out a bit, remove those border styles, and begin styling away.

Instead of doing a screen-cast about this, please watch the vertical list styling video and simply change the "li a" or "li" CSS attribute of "display:block" to "display:inline."

Your list items are important in setting up a professional styled website as well as a way to present items neatly and organized.

*/ On A Side Note /*

I had received word a few days ago that my CMSMadeSimple sample Freeway files were corrupt and/or not working in adding META tags to it. I have since redone and updated the files so if you're having trouble with that it should be fixed now.

Also I am seeking full-time design-based employment opportunities so don't hesitate to view my resume or view my portfolio and see if I can fit into the design needs of your company or agency.

*/ End Of Side Note /*

I'd also like to add that I will be attending a concert tonight featured Cheap Trick, Heart, and Journey. I'm super excited to see these groups and will report how it all went down.

Have a great weekend.