- 締切済み
ＣＳＳで左右の固定について
まず、以下ＣＳＳ 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> <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> 以上のように外部指定で作成したのですが７６０Pxよりブラウザの 幅を狭くするとレイアウトが崩れてしまいます。 何が悪いのでしょう、誰か教えてください。 大きすぎると左のリンクが外へはみ出る感じになりますが とにかく幅は固定し、左右に分かれる「main」「submenu」を Pageの枠にはめてブラウザのウィンドウを小さくしても 変化しない(崩れない)レイアウトを望みます。 調べてもほとんど同じ書き方で崩れないところもあるので どこが悪いのかわかりません。 わかりやすいようにメモも付けて整理してみたのですが どなたかお願いします。
- milkyway01
- お礼率94% (217/230)
- CSS
- 回答数4
- ありがとう数11
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- font_color
- ベストアンサー率45% (24/53)
＃2です。 >左右どちらが長くなるにしろ最後を締めくくる >良くあるコピーライトなどを記載して締めくくる感じにしたいです。 >リンクの方を右の記事の長さに >htmlで無駄な改行以外に調整する手段はありませんか。 これらの補足は最初の質問内容と違っていますが・・・？ 左右で高さをそろえるについては、私も過去に同じ質問をさせていただいたことがあるのでそちらを参照してください。
- font_color
- ベストアンサー率45% (24/53)
＃２の補足です。 単にコメント部分の変更といっても、 <!-- -->→html /* */→css など、挿入場所によって違うので注意してください。
お礼
ご回答ありがとうございます。
補足
下にＩＥでは一応行きましたが 短い方のリンク側の背景色が一番下まで行きません よく左右のマージンで計算する方法 margin-left: 150pxなどで左の幅が１５０pxの時に 右の項目にこれを入れると可能とありますが、 上下(この場合下)に高さ指定は記事によって異なるので 出来ません リンクの方を右の記事の長さに htmlで無駄な改行以外に調整する手段はありませんか。 お願いします。
- font_color
- ベストアンサー率45% (24/53)
コメント部分を <! メインのフレーム指定> から /* メインのフレーム指定 */ などに変更してみてください。
お礼
ご回答ありがとうございます。
補足
CSSの方のコメントをなおしたら左右の固定はうまくいきました。 しかし、htmlの方の <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> の所の２行(CSSではfooter1，footer2)のところが 左右の短い方(この場合リンク)にこの２行が行ってしまい ２行が右の「本日はようこそ」の下に隠れてしまいます。 これを下に持ってくるにはどうすればよいでしょうか 左右どちらが長くなるにしろ最後を締めくくる 良くあるコピーライトなどを記載して締めくくる感じにしたいです。 アドバイスお願いします。
- maman53
- ベストアンサー率18% (30/161)
overflow: hidden; を指定しないとどんどんはみ出しちゃうんだな こういうことか？
お礼
ご回答ありがとうございます。 どこに付けても変化は見られませんでした。 何かこれに加えた記載をしなければならないのでしょうか。 自力でも様々なサイトを見て検討中ですがよろしくお願いします。 なお、サブメニューが下にきているのは、更新時にhtmlを見やすくするためです。
補足
どこの項目に付け加えればよろしいのでしょうか ＣＳＳのことはわかりますが、 Pageか、clear:bothの指定で分岐したのを統合する 後でしょうか、それともHeaderの所ですか。 よろしくお願いします。
お礼
ご回答ありがとうございます。
補足
確かにおっしゃるとおりですね。 http://oshiete1.goo.ne.jp/qa4251468.html に新しく質問しました。 今回のことと総合的に教えて頂ければ幸いです。