Making Graphic Buttons with a list
Objectives:
- Adhere to Web Standards by:
- Using Semantic HTML, not Presentational markup
- Applying graphic effects with CSS
- Use a list to create a menu employing both HTML text and graphic image text
- Make the entire graphic button box a "hot" link zone
What happened within the grublist.html example?
- Three divisions were invented: a container to hold everything, a grublist to hold the grub menu, and a content area for general contents
- A "container" div was built to enclose a "grublist" and "maincontent"
- The "grublist" and "maincontent" divs were sized to fit side by side in "container", and floated to the left
- The container was centered within the viewport with auto margins on the left and right
- Graphics for the normal and over states of the menu buttons were built in Photoshop
- The ul and li were given styles (descendant from the grublist) to zero out the default margins and padding and the list "type" was set to "none"
- The "a" tag, descendant from the grublist, was:
- Styled with a height and width
- The "a" tag was changed from the default inline display to a block display
- The "a" tag was given a huge negative text indent to send the text off the page
- A class was built for the normal and over state ( :hover) for each menu item, and graphics assigned to these classes
- The menu items were styled with the appropriate classes
- The background image of "maincontent" was positioned a bit, but that is not the focus of this example
The style sheet is built in to the grublist page. Refer to the code to adapt these methods to similar situations. Use the View Source in your browser.