ＣＳＳのフッター部分について

締切済

質問者：milkyway01
質問日時：2008/08/03 20:25
回答数：2件

ＣＳＳ初心者です
今回外部ＣＳＳで作成したのですが途中まではうまくいきました
しかし最後のフッターを入れるとレイアウトが崩れるのです。
今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： nori_007
回答日時：2008/08/04 10:59

検証しました。

質問される際は、どのブラウザーで見え方がおかしくなったのか等の情報と、単に CSS だけで無くhtml を含め、完成した形で質問される事をお勧めします。まずは、検証ファイルをご確認ください。質問された、CSS に html と、DOCTYPE を付けたサンプルです。CSS は何も改変していません。

-- 検証ファイル --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

<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">

</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」や、高さ方向の件で、疑問がある場合は新規に質問される事をお勧めします。

まずは、検証ファイルをご確認ください。何が違うか検討してみてください。

この回答への補足

大きな変化は見られませんが
submenuとmainが左右逆になってしまいました。
これ以上詰めても内容が大きく変わってきてしまうので
それぞれ個別に整理して質問することにします。
ありがとうございました

補足日時：2008/08/04 15:23

通報する

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました

通報する

お礼日時：2008/08/04 15:27

No.1

回答者： suzuko
回答日時：2008/08/03 21:42

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の背景を縦はホームページによって長さが異なるため
固定できません
最下層のフッターまで届かせるにはどうすればいいでしょうか。
よろしくお願いします。
(ページの縦の長さは指定しなくても問題ないんです)