seperators in css menu

Hello all.
I ever wondered if it is possible to use a little grafic like a dot as seperators in a css menue.

Do you know perhaps how?
Thanks a lot, Hanna


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

The style ‘dotted’ doesn’t cover it?


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

grafic like a dot as seperators in a css menue.

Are you meaning as the ‘item dividers’?

Can you show us an example of your menu and an idea of the graphic you want to use?

David


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

Here’s what I am imagining – please show us an example of what you really mean: Dotted

Walter

On Feb 3, 2015, at 4:26 PM, DeltaDave email@hidden wrote:

grafic like a dot as seperators in a css menue.

Are you meaning as the ‘item dividers’?

Can you show us an example of your menu and an idea of the graphic you want to use?

David


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


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

*Richard, no I would like to have a single dot.

*David, Walter, sure - it is this
link.

Walter, your example comes close.
Can it be done with extended code to our css.menu action?

Thanks a lot, Hanna


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

You can actually do this by making the character you want as the separator a separate list item.

Use Content Width in the settings

D


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

Yes, but it’s not actually something that should be listed, so there’s a semantic reason to do it with generated content, as I did, rather than show it as a part of the list of options.

Can you share a link to the page you’re working on, Sonjanna? If I can see the HTML, I will know what the css selector has to be to get in there and effect the change.

Walter

On Feb 4, 2015, at 9:07 AM, DeltaDave email@hidden wrote:

You can actually do this by making the character you want as the separator a separate list item.

Use Content Width in the settings

D


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


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

*David, first I thought wow what a simple solution, but I use a grafic and colour while hover and the dots do the same ;).

*Walter, sure I let you know the test url.

Thanks a lot!
Hanna


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

but I use a grafic and colour while hover and the dots do the same

Not quite sure what you mean by ‘hover and the dots do the same’ - do you mean they would have hover attributes? Only if they were links.

You could use an icon font for the graphic.

And yes, I know this is not semantically correct - but it is an easy option.

D


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

And if you mean that the dots are showing the same styling as your links then try adding the following code into Page>Html Markup in the before slot

<style type="text/css">
a[href="#nil"], a:hover[href="#nil"] {
color:#000000 !important;
text-decoration:none !important;
cursor:default;
}
</style>

Where color:#000000 is the default color of your text ie if your text was white you would use #ffffff

D


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

I’d like this too.

I use the css menu action on my site and have hard return to separate areas of text. The problem, as I think Walter is alluding to, is that these behave like buttons, even though there is no link associated with them. However, it means that the visual behaviour matches the actual buttons/links and so is somewhat confusing. :frowning:


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

I’d like this too.

Same code would apply to yours. The CSS Menu action applies a #nil link to anything within it (unless you specify otherwise). If you look at your code then your ‘hard returns’ have the following attribute.

<a href="#nil" style=“cursor:default” …

So use my snippet and adjust to suit your menu ie

<style type="text/css">
a[href="#nil"], a:hover[href="#nil"] {
color:#000000 !important;
text-decoration:none !important;
background: #000000 !important;
}
</style>

D


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

David, thanks a lot. I will try this out today.
Hanna


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

Dave,

thanks for this. It’s almost exactly what I need :slight_smile: .

I have a submenu which is also being affected (so I can’t see the text and there’s no hover change). Is there a way around this?


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

I have a submenu which is also being affected

Yes I am sure that some extra CSS will take care of the submenu too.

Not at the correct machine just now to give you the specifics but I will have a look later.

Which sub menu?

D


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

Thanks Dave.

Doing a little web search … would the relevant bit be ‘#nav li’ ? And if so, then can I exclude it, from your css snippet, e.g. with a ≠, or do I need to format it separately?

(Submenu on the main pages are under the heading/title ‘The Books’ … client pages, which are hidden, have slightly different colours and submenu names).

grantsymon.com


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

Submenu on the main pages are under the heading/title ‘The Books’

Not sure I am following you? Dont see any subs under ‘The Books’ that have hard return entries.

D


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

No Dave, the problem isn’t submenus in a submenu.

It’s that the title of the first submenu disappears, because its text colour is also set to the background colour … by the css code you suggested.


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

It’s that the title of the first submenu disappears

I am assuming that this is not on the live version.

So which is the Title?

I suspect that if you added a hyperlink of just a # to the Title it would be unaffected by the code.

D


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

Dave,

The version with your code isn’t live, because the menu title is invisible …

So here’s both what I’m seeing with your code, as is + how it currently looks

and with your code:


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