CMS Designerユーザーズフォーラム

いつも、質問に答えていただきありがとうございます。

前回、リスト項目の出力で＜ｂｒ＞タグで改行させる質問をした者です。
今度はテーブルを使い５つごとに出力させたいのです。

JPG画像の下に画像タイトル、そしてその下にEPSファイルの3つを
ワンセットに横に５つ並べ、改行させたいのです。

<table border="0">
<tr>
<xsl:for-each select="photolist/listitem">
<td>
<a href="../{photo}" target="_blank"><img src="../{photo}&w=50" border="0" /></a><br />
<xsl:value-of select="photoname" /><br />
<a href="../{eps}"><xsl:value-of select="eps/@org" /></a><br />
<xsl:value-of select="round(eps/@filesize div 1024)" />KB
</td>
<xsl:if test="(position() mod 5)=0"><br /></xsl:if>
</xsl:for-each>
</tr>
</table>

これですと、5つ目に<td><br></td>と言う風に＜ｂｒ＞タグが現れるので
＜ｂｒ /＞の代わりに＜/ｔｒ＞＜ｔｒ＞を入れたらエラーが出ました。
当然ですよね、XHTMLじゃないですもんね。

他の方法でもよいので何かよい方法はあるでしょうか？
よろしくお願いします。

　rueshellさん、ご質問ありがとうございます。

　リスト項目をテーブルを使ってｎ個毎に整形する方法は、xsltでは苦手な分野
で、私もパッと良い方法が思いつきません。m(__)m

　おそらく実現されたいのは、boxを5つ、横方向に並べるという方法かと
思います。これは、CSSを使って実現されるのがスマートかもしれません。

コード: 全て選択

 <ul class="filelist">
  <xsl:for-each select="photolist/listitem">
   <li>
    <div>
    <a href="../{photo}" target="_blank"><img src="../{photo}&w=50" border="0" /></a><br />
    <xsl:value-of select="photoname" /><br />
    <a href="../{eps}"><xsl:value-of select="eps/@org" /></a><br />
    <xsl:value-of select="round(eps/@filesize div 1024)" />KB
    </div>
    </li>
  </xsl:for-each>
 </ul>

　css側では、

コード: 全て選択

ul.filelist {
  margin : 0;
  padding : 0;

  width : 500px;
}

ul.filelist li {
  margin : 0;
  padding : 0;

  display : block;
  float : left;
  width : 100px;
  height : 100px;
}

ul.filelist li div {
  border : 1px solid black;
  padding : 0.5em;
}

　のようにしておくと、li要素が100x100のボックスになり、左寄せで右方向に
重なってゆき、ul要素の幅500pxを超えた所（つまり6個目のli要素）で自動的に
改行されると思います。

　CSSについては試していないので考え方として参考にしてみてください。

　ご不明な点がございましたら、またご連絡頂ければ幸いです。

うまくいきました。
これをベースにデザインを詰めていきたいと思います。
ありがとうございました。

CMS Designerユーザーズフォーラム

またリスト項目の質問ですみません。

またリスト項目の質問ですみません。

Re: またリスト項目の質問ですみません。

ありがとうございます。