First, make a menu. I still think unordered list menus are appropriate and within the grasp of most Freeway users to make. For more on CSS List Menus visit the Listamatic website, or see my previous discussions here, and here.  Here too.

Once you have an unordered list of links, use the CSS editor to set padding around them, especially to the left side. Next we'll use Photoshop to make and animate the image of a flashing bullet. If you don't have Photoshop, or have some different graphic program, then you'll have to translate this part.

In Photoshop create a new image 30px tall by 500px wide — I wasn't trying to be precise or anything, just looking to give myself enough room. There's likely a mathmatical way to be more efficient with the size, so don't feel constrained by my measurements.

Usethe type tool to create a "bullet" symbol (option-8 for me) size and color it, then place it at the left side of the image centered vertically. Then duplicate its layer (command–j for me) and drag it over to the right side of the image and change its color.

Next bring up Photoshop's Animation palette (older Photoshop users need the separate ImageReady application) and duplicate the frame. In the second frame I then click off the visibility of the second bullet, so when I preview the animation the first bullet appears static while the second one flashes on and off. Then Save for Web as a gif file.

In Freeway, edit the link style for your menu (ul.navmenu li a in mine) and add the gif as a background image with no repeat. Then add the background-position attribute through the Extended window to define its position behind the link (see now why I made it so wide?).

By altering the background-position attribute between the a and hover states, I can shift from the "static" part of the image to the "flashing" part. It's not as smooth as the flash menu (sometimes the flashing seems to hang up on me). But it's easy and looks cool.

Walter's first suggestion was to modify the link anchor tag of the current page through the Extended interface of the Hyperlink Dialog box. Adding a class or id selector there coupled with a style to target it is really an easy recipe to create a different look for that link. I don't mind the extra work of selecting the current link on each page and adding the selector. But some folks wanted a way around that, so Walter came up with a different idea.

Basically he suggested adding an id selector to the page's body tag, then setting the links up with class selectors that respond to each unique body tag. If you're setting up your menu on your master page, or copying and pasting it from page to page, the upkeep is actually minimal.

Here's a link to my sample page. Download is included.

First, draw a layered box the width you want your menu to be, then type in each location for the menu on its own line.

I like my menus to be made from lists because I think lists maintain a meaningful structure in the absence of styling. For me, this means the content is preserved in worst case scenarios. So, to make the list structure, create a New Style from the cog in the Styles Palette and name it menulist.

In the Paragraph attributes set the List style to Round Bullets. We don't really want bullets, but we do want Freeway to to set this style as an unordered list. To get rid of the bullets, we will over-ride it with an Extended attribute, so click the Extended button and create the attribute list-style-type with a value of none. While we're there, let's add two more extended attributes, margin-left and padding-left, both with values of zero.

Before we're finished with this style, let's set our basic type style for our menu. Font, size, and color are all allowable for this style. Now go back to the page and apply the style to the menu text. Freeway still shows bullets in the work view, but won't appear in preview or your browser.

Next, create your hyperlinks for each item in the list. The default link style is ugly blue with underlines — to change it we will need to target just the items in our list with Tag styles to cover the Link and Hover states.

Browsers use the names of styles to target or select the items they apply to. Our earlier style for the menu is a "class" style because it uses a user-selectable name to define a class of objects or spans of text that we then single out to be affected. Styles can also select their targets by their structural tags, alleviating the need for us to identify the object or texts they apply to. Ordinary paragraph <p> and header <h1> styles are examples of what I call "tag" styles.

Create a new style from the Styles Inspector cog. To make it a Tag style for the Link state of our menu items, we would put the name for it in the Tag field of the New Style window, so put ul.menulist li a into the Tag field – spaces and all. This is the same as saying "this style affects hyperlinks in list items that belong only to unordered lists with the class style 'menulist'".

Set the Character Color attribute to White… this of course changes the link's ugly blue color back to the white we originally set for our menu's list items. To get rid of the underline we need to click the Extended button and create the attribute text-decoration with a value of none.

Now create another new style, this time for the Hover state of our menu links. In the Tag field, name it ul.menulist li a:hover — which still targets only the list item links in our specific menu list — but now only when the mouse pointer is hovering over them. In other words, a rollover.

This time we're interested in setting the Character Background Color attribute so that when the mouse pointer is over our menu link, the background color behind the type changes to highlight the link. Unless we want the type Color to also change, we don't need to re-apply it because it is an inherited attribute. The same goes for the text-decoration attribute.

Now preview the page. You'll notice that our menu looks pretty normal except for two things: the type is flush against the left side of the window, and when we put the mouse cursor over any of our menu links the background color is just barely visible. Let's fix that.

