Posted by Jonathan N. Little on 06/10/06 03:12

dorayme wrote:
> In article <9ab74$448a180b$40cba795$18587@NAXS.COM>,
> "Jonathan N. Little" <lws4art@centralva.net> wrote:
>
>> dorayme wrote:
>>> In article <c2852$4489b70c$40cba7b4$2306@NAXS.COM>,
>>> "Jonathan N. Little" <lws4art@centralva.net> wrote:
>>>
>>>> http://www.littleworksstudio.com/Amberlithe/
>>> I used to do some horiz menus like yours:
>>>
>>> <div>
>>> <a
>>> href="http://N.webring.com/wrman?ring=ibizanring;sid=23;addsite">J
>>> oin Now</a>
>>> | <a href="ht
>>>
>>> etc
>>>
>>> Simple and effective. Might go back to it as I often don't end up
>>> using the power to style other things in such a simple horiz
>>> "list" when using fancy doodle lists with just left or right or
>>> both left and right only borders to make for a separator.
>>>
>> Sorry not sure what your are saying here.
>>
>
> One can make a horizontal line of links in at least two ways:
>
> <div>TextLink | TextLink | TextLink | TextLink</div>


I have no problem with above, If your are using server-side script, it
is real easy to create, build links into an array, then join using a |
"pipe" character...PHP:

echo implode( '|', $arrayOfLinks );

>
> or via (with display:inline; on the <li>s)
>
> <ul>
> <li> TextLink</li>
> <li> TextLink</li>
> <li> TextLink</li>
> </ul>
>
> For many simple lines of links, the former is the simplest and
> quickest if one does not want any background boxes and fancy
> hover effects (save on the links - <a ...> - themselves). But it
> involves mixing presentation with content. (...doing the wrong
> thing is so easy and effective in isolated cases)
>
>>> Perhaps you might be thinking it is not really a list, this under
>>> the "Ibizan Hound Webring"?
>>>
>> If you look at the source, that code really is not mine, it is some
>> tweaked web ring crap. I was supposed to use the JavaScript insertion
>> that is commented out, but it was so full of errors that I just tweaked
>> the output and put 'fixed' results hard-coded. Been trying for years to
>> get them to fix it, but now I have just given up!
>
> Ah, so it was not yours, that explains it, I know you are very
> strict. So, if you don't cheat and use "|" (the key that is under
> the delete key (at least on a Mac) and needs to be used in
> conjunction with the shift key) for presentational separators in
> a line of links, blowed if I am going to do it either...
>
> But I miss the utter simplicity of it and the nicer look of the
> seperator from that of the border. You see, I think the problem
> in the looks is this: I like the part where the separator is not
> as tall as the text, look at the y and p, how they protrude down:
>
> p | y
>

Well your still can using a list...you got me thinking and this is what
I came up with:

<style type="text/css">
UL.linkbar { list-style: none; }
UL.linkbar LI { display: inline; }
UL.linkbar LI + LI:before { content: "| "; }
</style>



<ul class="linkbar">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>

No borders, uses a list and pure CSS and your beloved* pipe character!

Actually I like it too with the whole business encloses in square brackets:

[ link | link | link ]

Just the pure simplicity.

But of course the above technique doesn't work with that ubiquitous
program the tries to pass itself off as a web browser!

> Never mind why I like this for now. I can't immediately see how
> to achieve this with borders.
>
> But there will be little patience by most here for such obsessive
> details - "just use left or right borders in the usual way, 1px
> and shut up, dorayme!"
>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]