- ベストアンサー
HPのバランスがぐちゃぐちゃになりました。添削してください
HPの更新状況の部分をスクロールにしたいと思い、<div>を使ってやってみたら下記のような状態になってしまいました。 正 http://leialoha.hannnari.com/ 誤 http://leialoha.hannnari.com/index.html ・上の青い部分が要りません。 ・左に寄ってしまってます。 ・画像の両脇が水色に変わってしまっています。 具体的にどの部分をどう変えたらいいのか教えていただけると助かります。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
http://leialoha.hannnari.com/index-1.html をチェックしました。 NEWSのスクロール用に付け足した（筈の）<head>内のCSSの定義が間違っている為ですね。 --------------------------------------------------------------------- 【誤】 --------------------------------------------------------------------- div { width: 400px; height: 150px; margin-bottom: 20px; border: 0px; padding: 5px 10px 5px 5px; background-color:#eaf1fa; } #mado { overflow: auto;} } --------------------------------------------------------------------- ・スクロールさせたい部分のマークアップが<div id="mado">だけの筈なのに、div { (略）}というこの定義の仕方だと、classやidセレクタを問わず、ファイル内の<div>タグ全てに対して"overflow: auto;"以外のプロパティが適用されてしまっています。<div>タグはNEWS以外の部分にも複数使用されているので、スタイルの適用を意図していない箇所まで影響を及ぼし、全体のレイアウトが崩れてしまうのです。idセレクタで定義し直さなければなりません。 ・最後に余計な閉じタグがあります。削除を。 ↓ --------------------------------------------------------------------- 【正】 --------------------------------------------------------------------- div#mado { width: 400px; height: 150px; margin-bottom: 20px; border: 0px; padding: 5px 10px 5px 5px; background-color:#eaf1fa; overflow: auto; } --------------------------------------------------------------------- それから、せっかくNEWSのところをスクロールされるのであれば、「NEWS」という見出しは<div id="mado">の外に置いておいた方がいいでしょう。スクロールに伴い、見出しも見えなくなってしまいますから。 セレクタに関するシンタックスを勉強して下さい。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
一部正しく記述がありましたので訂正します。 【誤】閉じタグ ↓ 【正】閉じ括弧"}" 失礼しました。
- abril
- ベストアンサー率69% (388/560)
> 正 http://leialoha.hannnari.com/ > 誤 http://leialoha.hannnari.com/index.html この2つは同一のコンテンツですが…？（前者は試しにindex.phpとかindex.aspとか付け加えてみましたけど、いずれもNot Foundだったので、ということはファイル形式はindex.htmlですよね、やはり）
補足
すみません、間違っていました。 文字化けしてしまうので、言葉で説明します。 上記２つは同一ですよね… 「正」はこれで正しいです。 「誤」のほうは「index-1.html」です。 よろしくお願いします。
お礼
見出しの置き場所のアドバイスまでありがとうございます。 完璧にできました。 感謝です。 本当にありがとうございました。