枠線でメイン部分を囲み、フッターを一番下にもってくるには？

解決済

質問者：tresor_magic
質問日時：2006/09/25 21:38
回答数：3件

お世話になります。
標準モードで1pxの枠線を作り、一番下にフッターがくるようにしたいのですが、どうにも出来ません。
また、左メニューとメインの部分がズレてしまう事も修復できず悩んでいます。
なにかいい方法がないか、ご教授いただけると幸いです。

尚、テーブルは使わない方法でお願いします。
以下が途中までのソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">

</style></head>

<body>
<div id="flame">
<div id="header">ヘッダー</div>
<div id="content_right">メイン記事テキスト</div>
<div id="left">左メニュー部分</div>
</div>
<div id="footer">フッター</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (3件)

No.1

回答者： ICHI-yan
回答日時：2006/09/25 22:50

div#は、div #に

位置を指定するには「position」を学ばれるといいです。

また、divがどう取られているかを知るために、</style>の前に
div{border:#f00 solid 3px}
等、実際には使っていない色で枠を表示されると視覚的に理解できます。完成したら、
div{border:#f00 solid 3px}
は外せばいいので、お試しあれ。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
さっそくdiv{border:#f00 solid 3px}を挿入し
位置関係を把握してみました。

positionで絶対値により左メニューとメインを固定してしまうと
テキストを流し込んだらフッターに文字が被ってしまいました。

現状の
■
　■
のようにズレなくはなりましたが・・・
相対的にフッタがー下がっていくようにはならないのでしょうか・・・

通報する

お礼日時：2006/09/25 23:08

No.2

回答者： torayoshi
回答日時：2006/09/25 23:36

フッタは枠の外側なので、メインの記事がどんなに長文でも

それに伴って枠が下方に伸びるだけで、フッタはあくまで底辺に固定されるはずです。
実際にこちらでもやってみましたが、結果そのようになりました。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
「position」で固定したらやはりフッタにメインの文章が被ってしまいました。
お手数ですがお手本のソースを参考にさせていただけますか？

よろしくお願い致します。

通報する

お礼日時：2006/09/25 23:58

No.3ベストアンサー

回答者： torayoshi
回答日時：2006/09/26 01:19

#2です。

「position」の使い方が質問者さんと違うかも知れません。
「メイン記事テキスト」の部分は「ヘッダ」直下に張り付いてますので、
固定したのは「左メニュー部分」だけです。
それから「ヘッダ」、「左メニュー部分」及び、「フッタ」共に文字サイズ、ラインハイトなど固定したほうが良いかも知れません。
（閲覧環境に対応させるため）
これらは私独自の解釈で得た結果です。
なので参考にはならないと思いますが、一応貼っておきます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4#01 Transitional//EN"
"http://www#w3#org/TR/html4/loose#dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">

</style></head>
<body>
<div id="frame">
<div id="header">ヘッダー</div>
<div id="content_right">本文
</div>
<div id="left">左メニュー部分</div>
</div>
<div id="footer">フッター</div>
</html>

- 0
- 件

通報する

この回答へのお礼

たびたび恐れ入ります。
丁寧な解説にとても解りやすかったです。
文字サイズ、ラインハイトなど固定の件には、同意致します。

あれこれと作業していて左メニューのみの固定というということは
ヘッダー部分の仕様が変更になったりした場合、位置を微調整してあげれば大丈夫ということですね。

大変勉強になりました。
とても感謝しております。
本当にありがとうございます。

通報する

お礼日時：2006/09/26 01:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！