css menu

Hi - Im trying to get the orange line that appears on hover, on the NAV, to only be the width on the text at mo it goes across all the text plus the padding? I tried using item divider in the action but you have to use a colour if you use none it does not do it…

CHEERS!

http://easthalldesign.com/dev1


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Trying styling the span class “nav” instead of the a tag.

Todd
http://xiiro.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great thanks - but I dont know how to do this ??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Untested but try this:

Create a Tag style:

a:hover span.nav

Then give it an attribute

text-decoration: underline

or instead you could use a border with some padding

border-bottom: 1px solid #f60;
padding-bottom: 20px;

Play around with it.

Todd
http://xiiro.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As you are using an action to achieve this, I’m not sure you have much say
in how it appears. The underline is a border-bottom attribute and will be
as wide as the text plus padding.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks I dont use code at all so I dont know how to apply what Todd id talking about? Any way you could walk me through this?

Yes I am using the CSS action?

Surely its possible?

See here - I designed it but didn’t code it
http://www.cfclaw.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

PS I know the logo is way to big I did tell them!!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah, I see you’re using a background image for the underline. I need to look into this further. My suggestion won’t work.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep I used to get the correct distance down but I cant get the width the same as content…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For starters can you remove the orange line bg image?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

yes I can


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s because the bg image is attached to the “a” (link) tag. The span.nav style is a child of the “a” tag and that’s what you want to attach the underline to. Btw, you could replicate the effect without an image.

I cant get the width the same as content…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great - please show me how? I’d rather not use an image if poss - note I dont code and Im using the CSS menu action

I can add snippets into the extended - but a walkthrough would be great!

http://easthalldesign.com/dev1/personaltrainina.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok, remove it.

Now open the main Styles editor and create a new Tag style

ul#fwNav1 li a:hover span.nav

Make sure there’s nothing in the Name field.

Now select Background Image from the Character section and use the same orange line image as before. Be sure to repeat the image horizontally.

See if that works.

Todd

yes I can


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No luck - Not showing now

http://easthalldesign.com/dev1/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Justin,
Try this;
http://www.freewayactions.com/test/vitality-fitness/

I don’t think you can so this using the CSS Menus Action by itself as it will normally want to apply the underline to the padded anchor rather than the span that you’ve got wrapped around the text. If you look at the source code of that page you should see the CSS overrides for the styles. Simply copy these into your Freeway page (Edit > HTML Markup > Before ) and you should be set.

Essentially what we are doing here is ignoring the image background on the anchor, padding the spans to the same height as the original underlines and then using a border-bottom to add the underlines back in.
Regards,
Tim.

On 30 Oct 2012, at 19:47, Justin Easthall wrote:

No luck - Not showing now

http://easthalldesign.com/dev1/


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BRILLIANT Tim worked a treat - if I want to keep it to highlight the page being viewed what would I need to add to the snippet

Thanks Todd/Erns appreciated the help too


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Justin,
Just add the fwCurrent class to the menu CSS style. See the updated example;
http://www.freewayactions.com/test/vitality-fitness/
Regards,
Tim.

On 30 Oct 2012, at 20:20, Justin Easthall wrote:

BRILLIANT Tim worked a treat - if I want to keep it to highlight the page being viewed what would I need to add to the snippet


FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

wonderful thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options