indexu.com » listing http://www.indexu.com developer blog Wed, 30 Jun 2010 05:06:39 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Show listing in two columns or more http://www.indexu.com/show-listing-in-two-columns-or-more/ http://www.indexu.com/show-listing-in-two-columns-or-more/#comments Tue, 15 Jun 2010 02:15:38 +0000 dody http://www.indexu.com/?p=43 two columns rows.html

Bored to have listing in single column? I will show you how to make listing in multiple columns.

Edit rows.html, clean the codes and replace with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  <%if $number % 2 eq 1%>
    <div class="row_nl">
  <%/if%>
 
  <div class="row_item myrow">
    <img src="http://open.thumbshots.org/image.aspx?url=<%$url%>" alt="<%$title%>" style="border:1px solid #777;">
    <h3><a href="<%$url%>" name="link_<%$link_id%>"><%$title%></a></h3>
    <p><%$description%></p>
    <p><a href="<%$url%>" name="link_<%$link_id%>"><%$url%></a> - <a href="<%$site_url%>/<%$detail_page_url%>"><%t%>details<%/t%></a></p>
    <p>Google PR <img src="<%$site_url%>/googlepr.php?link_id=<%$link_id%>" alt="" /></p>
  </div>
 
  <%if $number % 2 eq 0%>
    </div>
  <%/if%>

Then add these 2 css classes to construct the layout.

.row_nl {
  clear:both;
  width:100%;
  margin-bottom: 10px;
}
 
.row_item {
  margin-right:10px;
  display:inline;
  width:285px;
  float:left;
}
]]> http://www.indexu.com/show-listing-in-two-columns-or-more/feed/ 0