Makes a bit more sense (still learning and the terminology is sinking in)
When using Protaculous it’s easy enough when using text only but is it possible to use graphic elements as well with text between the tab changes or is it text only between tabs.
You can put anything you like between the headers, as long as it’s inline content. The key to this layout working correctly is to have everything you want to have “tabbed” contained in one tall (and flexible-height) HTML box Then the entire contents of that box are re-jigged to form the tabs. So if you have an image that you want to appear in one of the tabs, you would double-click into the spot where you want it to appear (so you have a flashing text cursor) and then choose Insert / Graphic Item from the main menu. In the 100px box that appears, you would import your picture, then resize and crop the image as desired. You could set that image to float left or right in order to have the other text flow around it, or you could leave it as default where it would completely interrupt the text flow.
Walter
On Feb 13, 2012, at 12:53 AM, Bonsai Bart wrote:
Hi Walt
Makes a bit more sense (still learning and the terminology is sinking in)
When using Protaculous it’s easy enough when using text only but is it possible to use graphic elements as well with text between the tab changes or is it text only between tabs.
Would it be possible do use protaculous for tabs like these Streaming - ZEEBOX obviously without the twitter feeds etc just the tab section with the line at the bottom of the tab the content width
Sure. It’s just a matter of CSS to style the tabs. The basic layout that I put in the aforelinked Gist will do the job as far as functionality.
The style is a bit more complex, though. I had to do a lot of fiddling with the elements drawn in Freeway as well as the script from the Gist, so it’s best if you download the example document here:
Be sure to click on each element, look in the Extended dialog, look at the styles in the Styles palette; nothing is “stock”. All the Protaculous code is in the top Function Body editor.
Walter
On Feb 19, 2012, at 12:04 PM, Bonsai Bart wrote:
Hi Walt
Would it be possible do use protaculous for tabs like these Streaming - ZEEBOX obviously without the twitter feeds etc just the tab section with the line at the bottom of the tab the content width
Just adjust the CSS style that creates the tabs, and give it an explicit width or min-width property. So in the tabStyle attribute, just slip in at the beginning…
min-width: 120px;
and experiment with that property value. Remember, the tabs also have padding set left and right, so the width you set here will be added to that if you’re measuring in Photoshop how much room you have.
Walter
On Feb 23, 2012, at 3:20 PM, OmarKN wrote:
Hi Walter,
Really very impressive!
One minor thought, how to adjust the script if I want a constant width for the tabs?
(easy if images are used, of course).
Aha. You also need to look a couple of lines down, where I have display:inline and change that to display:inline-block. This will cascade further to screw up the positioning of the tabs with respect to the box they’re “attached” to. You’ll need to change this line as well:
var bar = new Element('ul',{style:'list-style-type:none;padding:0 0 4px;margin:-30px 0 0 -9px;'});
to read
var bar = new Element('ul',{style:'list-style-type:none;padding:0 0 4px;margin:-35px 0 0 -9px;'});
to bring them back together. (That’s assuming you were starting from my example document called DaveTabs.)
If you want to center the text in the tabs, also add text-align:center; to your tabStyle string.
Walter
On Feb 24, 2012, at 12:05 PM, OmarKN wrote:
Well, I set the style like this:
var tabStyle = ‘min-width: 76px; background-color:#F7F7EF’;
When creating the 4 or 5 “tab areas or boxes” which are about each 300 to 600 px high, the working space in the FRW document is therefore about 4 * 600 = about 2000px high:
This makes it difficult if not impossible to have other layers further down on the page, because I can’t access the space where to put it, it’s covered by the “tab area or box.”
The best way would be to create an inline layout, where your other elements would be even further down the page, but would collapse to whatever vertical offset was appropriate for the currently-visible tab. The whole point of this exercise is to make your page appear like a really tall page if a visitor has JavaScript disabled, and to collapse into a neat tabbed layout if they have it enabled (most do, but notably, Google does not).
Walter
On Feb 24, 2012, at 4:42 PM, OmarKN wrote:
Got that, thank you!
Now there are only two small things left:
1.) space:
When creating the 4 or 5 “tab areas or boxes” which are about each 300 to 600 px high, the working space in the FRW document is therefore about 4 * 600 = about 2000px high:
This makes it difficult if not impossible to have other layers further down on the page, because I can’t access the space where to put it, it’s covered by the “tab area or box.”
Yes, you can set a size that way, but look down a few more lines where it’s set in ems and either set it there, or erase it where it’s set in ems and set it in pixels where you suggested. I’m working on another example, much less confusingly written. The problem with this example was that I took a sample that sorta worked and kludged it until it worked in one specific document, but I didn’t take the time to abstract out the exact choices that have to be made for it to work everywhere. As a result, there are elements being set in different places, different measurement styles (ems and px and maybe %) and it’s all very confusing to grasp. The actual principle is extremely simple, or should be if I’ve done my job correctly.
Walter
On Feb 25, 2012, at 3:42 AM, OmarKN wrote:
The other problem I’m struggling is the:
2.) h3 size
This size is processed too small, seems to be inherited from somewhere?? (my BODY font-size is 12 px)
In Pageview it’s ok, in Preview too small.
So I changed from h3 to an h2 (16px color), but still the same: the font is equally too small, only the color is ok.