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!

Yeah that's what I wanted cjh =) So if someone did have it turned off then it would still take them to a HTML version of the list.

-------

Okay Eccles, I wonder if you can help me again. I think I tried to get this problem sorted before on here, but it didnt work out. =(

At the top right of my site, I have the usual links...

'Contact | Site Map | Help' etc

My problem is it doesnt look good presented like that as they're spaced too close together.

How do I seperate them nicely like they do on other websites?

Any links or examples would be very helpful. =)

What was wrong with what Eccles gave you before?

Machie wrote:
> How do I seperate them nicely like they do on other websites?

I see you are only asking Eccles, but...

Have you tried looking at the source code and CSS on one of the sites that uses a style you like to see what techniques they are using?



Look out Eccles, Machie had me, Garin and cjh going for years on his spoof website :¬P



[LINK=http://www.hmmm.ip3.co.uk][S]Search Freeola Chat[/LINK]

I'm not sure I get what you're after exactly but I'll explain what I think you're after anyway.
The easiest way to make a text based horizontal menu is to use an unordered list:

<ul id="top_navigation">
<li><a href="link1.htm">Link 1</a>
<li><a href="link2.htm">Link 2</a>
<li><a href="link2.htm">Link 2</a>
...
</ul>

And then apply some CSS to it to make the links inline and remove the default list styling:

#top_navigation {
margin: 0; //removes indent
padding: 0;
list-style: none; //remove dot styling
}
#top_navigation li {
float: left;//make the list horizontal and still allows block level styling to be applied
padding: 3px 4px 3px 4px;
}

You can of course do a lot more styling than this but I've added padding to the list items to that they have spacing either side.

Or you could be very lazy and just use      lots!

Edit again: Just found this for you.

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 =)

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.

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

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 |

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?

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.