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!

When the next problem comes along, can we drop the rule about having to provide a solution using as much html/css as possible? :P

Still half a day to go :)

No problems today. =)

Might be a simple problem to solve, so go for it :)

And problem solved =D

Thank you ever so much McLong and Eccles. ^_^ Not to mention the others too. You're all wonderful.

Right! Now for the next problem... well perhaps not, you guys take the rest of the day off. I'll save it till tomorrow. =)

Hi McLong, within the code you included:

*html .navigation li a {
display: inline;
}

... what's this bit for?

Ok here is one simple way, like the Site Map | Freeola Home links above:
The HTML:

<a class="spaced_links" href="http://freeola.com/sitemap/">Site Map</a>|<a class="spaced_links" href="http://freeola.com">Freeola Home</a>

then the CSS bit, you can do this inline or in your stylesheet:

.spaced_links {
padding: 0px 4px 0px 4px; //set left and right padding of links to make spacing
}

The should give you pixel perfect spacing.

Right, Machie.

I've just pulled together some CSS that we have in use on our newly designed Emergency Internet site which hopefully suits what you're looking for. It even works in IE7.

Add your links as separate

's with the '|' symbol before the close tag link like so:


<ul class="navigation">
<li><a href="">Link 1</a>|</li>
<li><a href="">Link 2</a>|</li>
<li><a href="">Link 3</a>|</li>
<li><a href="">Link 4</a></li>
</ul>


Add the following to your CSS file:


.navigation ul {
margin: 0px;
padding: 0px;
}
.navigation li {
display: inline;
margin: 0px;
}
.navigation li a {
display: inline;
padding: 0px 20px 0px 20px;
}
*html .navigation li a {
display: inline;
}


Now just change the padding to increase/decrease the gaps between the '|' symbols and add any styling as necessary!

Edit: trimmed the css down slightly :/

Wow lots of posts. Apologises for disappearing. Had to phone the girlfriend. =)

Alright then, lets see if we can solve this one.

@loki - Yep that's it, at the moment I have it like this;

Contact | Site Map | Help

As you can see it's not nicely spaced out like the websites I linked to earlier. Im not sure how I could achieve the same result in HTML. I suppose   would do it, but I'd like to be more precise =) I notice the links ("Ignore User | Start New Thread" etc) under each post are done normally but I think the "Site Map | Freeola Home" at the top are spaced differently, or is it the same too?

@Garin - That sounds familiar I think you helped me do something similiar but I dont have the code anymore =( It was for using under my infamous "tabs". 4 centered links seperated with |

@Eccles - Yes that's the look I want =D but do you know a simple (more simple than epsons) way to achieve this without using  

@cjh - Wow sounds good, I'll install it after this, thanks cjh. =)

@Hmmm - Cheers Hmmm, looks like there are other things I'd like to try too.

Hmmm... wrote:
> 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

Blimey, Epson make it hard for themselves.