タグ

2009年8月4日のブックマーク (2件)

  • [CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

    Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その2つの不具合が無いものとなっています(IE7調べ)。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。

    kyaido
    kyaido 2009/08/04
  • [CSS]フロートしたナビゲーションを中央に配置するスタイルシート

    リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。 ナビゲーションのwidthは指定無しの成り行きです。 Centering Float Left Menus デモでは、CSSハックやinline-block, table/table-cellを使用せずに実装されています。 下記に、それをシンプルにしたデモをアップしました。 シンプルにしたデモ IE6/7/8beta2, Fx3, Op9.5, Safari3, Chrome1で正常に動作しました。IE5.5, Fx2はダメでした。 追記:その1 リストを内包するdivに「text-align:center;」をしたら、上記ブラウザ+Fx2に対応できました。 なんで、きくのだろう、、、? シンプルにしたデモ(Fx2対応) 追記:その2 「ふ」さんのコメントにより、Saf

    kyaido
    kyaido 2009/08/04