こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSで左右の固定について

まず、以下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の枠にはめてブラウザのウィンドウを小さくしても
変化しない(崩れない)レイアウトを望みます。
調べてもほとんど同じ書き方で崩れないところもあるので
どこが悪いのかわかりません。
わかりやすいようにメモも付けて整理してみたのですが
どなたかお願いします。

投稿日時 - 2008-08-13 18:55:56

QNo.4249087

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

7人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

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

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

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

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

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

投稿日時 - 2008-08-14 17:34:50

補足

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

投稿日時 - 2008-08-14 20:46:44

お礼

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

投稿日時 - 2008-08-16 21:51:14

ANo.3

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

参考URL:http://allabout.co.jp/internet/hpcreate/closeup/CU20051006A/index.htm

投稿日時 - 2008-08-14 12:41:13

補足

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

投稿日時 - 2008-08-14 14:31:59

お礼

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

投稿日時 - 2008-08-16 21:50:50

ANo.2

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

投稿日時 - 2008-08-14 12:22:05

補足

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:23

お礼

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

投稿日時 - 2008-08-16 21:50:31

ANo.1

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

投稿日時 - 2008-08-13 19:11:30

補足

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

投稿日時 - 2008-08-13 20:28:33

お礼

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

投稿日時 - 2008-08-14 12:14:54

あなたにオススメの質問