listに関するchips1029のブックマーク (8)

  • IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org

    HTMLCSSJavascript、デザイン、絵を描いたり。 このページの先頭へ戻る

    IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org
    chips1029
    chips1029 2010/05/17
    dt,ddを横並び時に、折り返すとIEで3pxずれるのの対策
  • dtをfloatする場合の注意点 | d-spica

    dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで,dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで,更新日を dt で,更新内容を dd でマークアップした場合を想定してみましょう。 まず,XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</

    chips1029
    chips1029 2010/05/17
    dt,ddを横並び時に、折り返すとIEで3pxずれるのの対策
  • HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。

    HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン

    HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
    chips1029
    chips1029 2010/05/17
    listのfloat時にマージン0用のclassつけずに並べる方法
  • スタイルシートをめぐる冒険: マージンを使ってdtとddを横並びにするとdtが消える

    定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。 [該当するブラウザ] Windows/IE7.0以下 症状 たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする(右図)。 角マル矩形は、 frame_top.gif(トップの部分)、 frame_bg.gif(中間部分)、 frame_btm.gif(ボトムの部分)、 以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである(→サンプルページ1)。 【スタイルシート】 body { margin: 10px; padding: 0; } .box { w

    chips1029
    chips1029 2010/05/17
    dt,ddの横並び時にdtが消える
  • CSSデザインカタログ | list | dt と dd を横並びにした定義リスト

    サンプル 2007-05-30 テキストテキストテキストテキストテキストテキストテキストテキスト 2007-05-15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 2007-04-30 テキストテキストテキストテキストテキストテキスト 2007-04-15 テキストテキストテキストテキストテキストテキストテキスト 2007-03-30 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ソース XHTML <dl class="list309"> <dt>2007-05-30</dt> <dd>テキストテキスト......</dd> <dt>2007-05-15</dt> <dd>テキストテキスト......</dd> <dt>2007-04-30</dt> <dd>テキストテキスト......</

    chips1029
    chips1029 2010/05/17
    dt,ddの横並び
  • CSSサンプルプログ

    こんばんわ、おひさしぶりです。 溝上です。 なんだかひさしぶりにブログを書く気がします。 そんなわけで今回は軽くリハビリがてら、 最近遭遇したIEのバグについてお話したいと思います。 それでは早速サンプルをご覧ください。 (htmlコーディング) <ol class="number"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> <ol class="alphabet"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> (cssサンプル) li{ zoom:1; } ol { margin-left:30px; } .number li { list-style-type:decimal; } .alphabet li

    CSSサンプルプログ
    chips1029
    chips1029 2010/05/17
    zoom使用時にlist-styleがおかしくなるバグ
  • [CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス

    Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

    chips1029
    chips1029 2010/05/17
    ブラウザ間の差異をリセット
  • hail2u.net - Weblog - floatで並べたリストのセンタリング

    ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

    chips1029
    chips1029 2010/05/17
    listのセンタリング
  • 1