Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Separating Articles Within Loop Using <hr>

I've got the familiar loop in my site's index page for listing the x most recent articles. I've added an <hr> tag before the {$ next $} which works fine. However, I have an extra <hr> tag at the end of the last article, at the bottom of my page. Is there any way I can get rid of this? The number of <hr> tags needs to be one less than the number of included articles.

John Topley
Tuesday, March 18, 2003

Probably an easier way, but here's what came through my mind:

Put the hr at the top of the loop
Use CSS to make the first hr invisible by creating a context selector.

joel Goldstick
Tuesday, March 18, 2003

I had a similar problem to this... let me see if I remember the solution...

Oh yeah, the workaround is to put it at the top of the article. Yes you'll have an extra HR at the top, but you can disguise it as a seperator between the top of the page and list of articles.

Using my site as an example:

http://www.marktaw.com/index.html

Now imagine that instead of a blue bar, there was an HR between "Art, Music, Culture, Life. These are the 10 latest articles." and the first article. That would look normal right? And then an between all the remaining articles.

www.marktaw.com
Tuesday, March 18, 2003

Woah.. I'm familiar with CSS, but what's a context selector?

www.marktaw.com
Tuesday, March 18, 2003

That should've read "And then an HR between all the remaining articles."

www.marktaw.com
Tuesday, March 18, 2003

<style type="text/css">
.noFinalHR > hr:first-child {display: none;}
</style>

<div class="noFinalHR">
{$ foreach 3 x in (folder "/") $}
  <hr>
  <a href="#">{$ x.headline $}</a>
{$ next $}
<div>

context selector is a way of choosing a selector by the sequence of tags it is in. 
http://www.w3.org/TR/CSS21/selector.html#x25

is where you can see about this one.  It is an hr which is the first child of an element of class noFinalHR

It works on opera 7 and ns7 but not Windows ie6

Context selectors are very powerful.  If they work right, you can be the envy of your friends!

joel Goldstick
Tuesday, March 18, 2003

"It works on opera 7 and ns7 but not Windows ie6"

Well there you go, 75% of the world is on IE...

www.marktaw.com
Tuesday, March 18, 2003

Thanks everyone. I'm actually going to leave it as the problem appears not to have a satisfactory solution.

John Topley
Wednesday, March 19, 2003

This can be done with some CSS trickery, like so :

<STYLE>.sep1 hr{display:none;}</STYLE>
<STYLE>.sep2 hr{display:normal;}</STYLE>
<SPAN class=sep1>
{$foreach doc in (keyword_contains "!bulletin") sortdescendby .fileddate$}
<hr>
</span>
<!-- content goes here -->
<span class=sep2>
{$next$}
</span>

The first <hr> is supressed by the <span> starting before the loop, then we turn it on for all the others, then close the last one off outside the loop.

Michael Wild
Friday, March 21, 2003

Nice idea!  And it works with IE!

joel Goldstick
Friday, March 21, 2003

Correction : I noticed that display:normal is not valid CSS - it should be display:block, since <hr> is normally a block-level element.

This means that the second style is unnecessary, since in what I wrote it can't be having any effect. The <span> is still needed, or the tags won't match, but it doesn't need to specify a class.

Michael Wild
Friday, March 21, 2003

Thanks a lot, Michael. I'll give it a go!

John Topley
Wednesday, March 26, 2003

*  Recent Topics

*  Fog Creek Home