Choose Edit Styles from the Style Inspector cog and select our menu link state style ul.menulist li a. To make the background extend across the width of box we drew, click the Extended button and create the attribute display with a value of block. To get the background to extend slightly above and below our link, we will "pad" the area around the link a bit.

To do this, create another extended attribute for this style and name it padding. The shortcut way to define padding is to do it all at once, describing values for the top, right, bottom, and left sides in clockwork fashion. So a value of 3px 0 4px 20px will expand the space above our menu links 3px and below them by 4px. The display:block attribute takes care of our horizontal space so those measurements can be set to zero, except for the left setting which has the effect of moving our link type over 20px while keeping our rollover effect. You can alternately move the type over by moving the left edge of the menu box over, but remember the background-color would also move over.

There you have it, a simple but stylish menu using only CSS.

First we set up the basic structure – a layered div/box with some text in it. Next we insert an image into the flow of text at whatever vertical level we want the final image to reside at, then size it and set the alignment to float left. Finally we give it a little margin on the top, right, and bottom edges so the text will flow around it.

To make the image seem to overlap the box of text we need to apply a negative left margin. Since Freeway won’t let us do that the 'normal' way (via the Inspector) then we will try applying it as a class style. We can’t do that “normally” either as Freeway won’t let us apply a class style to images. *Sigh*

So to move things along we select our inline image and choose the menu »Item »Extended… and add the class attribute in the <img> pane there.

Now go to the Edit Style window and create the style for the class declaration we just added to the image. Enter img.minus94 in the tag field (minus94 being the name of the class we added to the <img> tag) and create the margin-left attribute with an appropriate negative number.

This should be sufficient to achieve our intended results in pretty much every modern browser, but once again Internet Explorer needs some coercing. Fortunately the fix is simple: create a position:relative attribute for our image class style… because the image is floated, all IE needs is to be reminded how to treat parent-child items with special needs.

Here is an actual example.

One of the few comments I've had so far indicated that my images and background colors weren’t blending well. Of course, things look fine on my monitors, so I went to browsershots.org to get an idea how things looked in other browsers and platforms. The result, here, still looks great to me.

So, how can I be sure everything is looking as it should? That’s where you come in – if you have some extra time, take a look at the SOS page(s) and let me know what you think. I really want to see if I’m capable of turning out a decent template. (Hint: more templates could follow).

First, we define the body element with the attribute text-align and a value of center. This is the hack, and will center all our text, and the page along with it. One way to do this is to create a new tag style – named body in the Tag field of the Edit Styles window. When you’ve done that, select the Align attribute from the Paragraph section and choose the centered button.

Sometimes Freeway doesn’t seem inclined to follow through when the only attribute of a style is the Align attribute. One way to trick Freeway into publishing a style it thinks isn’t really needed is to duplicate that attribute in the Extended style portion of the Edit Style window.

Press the Extended button to open the extended attributes for this style. Create a new attribute with the name text-align and give it a value of center. This mirrors what we have already done through the main Edit window. Since Freeway cannot know what we have added here, it cannot decide if the style is needed or not and should publish it for sure.

This will now fool IE 5.5 into centering the page in the browser window. However, all our non-aligned text is now centered too. We need a fix to counter the hack.

We could go item by item and create new styles to re-align our text, but there is an easier way to put it all back to rights. On a Freeway page, all text is placed in containers of one sort or another. Whether your page is layered (divs) or not (tables), Freeway 4 writes at least one div element to enclose the whole page (PageDiv). So instead of writing styles for every text element, we can just target that div with a style that should re-align our text to left. Granted it will also target every other div on the page, but that first one is what will really count. We can do it like this:

Just like we did for the hack, now create a new tag style named div in the Tag field and set its paragraph alignment to left. Mirror this in the Extended attributes like we did previously. The successful result of this is all non-aligned text should align left, which is the normal state of things. Any other text that we have aligned differently should not be affected.

Another Approach…

After describing this method in some detail, I should let you know there is a shorter, easier way to do accomplish this same thing. But don’t get upset — if I had told it to you about it straight away then you’d have had no fun in learning why it works.

Instead of writing these new styles into the common stylesheet when we only need to apply them to people using IE5.x, what I like to do is to wrap them in a conditional comment, like so:

<!-->
<style type="text/css">
body { text-align: center; }
div { text-align: left; }
</style>
<!--> 

Conditional Comments are a way of distinguishing between versions of Internet Explorer — as far as I know, conditional comments only work with Internet Explorer. By inserting this conditional comment into the Before /HEAD section of the menu Page » HTML Markup… we are adding the styles defined within only to versions of IE less than (lt) 6 — essentially 5.5 and below. Version 6 and 7 shall ignore it altogether.

