Here’s an interesting site because of the way the top tabs reveal information when clicked upon:
I’m wondering how this sort of thing was done. (I haven’t decided if I like it, actually, but it’s something I’ve not seen before.) I also wonder if it’s something easily done in Freeway Pro.
Not really. More like the Transition FX Action in Slide Down mode on an inline layout. Try it out on a non-inline layout.
Just make an HTML box (in a regular layered layout) and give it a background color. Make a note of the name of the box.
Then draw a graphic box somewhere else on the page, give it a color, and apply Transition FX to it. Check the On Trigger checkbox, then set Effect: Slide Down, Item: (your HTML box) Initially Hidden, and Trigger: click.
Preview, and click the graphic box.
It’s a little more involved to make an inline layout, which will create the exact effect you see on this site, but give it a try.
Transition FX works fine in an inline layout - you will need an html item to trigger the effect. Action throws an error when applying it to an inline graphic item
An inline layout is often referred to as a “box model” in this forum,
but box model has a very specific meaning within HTML/CSS that is
completely orthogonal to an inline (or positioned) layout.
Box model refers to the entire 3D space that an individual element
reserves for itself on the page. Think of it as a combination of
margin, border, padding, and box dimensions in X and Y (except in
certain versions of IE, where it does not include the margin), and the
z-index in the Z. All elements in the same Z-index interact with one
another, and jostle for space. When one grows, the others make room
for it according to rules of behavior (float and clear and display,
along with the box model) that describe the sort of space that object
needs to have.
Walter
On Jun 27, 2010, at 8:29 AM, LauraB wrote:
One follow-up question: When you say “inline layout,” is that a
reference to the box model?
I haven’t tried the Transition FX. Not sure what it is, really, but
I’ll have a look.
Thanks, Walter. Even though I’m still not sure I really like this particular design or display technique, I may tinker with it just to see if it’s something I can master.
No matter what you call it – inline or box model – it’s just one of those things you have to wrestle with until you get it to work, after which it makes plenty sense.
I fought with it for three or four extended days and nights and finally zeroed in on what you have to do, but my main intent was to have a centering inline body and sticky footer, both of which is easily done once the lightbulb pops on.
Walt is an endless resource of information, but you just have to get in there and fidget with it until it works for you.
Even though I’m still not sure I really like this particular design
or display technique, I may tinker with it just to see if it’s
something I can master.
It’s a technique well worth learning - some might say essential - as
it offers lean markup compared to table-based layouts and it
eliminates overlapping issues when using divs in a non-inline layout.
Not the easiest concept to grasp for some people, in part because it
demands more planning and contrary to what some say, it’s not
restrictive, it’s just requires creative thinking and a deeper
understanding of structure and CSS. But once you master it you’ll
wonder how you ever got along without it.
One day I’ll take the time to learn it, master it, and make myself crazed in the process. But I’m not ready to do that yet. I still perceive the process as one that moves Freeway users far from its legendary ease of use, not closer. Maybe in FW6 it’ll be made easier.
I still perceive the process as one that moves Freeway users far from its legendary ease of use, not closer.
That’s only partially true. There is still Freeway’s ease of adding one element inside another with a simple menu selection making the process of building the structure dead simple without any code.
Adding additional CSS styling not available as standard menu options however is not straight forward. For those requirements the Extended option button is your friend. Even then the CSS syntax can be tricky to get right within the dialog boxes of Freeway.
I still perceive the process as one that moves Freeway users far from its legendary ease of use, not closer.
That’s only partially true. There is still Freeway’s ease of adding one element inside another with a simple menu selection making the process of building the structure dead simple without any code.
Adding additional CSS styling not available as standard menu options however is not straight forward. For those requirements the Extended option button is your friend. Even then the CSS syntax can be tricky to get right within the dialog boxes of Freeway.
For the “push down” effect, I used Scripty Accordion for the FAQ page I have on my own site. That seemed to do the trick as well, but I’m grateful for the additional information on Transition FX and how to make use of it.
Some of the tricks I’m learning (well, tricks to me) probably bring me at least modestly closer to understanding the box model mentality and CSS advantages, but full implementation of the box model will remain on my back burner for a while.
Anyway, thanks for the input. You wouldn’t believe how much of this stuff I save in a special folder I have exclusively for expanding my Freeway knowledge.