- 締切済み
ＣＳＳのフッター部分について
ＣＳＳ初心者です 今回外部ＣＳＳで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }
- milkyway01
- お礼率94% (217/230)
- CSS
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- nori_007
- ベストアンサー率35% (369/1048)
検証しました。 質問される際は、どのブラウザーで見え方がおかしくなったのか等の情報と、単に CSS だけで無くhtml を含め、完成した形で質問される事をお勧めします。まずは、検証ファイルをご確認ください。質問された、CSS に html と、DOCTYPE を付けたサンプルです。CSS は何も改変していません。 -- 検証ファイル -- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo</title> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; } --> </style> </head> <body> <div id="page"> <div id="head"> <p>ヘッダー</p> </div> <div id="main"> <p>メイン</p> </div> <div id="submenu"> <p>サブメニュー</p> </div> <div id="foot"> <p>フッター</p> </div> </div> </body> </html> -- 検証ファイル -- 上記のファイルで、Mac OS X safari、Windows XP で、IE6 で見てもレイアウトは崩れていません。submenu と main の width の数値もそのままです。 また、 #pagebody:after { display: block; clear: both; height: 0; visibility: hidden; } は、通称「clearfix」と言うハックです。ネットで検索されれば、色々解説されているサイトが多数あります。 また >submenuとmainの背景を縦はホームページによって長さが異なるため固定できません >最下層のフッターまで届かせるにはどうすればいいでしょうか。 上記の件に関しても、色々解説されているサイトが多くあります。一番簡単な方法は、#page のバックグランド画像で工夫するのが良いかもしれまません。後は入れ子にする方法もあります。 また、質問する際には、個別に質問される事をお勧めします。 「clearfix」や、高さ方向の件で、疑問がある場合は新規に質問される事をお勧めします。 まずは、検証ファイルをご確認ください。何が違うか検討してみてください。
- suzuko
- ベストアンサー率38% (1112/2922)
htmlは <div id="page"> <div id="head"></div> <div id="main"></div> <div id="submenu"></div> <div id="foot"></div> </div> となっているということですね。 まず、気にあるのはwidthが「main」＋「submenu」＝「page」になっているところですね。プラウザによっては「submenu」が「main」の下にくることになってしまいます。 「main」＋「submenu」＜「page」に数値を変えてください。 次に <div id="page"> <div id="head"></div> <div id="pagebody"> <div id="main"></div> <div id="submenu"></div> </div> <div id="foot"></div> </div> としてCSSに #pagebody:after { display: block; clear: both; height: 0; visibility: hidden; } と入れてください。^^
お礼
ご回答ありがとうございました
補足
ご回答ありがとうございます 何とかなりかけほぼ解決したのですが、少しなおしました。 *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 730px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 5px; background: #00CCFF; width: 565px; float: left; } div#submenu { width: 150px; margin: 0px; padding: 20px 5px; float: left; background: #00FF33; } div#pagebody:after { display: block; clear: both; height: 0; visibility: hidden; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; } としましたが、submenuとmainのところで小さくしたので mainの右側がPageで指定した背景になってしまいました これはよいのですが、そうするとsubmenuの左側も少し あけられればバランスがとれると思いまして伺います。 またpagebody:afterを追加した意味も教えてください。 さらにsubmenuとmainの縦の長さがfootまで届いていない方 (文字の行数が少ない方が余ってしまってそこだけ色がPage背景になります) submenuとmainの背景を縦はホームページによって長さが異なるため 固定できません 最下層のフッターまで届かせるにはどうすればいいでしょうか。 よろしくお願いします。 (ページの縦の長さは指定しなくても問題ないんです)
お礼
ご回答ありがとうございました
補足
大きな変化は見られませんが submenuとmainが左右逆になってしまいました。 これ以上詰めても内容が大きく変わってきてしまうので それぞれ個別に整理して質問することにします。 ありがとうございました