ようこそ ゲスト さん、新規登録(無料)して気になる疑問を解決しませんか?

質問

質問者:hawaii99 HPのバランスがぐちゃぐちゃになりました。添削してください
困り度:
  • すぐに回答を!
HPの更新状況の部分をスクロールにしたいと思い、<div>を使ってやってみたら下記のような状態になってしまいました。

正  ​http://leialoha.hannnari.com/
誤  ​http://leialoha.hannnari.com/index.html

・上の青い部分が要りません。
・左に寄ってしまってます。
・画像の両脇が水色に変わってしまっています。

具体的にどの部分をどう変えたらいいのか教えていただけると助かります。
よろしくお願いします。
質問投稿日時:08/04/04 00:09
質問番号:3920299
この質問に対する回答は締め切られました。
最新から表示回答順に表示良回答のみ表示

回答

 

回答者:abril 一部正しく記述がありましたので訂正します。

【誤】閉じタグ

【正】閉じ括弧"}"

失礼しました。
種類:回答
どんな人:専門家
自信:参考意見
回答日時:08/04/05 00:07
回答番号:No.3
この回答へのお礼見出しの置き場所のアドバイスまでありがとうございます。
完璧にできました。
感謝です。
本当にありがとうございました。

回答

良回答20pt

回答者:abril 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">の外に置いておいた方がいいでしょう。スクロールに伴い、見出しも見えなくなってしまいますから。

セレクタに関するシンタックスを勉強して下さい。
種類:回答
どんな人:専門家
自信:参考意見
回答日時:08/04/04 21:13
回答番号:No.2
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 

回答者:abril > 正 ​http://leialoha.hannnari.com/
> 誤 ​http://leialoha.hannnari.com/index.html

この2つは同一のコンテンツですが…?(前者は試しにindex.phpとかindex.aspとか付け加えてみましたけど、いずれもNot Foundだったので、ということはファイル形式はindex.htmlですよね、やはり)
種類:補足要求
どんな人:専門家
自信:参考意見
回答日時:08/04/04 13:42
回答番号:No.1
この回答への補足すみません、間違っていました。

文字化けしてしまうので、言葉で説明します。
上記2つは同一ですよね…
「正」はこれで正しいです。
「誤」のほうは「index-1.html」です。

よろしくお願いします。
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示回答順に表示良回答のみ表示