Viewing Thread:
"Eccles"

Hello Eccles! Mmm I love eccles cakes by the way.

I wonder if you could help me (Or anyone else if possible). Sometimes when I surf the interwebs I find something that I quite fancy for my own site. Unfortunately I think Tony has blocked YouTube from your interwebs so I can't show you what I want to duplicate. For those who don't have it blocked I'd love to duplicate the global menu. Freeola have something similiar that they added recently on the MyFreeola page (the floating menu for the go back to: links). I'd like something like that but to only appear when clicked on.

Questions
What magic is doing this. Is it stable on other browsers. Is it easy to impliment and does anyone have any links or homemade scripts they could show me?

GO TEAM MACHIE!

Web Developer and Degbugbar are mentioned in this thread Machie [URL]http://chat.freeola.com/Web-Development-4-chat/Webmaster-Tips-2798.html[/URL] along with lots of other bits and bobs you may find interesting...



Search Freeola Chat

Machie:
"I'll find some examples on the web. Unfortunately Hmmm the
source code is usually so confusing I don't know what to look at."

Machie, do you have Firefox installed? If so, download and install the web developer add-on, and when you come across a site, you can select CSS > View Style Information, which brings up a little cross-arrow.

Using this you can move around the page, and see a red border appear around the sections you're interested in, and when you find the segment you want to look at (such as the navigation links) clicking it will select the CSS that is applied to that element.

As for the spacing, CSS margin and padding should be all that you need.

I think we're all getting a little confused!
Something like:
test | test | test | test?

I'd say even a span was more effort than necessary. I'd just throw in a couple of   spaces unless I had to be really precise.

I must admit I'm a little bit mystified too. Seems to be vast amounts of code being thrown about for the sake of some spacing.
If I was doing this I'd have just done as youtube have. All they've got is a span tag wrapped around the | separators with a class applied. For the sake of a minor menu, not sure anything else is needed.

I'm not quite clear on this, did I mis-read this or are you trying to put bigger spaces between the link anchor text and the '|' character (like link1 [big_gap] | etc.)?

Can't you use normal HTML spaces?

Wow that's a lot. 0pt? I wonder if I should use that instead of px.

They gave border-right a 1px color. But I wonder how they stopped it from looking like this.

Corporate Information | News | Investor Relations |

Machie wrote:
> I'll find some examples on the web. Unfortunately Hmmm the
> source code is usually so confusing I dont know what to look at.
> =(

Looking quickly at your first example, Epson - here's how they do it:


#divMainNav ul li (line 87)

{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 8px;
padding-bottom: 0pt;
padding-left: 8px;
display: inline;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #888888;
}



Search Freeola Chat

Thanks Eccles. Though the example I tried the links werent spacing apart. As Garin mentioned, you tried helping me before with this and gave a very good example.

I'd like it spaced out like these examples but to still use the | as a border.

I'll find some examples on the web. Unfortunately Hmmm the source code is usually so confusing I dont know what to look at. =(

Here's some examples of spaced 'Contact | Site Map' menus using the | as a border. Oh wait Im noticing that some might not be using | and are infact using a CSS border, I'm not sure.

Click
Click
Click
Click (above the search box)
Click (top right)

It's used a lot on most websites it seems.

Garin wrote:
> What was wrong with what Eccles gave you before?

Do'h I forgot about that one. Ah now I remember. I was meant to ask before about how I could still use | as borders between the menus. Like the other websites =)