Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"|" on intervals only 4

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
May 4, 2001
1,284
FR
Hi guys :)

Do you know a way to do this with CSS? :

Link | Link | Link | Link | Link | Link


I use :

Code: 
text-decoration: none;
color: #ffffff;
padding-left: 5px;
padding-right: 5px;
border-left: 1px solid #ffffff;

... which produces :

| Link | Link | Link | Link | Link | Link

Also, the problem is that the links
are taken fom a database and must have the same CSS
applied to all of them.

I think it's impossible to get rid of the extra |
in that case ... but maybe I didn't think of all the options?

Thanks for the help anyway.
 
Sort by date Sort by votes
You could use whichever language you are using to output the links to place the "|" character in between them.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
That would be too simple! :)

Unfortunately, for this particular case, I can only rely on CSS.

 
Upvote 0 Downvote
The only other option in that case would be to give the first link a different css class. that is identical to the other one, except it doesn't have the border attribute defined.

But i have to wonder why the programamtical approach is out of the question?



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I usually add a special class for the first or last child, depending on which border I am using. Of course, outside IE you could use the :first-child selector but before you could completely rely on that technique, we will have to wait a bit.
 
Upvote 0 Downvote
But i have to wonder why the programamtical approach is out of the question?
Click to expand...

Simply because it's for a CSS template that wil be used on a CMS system that doesn't handle intervals in its generated navigation bars.

Anyway, now I know it's impossible :)

Thanks guys.
 
Upvote 0 Downvote
As Vragabond's already suggested, this is the easy way to do it:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
    <title>Some title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
<style type="text/css">
ul.bars { 
   list-style: none;
   margin: 0;
   padding: 0;
}

.bars li {
   border-left: 1px solid;
   display: inline;
   margin: 0;
   padding: 0 0 0 0.4em;
}

.bars li.first {
   border: none;
   padding: 0;
}

</style>
</head>
<body>
<ul class="bars">
<li class="first">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
If the [tt]first-child[/tt] pseudo class worked in IE, we wouldn't need to explicitly make a [tt]first[/tt] class like this.

Now, if your CMS doesn't allow you to do that, you might have to be more devious. I'd be thinking along the lines of positioning the items one pixel to the left and hiding the first border under something else. However, the browsers I've tried don't seem to like giving an element a higher [tt]z-index[/tt] than its parent, so you may have to try something different.

How about some Javascript? A script could be written to go in and remove the border from the first item when the page loads, or you could use Dean Edwards' IE7 script which gets [tt]first-child[/tt] to work on IE.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
TobyA, that is somewhat akin to what ChrisHunt suggested.
If you check the browser support chart for 'Pipe Dream' it's not definitely supported across the board.

It is, nonetheless, a neat solution and barring the use of a first/last class/selector is the way I would try to 'fix' it.


As another option, you could use Javascript to append a separator either to some of the list items or as additional list items. Feels 'kludgy' though

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote

Thanks again guys :)
Your help is gold :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
774
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
715
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
897
spamjim
spamjim
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top