I also usually add a slightly smaller base font-size attribute to the body style, as IE 5.x seems to me to make fonts much larger than necessary.

Centering within Elements

If your page is not centered, but you have used the margin:auto setting to center an item within another item, the same principle applies, only in a different way.

Instead of applying the hack to the body of the page, you must apply it to the containing element of the auto centered item. If the containing item is a div/box then select it and open the menu Item » Extended… Choose the <DIV Style> pane and create the attribute text-align with a value of center. Then go to the item being centered and apply a paragraph alignment value of left. How that is done will depend on the kind of item it is. If it is another div, then use the same extended method only applying a value of left.

Finding the proper containing element is sometimes a challenge. In the case of margin:auto centered items on width-flexible pages, I would create a style that targeted the div tag with the text-align:center setting, then create a tag style for the text-align:left correction and name it div div. Yes, that’s div followed by a space followed by another div. What this method does is correctly target the invisible Freeway-generated PageDiv for the hack, and then all of it’s descendant divs with the correction.

There have been a few recent Freewaytalk threads discussing how to create a ‘tabbed’ info area on a single page. The ongoing discussion has been very interesting, and master actioneer Paul Dunning was even able to produce an action for it.

I’ve been tinkering for a while now with a CSS method to get this type of functionality. Here is an example that I made… It is only one page — no frames or any trickery like that — and was built entirely using Freeway 4 Pro.

For this piece, the ‘tabs’ are an unordered list of links —using similar CSS for styling horizontal menus to create a simple tabbed look. Depending on how much time and effort are involved, you can make these tabs look as fancy as you like. That's because CSS is all about appearance.

The functionality is provided by a member of a special group of CSS modifiers known as Pseudo Classes. The most well known pseudo class modifiers are the Anchor modifiers -- :hover, :active, :link, and :visited. The pseudo class modifier used in my example is the :target pseudo class.

Perhaps you noticed that my initial link ended with an anchor identifier. The trickery that I am attempting is not to take you to a location on the page, but to use that identifier to trigger the visibility of a div that is hidden until triggered.

Caveats

My example uses an inline div structure to handle the appearing and disappearing of content. I’m not sure this structure is necessary, but it is what I am most familiar with when it comes to flexible content.

I have no working solution for displaying the current tab at this time.

It tests well in Mac Safari and Firefox —but I’m not sure what the WinIE functionality is like. If IE supports this particular pseudo class, then I imagine some hacking may still be necessary.

At first blush it turns out that no version of Internet Explorer can access the hidden elements because :target is a CSS3 specification. Not even the newest version is able to use it. Damn my eyes! Just when I’m thinking that I am ahead of the curve, it turns out that I’m just using the wrong browser. And by ‘wrong browser’, I mean the ‘right browser’. *Sigh*

Apperently Netscape 7 honors the target selector… Here’s a 2003 article by Eric Meyer explaining and illustrating the selector. If Netscape has been on top of this since 2003, then maybe other Mozilla based browsers will be too. Win Firefox anyone?

HTML Dog has a Suckerfish javascript emulation of :target for IE browsers… and I thought I was trying to use CSS to get away from having to use javascript to do this?

Now that I think of it, IE doesn’t even support the :hover pseudo class, does it? We will have all evolved to use telepathy by the time Microsoft gets with the program... Jeesh!

1. Page Zooming
2. Link Icons
3. Sortable Tables
4. CSS Vertical List Navigation
5. Styling Lists
6. Styling Links (Text Link to New Window Action)
7. CSS Horizontal List Navigation
8. Dynamic Image Sizing
9. BWD Flexible Round Corners
10. Flexible Tables
11. Bottom-Aligned Footer
12. M&M Candy Colors
13. Flexible Layout Proof-of-Concept
14. Vertical Flexibility Demonstration
15. My Basic Styles and Colors
16. 20,000 Pixels Wide
17. Scroll Box Workaround
18. Another Flexible Width Demonstration
19. Simple Fake Page
20. Simple Fake Page 2
21. Table-less Stretchable Fake Page
22. 3-Column Flexible Layout
23. Tables Elements and the :hover Pseudo Class
24. Thickbox Gallery Test

I'm trying some new things, so drop by often to check me out. For example, I am experimenting with moving the Freeway inline div styles to a second external stylesheet — a strategy that I first outlined in a posting on the Freewaytalk forum. And I'm even experimenting with an RSS Feed.

Older articles can be accessed here while things are being updated.

Comments are moderated, so expect a short delay before they post. If you want to get in touch with me, try the Contact link.