タグ

CSSに関するy-kawazのブックマーク (102)

  • CSSでお店のメニュー風なページを作成:phpspot開発日誌

    CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem

    y-kawaz
    y-kawaz 2007/12/03
    いつかどこかで使えそう
  • [CSS]高さの異なるカラムを揃えるスタイルシート | コリス

    Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

    y-kawaz
    y-kawaz 2007/10/25
    下側paddingを巨大にしてそれと同じ分マイナスmarginすると下に長い帯のようなDIVが3つ並ぶことになり、はみ出た分をコンテナのdivでoverflow:hiddenして無かったことにすることで高さを揃える仕組みか。これは上手いな。