フッタを常に下部に配置 - lucky bag
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、
Lucky bag::blog: CSSだけでドロップダウンメニュー
ナビゲーションのドロップダウンメニューは、JavaScript を使って実現出来ますが、スクリプトをオフにしてブラウジングしている人も居たりするんで、それを CSS だけでやってみた。今、チョロッとやってみただけなんで、微妙な感じかもしれませんが。（しかも、全然クロスブラウザじゃないし...） やり方としてはいくつかあると思うんですが、今回はサブメニューの表示・非表示をコントロールするために、疑似クラスの hover プロパティを リスト要素に使っています。なんで、hover プロパティをアンカー要素以外に適用出来ない IE なんかでは表示されないんで、あまり使えないかも:-P リストを横に並べる 元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の margin と padding を 0 にしています。 サ
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
Lucky bag::blog: dt と dd を横並びのサンプル その1
最初に全称セレクタを使って全ての要素を margin: 0; padding :0; line-height: 1.6; としている。 デフォルトの状態 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 case:1 float を使った方法 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
