cssでのヘッダー＋2カラム+フッターのレイアウトについて
- cssでヘッダー＋2カラム＋フッターのレイアウトを作成しようとしていますが、一部の表示が崩れてしまいます。
- 使用しているOSはmacOS9.2、ブラウザはIE5.0であり、レイアウトが正常に表示されない問題があります。
- htmlファイルとcssファイルを提供しましたが、解決方法が分からないため、助言を求めています。
- ベストアンサー
cssでのヘッダー＋2カラム+フッターのレイアウトについて
こんにちは。趣味のサイトをタグ打ち＋cssで作ってるのですが どうしても上手く行かない箇所があり、ご教授頂ければ、と思い、 投稿します。 私の使用しているOSはmacOS9.2、ブラウザはバグの多いIE5.0（苦笑） です。 レイアウトとしては最近よく見かける、ヘッダー＋2カラム＋フッター のような構図にしたいのですが、この様に崩れてしまいます。 http://meikyu.pop.cx/faq/test.gif ↑この、下の方の背景がヘッダの分だけ（？）白くなってるのを なんとかしたいのですが… （横のボーダーも途中で切れてしまってますし…） 記述した、htmlファイルと、cssファイルも上げてみました↓ htmlファイル http://meikyu.pop.cx/faq/ cssファイル http://meikyu.pop.cx/faq/main.css あちこちのcssリファレンスのサイト様等を参考に、2時間近く奮闘 しましたが、解決方法が分かりません。 解決方法でなくても、うちの環境では正常に見えるよ、 という報告だけでも頂けると嬉しいです。 どうかご助言よろしくお願い致します。
- nuts_001
- お礼率100% (1/1)
- ネットトラブル
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"><!-- *{ margin:0;} body,html{ height:100%;} body{ text-align:center; background:#ccc; } #con{ text-align:left; margin:0 auto; width:650px; height:100%; } #top{ width:100%; background:#f8f8ff;} #main{width:100%; background:#666; height:100%;} #le{ width:20%; float:left; } #ri{ width:79%; height:100%; float:right; border-left:dotted 1px; background:#fc3; } #foot{ background:#fcf; width:100%; text-align:right; } #top,#main,#foot{border: solid #000; border-width: 0 2px;} --></style> </head> <body> <div id="con"> <div id="top"><h1>top</h1></div> <div id="main"> <div id="le"><h2>le</h2></div> <div id="ri"><h2>ri</h2></div> </div> <div id="foot"><span>TOPへ</span></div> </div> </body> </html> right が真下に落ちていましたので、画像と同じように全面的に改良。 IE5,これは無視。それとheight:100%をどうするか？ 本来、コンテンツが多い場合は、不要なんだけど今回は画像通り設定。 コンテンツに合わせてheight:;を調整。min-height,程度でいいかも・・・ 右のrightにheight:100%を割り当てたら下部フッターがヘッドの枠分程度スクロールが必要。あとは、DOCTYPEをどうするかの問題やコンテンツの問題。 もっと複雑に書いたら可能でしょうが、そこまで必要ですか？。 本来ボーダーは、外周に設定するけど、heightの関係で部分設定。 不具合があれば簡単なHTMLなので適当に直して下さい。以上。
関連するQ&A
- CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
- css外部ファイル（ヘッダ、フッタ）の書き方
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- CSSで、ヘッダー、フッター、左カラムメニュー、の3要素をpositi
CSSで、ヘッダー、フッター、左カラムメニュー、の3要素をposition:fixed;（もしくは同じような動作でも可。）を実装しているサイトをご紹介いただけないでしょうか。 対応ブラウザはIE6です。 自分でも作ってみているのですが、IE6だと、 ウィンドウをリサイズした時にposition:fixed;した要素がずれたままだったり、 ウィンドウからはみ出したりしてしまいます。 多少のガタつきは許容できるのですが。。 css、、expression（ie独自機能の。）、javascriptと試しましたが万策尽きました。。 何卒、よろしくお願いします。
- ベストアンサー
- HTML
- CSS外部ファイル⇒ヘッダー＆フッター
こんにちは。 いまCSSファイルを使ってHPをキレイにしようと頑張っています。 そこで、教えて欲しいことがございます。 ワタシのHPは大きく分けて、ヘッター＆フッターと真ん中の３ブロクで分かれています。そのヘッダー＆フッター部分の画像と機能をそのままで複数ページにも適用させるようにしたいのです。 簡単に言いますと、indexにはリンクが沢山あり、そこから別ページに飛ぶようにしますが、そこで、ヘッダー＆フッターは同じ内容にしたいというものです。コノ場合はスタイルシートに何かを書き込むだけなのか、HTMLファイルを数の分だけイジルのでしょうか。 やり方がチンプンカンプンです。 どなたか教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？ 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
- ３カラムのレイアウトにおいて・・・
こんにちわ、サイトを趣味で作っている者です。 最近よくあるCSSでの３カラムレイアウトで作成してます。 上部にヘッダーその下にメニューとコンテンツ部分という構成ですが、 あるサイトにおいて、どのページを開いても、 ヘッダ部分とメニュー部分が表示されるようにアップしたので、 メニュー部分に追加があった時は、 全ページのメニュー部分を書き換えないといけない状態です。 １ページだけ更新したら良い様な作り方とか、 またアプリケーションってあるんでしょうか？ 大変な労力で困っています。 よろしくお願いします
- ベストアンサー
- HTML
- XHTML+CSSサイトで＜div＞の順序変更によるレイアウト崩壊
よろしくお願いいたします。 コンテンツ部分をmain、右側に帯をつくりsubとして２カラム（他ヘッダとフッタもあります）のサイトです。 XHTMLでdiv id="sub"部分を先に記述してしまったので、div id="main"部分と上下を入れ替えたところ、表示が大きく崩れてしまいました。CSSのfloatで左右指定の確認もしましたが、解決しません。 CSSについては初心者ですので、なにか重大なことを見落としているのかもしれません。教えていただけると助かります。どうぞよろしくお願いいたします..
- ベストアンサー
- CSS
- ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/ Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。
- ベストアンサー
- CSS
- CSSファイルの上手な使い方を教えて下さい。
現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。 私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。 この方法は非効率でしょうか？ 良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか？ この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか？
- ベストアンサー
- CSS
- CSSレイアウトの本当の正しいやり方
CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }
- ベストアンサー
- HTML
お礼
素早いお返事をありがとうございました！ 載せて頂いたソースをちょこちょこ弄って無事に組む事が出来ました！ 少し面倒ですがheightはページごとにpxで指定する事にしました。 min-heightはいいな、と思ったのですが現行使用されているブラウザには対応していないものも多い様なので…。 スクロールの事等、自分では失念してましたので非常に勉強になりました。 ありがとうございます。