Continuing our Layout for our Class Web Page
We diverted our attention after we constructed our banner to learn different ways of making navigation elements for a web page. I used Ian Lloyd's accessify.com's "List-O-Omatic" to make some menus for our demo class web page...double click on the image of the page... to look at the source... I made comments where I made some changes to the List-o-matic markup...
The Vertical Menu
I rarely use position absolute to place an item on a page unless I must... In this case, in order for the sub-menus to not interfere with the layout of the rest of the page, the drop down menus, must be on top of all the other items on the page...So I put the menus in a div, named it id ="horizontalmenu" and then positioned it absolutely. How did I center the menus?
Try and puzzle it out... then Look at the source!
The Horizontal Menus
List-o-matic can't make horizontal sub menus, so the submenus are just more list items... (It's possible though). To position the horizontal menus I had to use position relative to move the list down so that the vertical menus didn't cover up the horizontal menu...Adding your main content is next...
I found this very interesting web page that let's you make your own layouts...
It's called YAML Builder, "Yet Another Multicolumn Layout"
Have fun! More soon!
