タグ

floatとmarginに関するfukudamasa09のブックマーク (3)

  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス

    Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

    IE6でよく遭遇するCSSのバグとその解決方法 | コリス
  • ネガティブマージン 右側を固定幅にしたリキッドレイアウト - bnote

    floatを使った2段組で、右側が横幅固定で、左側が画面横幅の残りを可変でということをしたいとき、 どうしたら実現できるのでしょう。 例えば、左側を可変で右側を200pxとした場合、左側の width に100% - 200px と指定できれば問題ないのですが このような指定はできそうにありません。 これを解決する方法が ネガティブマージン になります。 [参考:Creating Liquid Layouts with Negative Margins] 可変にしたいほうの段のwidthを100%とし、marginをマイナスのピクセルを指定することによって リキッドレイアウト を実現することができます。 例えば、上記例のような場合、左側の段に width を 100% とし、margin-right を -200px と float:left を指定します。 左側の段の width は 1

  • CSS3対応、スタイルシートの記述で気をつけるべき19のポイント

    The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di

  • 1