タグ

cssとwebデザインに関するsunnyboydesignのブックマーク (4)

  • TableとCSSいろいろ - DesignWalker

    TableとCSSいろいろ - DesignWalker
  • リスト全体の余白を調整する

    margin の値には auto(自動)を指定することもできます。 マージンとパディングの指定については、以下のページをご覧ください。 ボックスのマージン(外側の余白)を指定する ボックスのパディング(内側の余白)を指定する デフォルトの余白を取り除く方法 一般的なブラウザでは、リストの周囲に適度な余白が設定されています。 この余白を取り除きたい場合は、ul要素(またはol要素)に対して次のスタイルを設定します。 ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、少なくともリストマーカー1つ分以上の大きさが必要です。(以下は1つの目安です) ul要素に設定する場合 … 1em 程度 ol要素に設定する場合 … 1.5em ~ 2em 程度 マージンとパディングを 0 にして、左マージンにだけ上記の値を設定する、といった感じになります。 余白の比較 u

    リスト全体の余白を調整する
  • 画像とかの横にあるテキストを上下中央に

    ←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました! display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;

    画像とかの横にあるテキストを上下中央に
  • IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」

    >> 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6(Internet Exproler 6)ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な

    IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
  • 1