WARNING - THIS IS REALLY LONG (SORRY) AND THAT WILL MAKE SOME ANGRY. PLEASE DON’T MAKE IT WORSE BY QUOTING IT ALL WHEN REPLYING.
Thanks for the example James – As I suspected you are using javascript rollovers.
Not that there is anything wrong with that… except the javascript called here doesn’t support the ‘active’ pseudo-class, which is what controls the link appearance as it is clicked. The menu you mentioned at Apple.com uses this image (http://images.apple.com/global/nav/images/globalnavbg.gif) and CSS methods to do its thing. So I redid the menu using CSS… Here is the example:
http://www.thebigerns.com/freeway/workbench/fw5_jryan-menu/
Pardon me if I am enamored with my own sense of style, but the functionality should be the same 
When I started dissecting your page, I noticed some things I felt would become problematic - namely the overabundance of graphic text. But we’ll get to that later.
Making a Real Text CSS menu is easier with FW5 – type a list of items, select, then go to the List pane of the Inspector and indent once. Choose ‘round bullets’ and a new style is created for you in the Style Menu. Edit the new style and give it a better name than ‘style 1’ (I named mine ‘menu’.
A list contains two parts - the list container and the list items (text) inside it. Styling the .menu style affects some of both because the individual list items inherit some attributes from the list container. Setting the Character attributes of Font, Style and Size affect the list item text. The Background Color sets that attribute for the list container. Paragraph Alignment affect list item text while Indents and Space Above/Below affect only the list container. Using the Extended style button we enter some custom code to remove the bullets (without changing the list structure) and add some padding which we’ll use later when we apply links to the list item text.
To affect only the list items themselves, you must create a new, very specifically named style – ul.menu li – see how I named it in my example as it can be tricky. This type of name is CSS shorthand for "apply only to List Items (li) found in Unordered Lists (ul) that also have the class of Menu (.menu). Rather technical, but every modern browser can figure it out in less than a heartbeat. Now, since I want a horizontal menu I can use the Extended attribute ‘display:inline’ to make the list items follow each other horizontally – along with a little left margin space between them to give them room from each other.
In the last version of Freeway Pro, you would have had to written more specially named custom CSS styles to set the link states for this menu, probably hand coding them in the document markup due to the way Freeway orders the style sheet. However, in version 5 you have a much improved Links pane in the Inspector to help you.
Selecting the div/box the menu is in, set the colors for the individual link states. This will create custom link styles for that box only. Cool. I admit it took me some trial and error to work out the link-underline buttons, but most folk can probably figure it out before the kettle boils. Clicking the More button in the Links pane brings up a sort of mini-styles window, just for the link states. And, an extended style button for fussy tweakers like me Using this improved Link pane not only lets you target which links are affected, but also makes Freeway write the link code in its proper order. Because the Link state is the first in the normal order and governs normal link appearance, I didn’t need to add extended attributes to the other link states as the Link attributes are inherited down the line until purposely contradicted. The extended padding give a little more area to each link so that users can have a larger target area to click instead of just the text itself.
That finishes the main topic – here are two other simple CSS goodies to boot.
As I mentioned earlier, the page suffers from a total lack of real text. This means that people who need machines to read the page will see nothing. Search engines and web programs that can help steer users to the page cannot see the content either. And the user who wants to copy some helpful verse or homily to send to a friend or relative will only be able to grab an image, which become an attachment that is filtered by the spam blocker of the intended. Of course the easiest way to solve that problem is to use actual text whenever possible. Easy?
I’m willing to accept there is a severely limited number of available webfonts, but even I can agree that sometimes graphic fonts just look better… especially in a headline. But if I use a graphic headline, the semantic usefulness of the headline tag is lost. So in this example, I relied on an a variation of an image replacement technique known as Phark. Image Replacement is supposed to replace text with an image… but in this case I put the image in the header image, and the text in a separate box. The text is given a giant negative left-margin value to remove it from sight. This lets me use the fancy headlines, keep my semantic structure and allow anything not viewing the page visually “understand” the context of the content. Yay!
The second goodie is the left column - the one for verses. It’s basically a colored box, but as content is added or enlarged in the main box, the verse box will lengthen or shorten to match. Both boxes are vertically flexible, but the verses box is a child of the main box. The overflow of the main box is set to hidden. The verses box has an enormous amount of padding on the bottom with an equally enormous negative margin as well. The footer is also a child box of the main box, placed 0px from its bottom. These are techniques I’ve used quite often, but usually as inline div items. With FW5, I can simply place them as children. This I like.
DO NOT QUOTE ALL THIS WHEN REPLYING, PLEASE.
On Mon, May 5, 2008 at 2:35 PM, James L. Ryan wrote:
Here is what I am doing…
–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/
