忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[21] [20] [19] [18] [17] [16] [15] [14] [13] [12] [11

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

3段組・メインコンテンツリキッドレイアウトの作り方2

前回、このブログを作る際に用いた3段組リキッドレイアウトについての記事を書きましたが、
このソースは、IEの標準モードでは表示がうまくいかないことがわかりました。

XHTMLで作られているWebサイトのほとんどはXML宣言がない=標準モードであり、
HTMLで作られているサイトもほとんどがDOCTYPEでURL指定されている=標準モードです。

このブログはたまたま互換モードのDOCTYPEだったので事なきを得たのですが、
やはり標準モードバージョンもないと不便な気がしますので、
標準モードでもできる3段組メインコンテンツリキッドレイアウトを考えてみました。


基礎情報は
IE5 以上 (含む Macintosh 版) で min-width を実現する CSS ハック
からいただきました。

サンプルはこちらからご覧下さい。


やり方としては、
IE5 以上 (含む Macintosh 版) で min-width を実現する CSS ハック
のボックスの上に、右メニューと左メニューを絶対配置で乗せた感じになります。
ブログ内では表現できそうになかったので、詳しくはサンプルをご覧下さい。
サンプルは分かりやすいように背景色をつけています。

絶対配置でのレイアウトなので、
左右のメニューが真ん中のコンテンツよりも縦長になった場合に
フッターが左右のメニューに隠れてしまうというようなことが起きます。

制約はありますが、これもレイアウト手法の一つにならないでしょうか。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2017/03 »04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
忍者ブログ [PR]