13 replies [Last post]
ElaMiNaTo
ElaMiNaTo's picture
Offline
Regular
Last seen: 8 years 42 weeks ago
Timezone: GMT+2
Joined: 2013-03-25
Posts: 14
Points: 22

Hi Smile

This time with no code at all. I'm wondering whether its possible to get the | symbol into the padding area of an li-element. Its about a horizontal nav bar that looks like this: "link1 | link2". So the | is kind of a seperator.

Sure I guess I could use "position: relative" or "position: absolute" to solve this. But I do not think of this of an elegant way of solving the problem. The most elegant way to me would be to make a background image with the |. But then it's an image. An image is bigger than just text. Thats inefficient.

Any other thoughts / ideas?

Thanks Smile

ElaMiNaTo
ElaMiNaTo's picture
Offline
Regular
Last seen: 8 years 42 weeks ago
Timezone: GMT+2
Joined: 2013-03-25
Posts: 14
Points: 22

Solved it elegantly.

I found a very easy different way to solve this elegantly. I thought way too complicated.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thanks for sharing how then

Thanks for sharing how then Wink

I was going to offer a few possible solutions and also the general rules regarding link separators but...

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 6 weeks ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Menu

Would you mind sharing anyway please Hugo? This is something I've always been a bit curious about. I've done many different ways before but the most common for me usually ends up something like:

<ul>
<li><a href="#">Home</a></li>
<li>&nbsp;&nbsp;&nbsp;&#124;&nbsp;&nbsp;&nbsp;</li>
<li><a href="#">Links</a></li>
<li>&nbsp;&nbsp;&nbsp;&#124;&nbsp;&nbsp;&nbsp;</li>
<li><a href="#">Contact Us</a></li>
</ul>

Then use floating... but I realise this is probably not so efficient!

Have YOU said Hello yet?
The CSSCreator Hello Thread

ElaMiNaTo
ElaMiNaTo's picture
Offline
Regular
Last seen: 8 years 42 weeks ago
Timezone: GMT+2
Joined: 2013-03-25
Posts: 14
Points: 22

I just did it in the

I just did it in the following way:

<ul>
<li><a href="">Link1</a>|</li>
<li><a href="">Link2</a>|</li>
<li><a href="">Link3</a>|</li>
<li><a href="">Link4</a>|</li>
</ul>

And CSS:

ul li {
	display: inline-block;
	padding-left: 3px;
	font-size:14px;
	float: left;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Is there some compelling

Is there some compelling reason you don't simply put a border on the li element? E.g.

<ul>
  <li><a href="">Link1</a></li>
  <li><a href="">Link2</a></li>
  <li><a href="">Link3</a></li>
  <li><a href="">Link4</a></li>
</ul>
==================
li {
  border-right: 1px solid; /* when color not specified, 
                              the text color value is used */
  }
 
li:last-child {
  border-right: none;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ElaMiNaTo
ElaMiNaTo's picture
Offline
Regular
Last seen: 8 years 42 weeks ago
Timezone: GMT+2
Joined: 2013-03-25
Posts: 14
Points: 22

I can't think of any

I can't think of any compelling reason as of now. I think that's the most simplest solution to this problem you just showed me(us) gary.

Thanks for sharing.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't add an actual

Don't add an actual character, the guideline was always use a separator where the element didn't semantically convey a list i.e plain series of anchors (bad) which needed to clearly state a division or stop point. If you do describe a list then you do not need to add a separator other than for visual pleasure - yes I'm aware this is the only reason it's being done Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hugo's got the right of it

If you ever use a screen reader on one of your pages that uses an actual character as a separator, you will be maximally embarrassed. You will be kicking your own back-side. You will stand on the courthouse steps at noon, during the sheriff's auction, begging the crowd to heap scorn and abuse upon yourself. It is absolutely horrible; annoying to the nth degree.

To avoid the need for such self-flagellation is why we have css ; adding presentation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ElaMiNaTo
ElaMiNaTo's picture
Offline
Regular
Last seen: 8 years 42 weeks ago
Timezone: GMT+2
Joined: 2013-03-25
Posts: 14
Points: 22

@hugo & gary

You're feeding my mind in a good way. From a logical viewpoint the pipe in my case is definitely used to style a list. So, I should've used CSS. I didn't thought about that in this case because I just wanted to solve the problem - no matter how.

I also have the goal in mind to make the websites accessible to all (handicapped) human beings as far as possible.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 6 weeks ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

:last-child is supported from

:last-child is supported from IE9 upwards only though right? See I'm happy to drop IE6 off my support list, have been for a while, but IE8 is still on there. And from that perspective surely an actual character for the pipe is more efficient than some JS work around?

Otherwise :last-child and a border would be perfect!

Have YOU said Hello yet?
The CSSCreator Hello Thread

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hi, burlster

Good to hear from you again.

I think (memory going, and haven't tested lately) that :first-child works well enough in IE. Use border-left for the separator and li:first-child {border-left: none;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 6 weeks ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Good stuff . Thanks Gary.

Good stuff Smile. Thanks Gary. I'm pretty happy with that solution as I don't often have dynamically changing menus so the 'Static' status for IE7 seems a good idea. Just not quite sure what this means for IE8:

"IE8 does the right thing only after you remove the focus from the test link."

This is where I got my compatibility information from: Quirks Mode Selectors

Cheers

Have YOU said Hello yet?
The CSSCreator Hello Thread

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

???

I have no idea what that means either. More than likely, being as it's Peter-Paul Koch, it has to do with some javascript interaction.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.