プロが教える店舗&オフィスのセキュリティ対策術

まず、以下CSS
body { text-align:center; }

<! メインのフレーム指定>
#page {
width:760px;
margin:0 auto;
text-align:left;
}

<! ヘッダー及び横項目指定>
#header {
width:100%;
text-align:center;
height:65px;
}
#header2 {
width:750px;
line-height:35px;
background-color:#FF00FF;
}

<! 中央左右設定及び余白指定>
.pageyohaku { margin:0 10px; }
.main {width:570px; float:right; background-color:#E0FFFF;}
.submenu { width:170px; float:left; background-color:#FFC0CB;}
.c-both { clear:both; }

<! 下記記載事項枠指定>
.footer1 {width:100%;
text-align:left;line-height:15px;background-color:#24CF00;clear:both;}
.footer2 {width:100%;
text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;}

<! リンク指定>
.link {color:blue;}
---------------------------
次にhtml
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>ホームページ</title>
</head>

<body>
<div id=page>
<div id=header>
<p><img border="0" src="img/logo.gif" width="730" height="65"></p>
</div>
<div id=header2>
<p>このページはします</p>
</div>
<div class=pageyohaku>
</div><! pageyohakuの終わり指定>

<div class=main>
<p>本日はようこそ</p>
<p>本日はようこそ</p>
<p>本日はようこそ</p>
<p>本日はようこそ</p>
<p>本日はようこそ</p>
<p>本日はようこそ</p>
<p>本日はようこそ</p>

</div><! mainの終わり指定>

<! サブメニュー一覧>
<div class=submenu>
<p>リンク</p>
<p>リンク</p>
<p>リンク</p>
<p>リンク</p>
<p>リンク</p>
<p>リンク</p>
</div><! submenuの終わり指定>

<div class=c-both>
</div><! c-bothの終わり指定>


<div class=footer1>
最下層メニュー項目</p>
</div><! footer1の終わり指定>
<div class=footer2>
<p>コピーライト</p>
</div><! footer2の終わり指定>
</div><! Pageの終わり指定>
</body>
</html>

以上のように外部指定で作成したのですが760Pxよりブラウザの
幅を狭くするとレイアウトが崩れてしまいます。
何が悪いのでしょう、誰か教えてください。
大きすぎると左のリンクが外へはみ出る感じになりますが
とにかく幅は固定し、左右に分かれる「main」「submenu」を
Pageの枠にはめてブラウザのウィンドウを小さくしても
変化しない(崩れない)レイアウトを望みます。
調べてもほとんど同じ書き方で崩れないところもあるので
どこが悪いのかわかりません。
わかりやすいようにメモも付けて整理してみたのですが
どなたかお願いします。

A 回答 (4件)

#2です。


>左右どちらが長くなるにしろ最後を締めくくる
>良くあるコピーライトなどを記載して締めくくる感じにしたいです。

>リンクの方を右の記事の長さに
>htmlで無駄な改行以外に調整する手段はありませんか。

これらの補足は最初の質問内容と違っていますが・・・?

左右で高さをそろえるについては、私も過去に同じ質問をさせていただいたことがあるのでそちらを参照してください。

参考URL:http://oshiete1.goo.ne.jp/qa4222235.html

この回答への補足

確かにおっしゃるとおりですね。
http://oshiete1.goo.ne.jp/qa4251468.html
に新しく質問しました。
今回のことと総合的に教えて頂ければ幸いです。

補足日時:2008/08/14 20:46
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

お礼日時:2008/08/16 21:51

#2の補足です。


単にコメント部分の変更といっても、
<!-- -->→html
/* */→css
など、挿入場所によって違うので注意してください。

参考URL:http://allabout.co.jp/internet/hpcreate/closeup/ …

この回答への補足

下にIEでは一応行きましたが
短い方のリンク側の背景色が一番下まで行きません
よく左右のマージンで計算する方法
margin-left: 150pxなどで左の幅が150pxの時に
右の項目にこれを入れると可能とありますが、
上下(この場合下)に高さ指定は記事によって異なるので
出来ません
リンクの方を右の記事の長さに
htmlで無駄な改行以外に調整する手段はありませんか。
お願いします。

補足日時:2008/08/14 14:31
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

お礼日時:2008/08/16 21:50

コメント部分を


<! メインのフレーム指定>
から
/* メインのフレーム指定 */
などに変更してみてください。

この回答への補足

CSSの方のコメントをなおしたら左右の固定はうまくいきました。
しかし、htmlの方の
<div class=footer1>
最下層メニュー項目</p>
</div><! footer1の終わり指定>
<div class=footer2>
<p>コピーライト</p>
</div><! footer2の終わり指定>
</div><! Pageの終わり指定>
</body>
</html>
の所の2行(CSSではfooter1,footer2)のところが
左右の短い方(この場合リンク)にこの2行が行ってしまい
2行が右の「本日はようこそ」の下に隠れてしまいます。
これを下に持ってくるにはどうすればよいでしょうか
左右どちらが長くなるにしろ最後を締めくくる
良くあるコピーライトなどを記載して締めくくる感じにしたいです。
アドバイスお願いします。

補足日時:2008/08/14 14:17
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

お礼日時:2008/08/16 21:50

overflow: hidden; を指定しないとどんどんはみ出しちゃうんだな


こういうことか?

この回答への補足

どこの項目に付け加えればよろしいのでしょうか
CSSのことはわかりますが、
Pageか、clear:bothの指定で分岐したのを統合する
後でしょうか、それともHeaderの所ですか。
よろしくお願いします。

補足日時:2008/08/13 20:28
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
どこに付けても変化は見られませんでした。
何かこれに加えた記載をしなければならないのでしょうか。
自力でも様々なサイトを見て検討中ですがよろしくお願いします。
なお、サブメニューが下にきているのは、更新時にhtmlを見やすくするためです。

お礼日時:2008/08/14 12:14

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