見てくれはcssに任せるためにその1。
例を交えて書いているので、読みにくいのはご容赦ください。
classにスペースで区切って複数のクラスを指定する書き方は、WindowsのIE6/NN7でしか試していません。他のブラウザでうまくいくかどうか知らないんですが。
現状、default.ini.phpなどで以下のような設定をして、
///////////////////////////////////////////////// // リスト構造の左マージン $_ul_left_margin = 0; // リストと画面左端との間隔(px) $_ul_margin = 16; // リストの階層間の間隔(px) $_ol_left_margin = 0; // リストと画面左端との間隔(px) $_ol_margin = 16; // リストの階層間の間隔(px) $_dl_left_margin = 0; // リストと画面左端との間隔(px) $_dl_margin = 16; // リストの階層間の間隔(px) $_list_pad_str = ' class="list%d" style="padding-left:%dpx;margin-left:%dpx"';
以下のような記述があったときに
---3 -1 ---3 --2 ---3
リストマークをレベルに一致させたり、マージンを合わせるために、
- 3
- 1
- 3
- 2
- 3
このようなタグを吐く仕掛けをしてあるんですが、
<ul class="list3" style="padding-left:48px;margin-left:48px"> <li>3</li> </ul> <ul class="list1" style="padding-left:16px;margin-left:16px"> <li>1 <ul class="list3" style="padding-left:32px;margin-left:32px"> <li>3</li> </ul> <ul class="list2" style="padding-left:16px;margin-left:16px"> <li>2 <ul class="list3" style="padding-left:16px;margin-left:16px"> <li>3</li> </ul> </li> </ul> </li> </ul>
これを廃止して、cssに以下のような記述を追加して
ul,ol,dl { margin-left:1em; padding-left:1em; } dd { margin-left:1em; padding-left:1em; } /*li,dt { margin-left:0px; padding-left:0px; } */ blockquote { margin-left:1em; padding-left:1em; } .skip1 { margin-left:2em; padding-left:2em; } .skip2 { margin-left:3em; padding-left:3em; } ul.list1 { list-style-type:disc; } ul.list2 { list-style-type:circle; } ul.list3 { list-style-type:square; } ol.list1 { list-style-type:decimal; } ol.list2 { list-style-type:lower-roman; } ol.list3 { list-style-type:lower-alpha; }
以下のようなタグを吐くように変更したいんですが、
<ul class="list3 skip2"> <li>3</li> </ul> <ul class="list1"> <li>1 <ul class="list3 skip1"> <li>3</li> </ul> <ul class="list2"> <li>2 <ul class="list3"> <li>3</li> </ul> </li> </ul> </li> </ul>
何か問題ありますか?
たとえば、BugTrack/261での要望のように、レベルが飛んだときのマージンが不要なときは、ls2.inc.phpで以下のようなタグを吐くようにしておいて、
<div class="ls2"> <ul class="list3 skip2"> <li>3</li> </ul> <ul class="list2 skip1"> <li>3</li> </ul> </div>
cssに以下の定義をすればOKかなと。
div.ls2 ul.skip1 { margin-left:1em; padding-left:1em; } div.ls2 ul.skip2 { margin-left:1em; padding-left:1em; }
ul,ol,dl,dd,blockquoteでmargin-left + padding-leftの合計値を常に一致させておけば、うまくいくような気がします。
liやdtのマージン/パディングはデフォルトのまま0pxとしています。
ul,ol,dl { margin-left:1em; padding-left:1em; } dd { margin-left:1em; padding-left:1em; } /*li,dt { margin-left:0px; padding-left:0px; } */ blockquote { margin-left:1em; padding-left:1em; }たとえば、blockquoteの枠はもう少し狭くしたい、というのであれば
blockquote { margin-left:1.5em; padding-left:0.5em }としてみたり。
そして、レベルが飛んだときのマージン調整用に、マージン/パディングが2倍、3倍のクラス
.skip1 { margin-left:2em; padding-left:2em; } .skip2 { margin-left:3em; padding-left:3em; }があればいいのではないかと。
- <div><?php echo $body ?></div> + <div id="body"><?php echo $body ?></div>として、cssに
div#body > ul { margin-left:3em; padding-left:3em; } div#body > ol { margin-left:3em; padding-left:3em; } div#body > dl { margin-left:3em; padding-left:3em; } div#body > blockquote { margin-left:3em; padding-left:3em; }と書くのは反則ですか? -- ぱんだ 2003-03-29 (土) 23:12:48
.toplevel { margin-left: 2em; } <div class="toplevel"> <-- <ul class="list3 skip2"> <li>3</li> </ul> <ul class="list1"> <li>1 <ul class="list3 skip1"> <li>3</li> </ul> <ul class="list2"> <li>2 <ul class="list3"> <li>3</li> </ul> </li> </ul> </li> </ul> </div> <--