I’m seeing this done more an more on sites. But how is this done in Freeway using styles, and creating a rollover color/background image?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
There’s at least two things you might mean by this question. Do you want to make a DIV change appearance when you mouse over it? Or do you want to make a DIV that acts like a link, such that if you click anywhere on it, it will take you somewhere?
I can tell you more once I understand what you’re after.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Is this two different thing? as in you can’t have both?
e.g. Look at the site Ernie is working on…
Looking closer, indeed, the surrounding div changes on mouseover, but the actual text within is the link but changes as well as the (it sort of gives the appearance on both being linked)
I notice in Ernie’s site, the div and text changes even when the div is moused over, but only the ext in the link.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK how about making a div change appearance when you mouse over
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It depends on the content in your DIV. If the only content in the entire DIV is your link, then yes, you can do this pretty easily. The trick is that the “box” that you see as the DIV is really two things.
The width of the box is held by the DIV’s styling, and the height is actually held by the A tag inside it. The A tag is styled with display:block, which gives it shape and dimension, rather than being something that collapses around its contents (the text inside the link).
Here’s a simple example:
<div style="width:200px; padding:0; border:1px solid #ccc">
<a href="#" style="display:block; padding: 4px 8px">A Link</a>
</div>
So now you should see a rectangle with your link text inside it. The link is as wide as the DIV, so anywhere you roll over it – even outside the text – it will become active and show you the pointer cursor. Now to add color to the mix (put this part in the HEAD of the page):
<style type="text/css">
a { background-color: #ffc }
a:hover { background-color: #ff9 }
</style>
Now the rectangle should have a pale yellow background, and when you mouse over it, it should darken.
To do all this in Freeway, you want to set up some styles for your special links, and that will take some care, because of the way that Freeway names things and doesn’t give them classnames without a lot of work.
In the Styles palette, make a new style. In the Tag field, enter ‘.block a’ (without the quotes) and delete whatever is in the Name field. Be sure to tab out of that field so that it “sticks” as being empty.
Use the Character picker to choose your background color for the normal state. Use the Extended dialog to add settings for display:block and your desired padding.
Now repeat this process, making a new style with the Tag ‘.block a:hover’. In this style, simply enter the background color. Everything else will be inherited from the .block a tag.
Now you don’t actually apply these styles to anything, they get published to the head of the page anyway because they are Tag-only styles.
In order to apply them, you need to use the Item > Extended dialog to give your DIVs the classname ‘block’.
Click on a DIV where you want this effect. Apply the Remove Paragraph Action ( http://freewayactions.com – in the Beta Box) to the DIV, and make sure that your link does not have any styling applied to it – it needs to be bare text with a link and no styling. Then choose Item > Extended from the main menu. Click New, then enter ‘class’ and ‘block’ in the Name and Value fields (again, without any quotes).
Repeat this process for each DIV where you want the effect. You will not see anything useful in the Design view, but if you hit Preview, you should see your desired effect. To further style the text in these links, open the .block a style and fool with it there.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
wow, longer soloution than I thought. I shall give it a go. thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Got nearly there but not quite.
styles at the top include:
.block a { background-color:#ff0 }
.block a:hover { background-color:#f00 }
and the div has…
<div id="item1" class="block" style="position:absolute; left:62px; top:97px; width:200px; z-index:1; border:solid #000 1px; overflow:visible">
<a href="#">A Link</a>
</div>
But the rollover and background colors only appear where the text is, not like your example applied to the whole div.
This does not have “display:block” to a href, as your example. Should it? Any Ideas?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes. Add that to the .block a tag and you should be good. You will need to do this in Extended in the Edit Style dialog.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Added
display:block
to
.block a
Now it works.
What happens if I need a second line of text, in a differing font size but in the same link?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok to create a second line keeping the rollover, I give it a < br > shift-return.
And to change the style on the second line, put in a HTML markup with for example
<span style="font-size:80%">
Some text for the second line closing with another HTML markup
</span>
I that the correct way to do a second line?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You may be able to get away with using a regular inline style for this. As long as you don’t select all of the text in the div, you can just style some text using the Inspector or a non-paragraph style.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Whoa whoa whoa… which site is this? 
If you are talking about the top navigation bar at wirzco.com, then I
am embarrassed to say that you’ve caught me with my shorts hanging
out. It’s a poor piece of sloppy workmanship that was fashioned under
the tightest of time constraints with the understanding that it would
only be temporary… The idea was to go back and fix it proper once
all the millions of other things wrong with the site had been
sufficiently tinkered. But there it is, in full public view… I feel
like a vegetarian who has been caught happily eating veal. What a sad
day.
The menu itself is a simple set of four inline (or in-flow) div boxes.
This was done as a convenience to keep the lines of each menu item
together. Rightfully, links are applied to text items and as Walt
properly points out padding is added to the link style to increase the
area around it. Shrinking the div to fit on this padded area, it seems
as if the div is responding to the hover when it is actually the text
and its padding that reacts.
Or that’s the way it would have worked if I hadn’t sold my soul for a shortcut.
Something went wrong with the padding early on (I can’t even remember
what) so I gave the divs some padding to position the link text,
consequently leaving some space in each visible box un-affected by the
link’s padded hover state. So to cover my crime, I gave the each box
the same hover values as the link text so its appearance would seem
flawless. However, the small visual difference between the parts that
look link links and the parts that actually are links reveals the
fraud being perpetrated, to my chagrin.
By giving each div an empty class style .nbg { background-image:none }
I could then target them by class with div.nbg:hover {
background-color:#c0dbe9 }
On Sat, Jun 7, 2008 at 6:14 AM, WebWorker wrote:
e.g. Look at the site Ernie is working on…>
–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That would explain the slight difference to how I saw the wirzco links compared to how Walt example functioned.
Can you do the same thing with table cells? (rollover backgrounds - but text links inside the cell)
On 7 Jun 2008, 11:40 pm, The Big Erns wrote:
However, the small visual difference between the parts that look link links and the parts that actually are links reveals the fraud being perpetrated, to my chagrin.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Short answer: Yes, you can change a table cell background using the
hover pseudo class. Here is now a very old article on this subject
from my fansite:
http://www.thebigerns.com/freeway/tablehover/
Long answer: How the structural elements of a page are identified is
as important as how they are decorated. For example, I’ve used CSS to
decorate my wirzco.com “menu” to look like a menu. Every visitor that
relies on visual cues will assume that is a navigation menu. If my
visitor cannot access the CSS styling code which make it look like a
menu then they won’t have any other way of knowing those items belong
together or have a functional relationship. This is especially true of
search engines and other web “bots” that gather and collate my page
content.
If my “menu” had at least a structural element tying those links
together, then it would make more “sense” to the world at large and
not just some of it. This has also been the argument against using
tables for layout purposes. Tables are meant to contain certain types
of information that by their structure suggest an interior
relationship to the content of the page. Used for layout they diminish
actual table data and wreak a structure that preserves the visual
order over the semantic one.
Then there is the subject of working with users, not against them.
Setting the behaviour of the link by increasing its padding
exaggerates the visual cue that “this is a link” and clearly
identifies where the activation area is. By setting the hover state on
a table cell (or a div) you aren’t actually creating a link, just its
visual identity. When the user clicks down on it and he or she isn’t
transported to the content they’re curious about, they can become
puzzled and frustrated clicking around until they find the actual “go”
spot. This is the behaviour I’ve created with the menu at wirzco.com
by setting up a situation where the hover effect makes people think
they’ve reached the buttons “go” spot when they actually must get
closer to the link text.
On Sun, Jun 8, 2008 at 2:10 AM, WebWorker wrote:
Can you do the same thing with table cells? (rollover backgrounds - but text links inside the cell)
–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Ernie, But I was definitely not creating a menu from tables. Tagles have been left along time ago. But I’ve just seen where tables have been used within the body of pages to list timetable like structures with links in them, and a rollover effect on the horizontal helps to read/highlight the data. And like all Freewayers, we get past the basics and want, nay ‘need’ to push into new areas, so you can offer a better arsenal of tools to effect a good solution.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
A table-like structure can be built with as little as a single div (or more if needed) and some creative CSS to create the look of a table from the visitors pov without the excessive markup behind the scenes. Adding a rollover effect to a ‘row’ in this manner is very easy. Granted the ease of this approach is dependent on how complex the table needs to be and your CSS skills but it’s a wonderful alternative if you’re up for it. I’ve built simple ‘tables’ like this using lists that are beautiful both semantically and in terms of very lean code compared to a proper table. And should it need to be more complex at some point it’s easy enough to add more virtual rows and columns. CSS is your friend.
Todd
On Jun 8, 2008, at 3:17 PM, WebWorker wrote:
Thanks Ernie, But I was definitely not creating a menu from tables. Tagles have been left along time ago. But I’ve just seen where tables have been used within the body of pages to list timetable like structures with links in them, and a rollover effect on the horizontal helps to read/highlight the data.
Hey WW – hope you don’t feel offended by my posting. I’m not meaning
to judge you, just make sure that other readers following this thread
understand my position on the techniques I described. I hope you found
the link to my old article useful as it addresses applying hover
attributes to table cells and table rows.
On Sun, Jun 8, 2008 at 1:17 PM, WebWorker wrote:
Thanks Ernie, But I was definitely not creating a menu from tables. Tagles have been left along time ago. But I’ve just seen where tables have been used within the body of pages to list timetable like structures with links in them, and a rollover effect on the horizontal helps to read/highlight the data. And like all Freewayers, we get past the basics and want, nay ‘need’ to push into new areas, so you can offer a better arsenal of tools to effect a good solution.
–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ernie, no problem, and thanks for the link. I’m by no means a beginner, but like many, would say there is still plenty to learn*. Especially the techniques of getting suitable code through the Freeway interface.
*learning never ends!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Freeway drawn tables can be a nightmare to use for data display. The
most useful thing can be done is to find how to Extend the table to
add an ID tag to it. Freeway still rightly puts a table into a div
(CSS Layout) but still does not make that clear in the workspace. If
you use the inspector to give what you think as the selected table an
id. you’re actually just setting the id of the enclosing div. Which is
okay, if you understand that relationship, as you can target elements
of that table thru the enclosing div as:
div#NAME table
in your style’s TAG name field. If it’s table rows you want to hover, then
div#NAME table tr:hover
is what’s needed. Don’t forget that Freeway likes to place inline
styles in the page structure, so decorations applied through the
interface tend to over-ride stylesheet definitions. But once you know
that, using Freeway’s style interface to target know structural tags a
big key in manipulating the Freeway output.
Of course, if you can get to the table style extension to give it an
ID, then you can target your Tag style as:
table#NAME tr:hover
For others who are wondering about “Tag styles” they are simply CSS
coding spoon-fed into Freeway. Knowing that in this case, Freeway will
write my table structure as:
the Tag style div#NAME table tr:hover is just the CSS way of saying
“The Hover state of Table Rows of Tables belonging to the Div with
this Name”. Very specific, and not something Freeway could do on it’s
own. But it illustrates how knowing how Freeway writes your code
allows you to take advantage of the Style interface to decorate it.
The only caveat is that you must leave some of the comfort of the
“wysiwyg” interface.
Anyway, I have gone on long again
On Mon, Jun 9, 2008 at 2:13 AM, WebWorker wrote:
Ernie, no problem, and thanks for the link. I’m by no means a beginner, but like many, would say there is still plenty to learn*. Especially the techniques of getting suitable code through the Freeway interface.
*learning never ends!
–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options