まず、以下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件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
#2です。
>左右どちらが長くなるにしろ最後を締めくくる
>良くあるコピーライトなどを記載して締めくくる感じにしたいです。
>リンクの方を右の記事の長さに
>htmlで無駄な改行以外に調整する手段はありませんか。
これらの補足は最初の質問内容と違っていますが・・・?
左右で高さをそろえるについては、私も過去に同じ質問をさせていただいたことがあるのでそちらを参照してください。
参考URL:http://oshiete1.goo.ne.jp/qa4222235.html
この回答への補足
確かにおっしゃるとおりですね。
http://oshiete1.goo.ne.jp/qa4251468.html
に新しく質問しました。
今回のことと総合的に教えて頂ければ幸いです。
No.3
- 回答日時:
#2の補足です。
単にコメント部分の変更といっても、
<!-- -->→html
/* */→css
など、挿入場所によって違うので注意してください。
参考URL:http://allabout.co.jp/internet/hpcreate/closeup/ …
この回答への補足
下にIEでは一応行きましたが
短い方のリンク側の背景色が一番下まで行きません
よく左右のマージンで計算する方法
margin-left: 150pxなどで左の幅が150pxの時に
右の項目にこれを入れると可能とありますが、
上下(この場合下)に高さ指定は記事によって異なるので
出来ません
リンクの方を右の記事の長さに
htmlで無駄な改行以外に調整する手段はありませんか。
お願いします。
No.2
- 回答日時:
コメント部分を
<! メインのフレーム指定>
から
/* メインのフレーム指定 */
などに変更してみてください。
この回答への補足
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行が右の「本日はようこそ」の下に隠れてしまいます。
これを下に持ってくるにはどうすればよいでしょうか
左右どちらが長くなるにしろ最後を締めくくる
良くあるコピーライトなどを記載して締めくくる感じにしたいです。
アドバイスお願いします。
No.1
- 回答日時:
overflow: hidden; を指定しないとどんどんはみ出しちゃうんだな
こういうことか?
この回答への補足
どこの項目に付け加えればよろしいのでしょうか
CSSのことはわかりますが、
Pageか、clear:bothの指定で分岐したのを統合する
後でしょうか、それともHeaderの所ですか。
よろしくお願いします。
ご回答ありがとうございます。
どこに付けても変化は見られませんでした。
何かこれに加えた記載をしなければならないのでしょうか。
自力でも様々なサイトを見て検討中ですがよろしくお願いします。
なお、サブメニューが下にきているのは、更新時にhtmlを見やすくするためです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
コードを書いて下さい( ; ; )...
-
CSSのtransform: translate(-50...
-
IE8ではtext-align: center;で...
-
aタグに直接style=""で:hoverを...
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
スタイルシートでh1の属性行間...
-
INPUT TEXT内の文字位置を指定...
-
FireFoxで見るとブラウザの幅に...
-
css。横並びBOXに長文textを流...
-
Firefox 横スクロールバーを表...
-
Formタグのブロックの高さについて
-
HTMLフォームのSELECTの幅を一...
-
pタグによる段落間のアキ調整...
-
div align="center"のalignは旧...
-
macとwindowsのレイアウト崩れ...
-
フッターだけが真ん中に行って...
-
なぜ左に寄っているの?
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
なぜ左に寄っているの?
-
INPUT TEXT内の文字位置を指定...
-
macとwindowsのレイアウト崩れ...
-
<legend>で表示されるタイトル...
-
端から端まで横線を引きたい
-
CSSの設定
-
css。横並びBOXに長文textを流...
-
chromeだけbody直下に空白が開く
-
cssの指定の横幅よりテキストが...
-
htmltとcssのコードで
-
Formタグのブロックの高さについて
-
CSS セルごとリンクにする際、...
-
ページを真ん中に持ってくるには?
おすすめ情報