解決済

clip!clip!
Ads By Google

またもや問題発生。サイドバーが記事本文にかぶさる。

4日前に「文字サイズがバラバラ」の件で質問した者です。こちらの回答のおかげで文字サイズは統一されました。一部不統一だった箇所も再編集で統一されました。ところが、今度は、ブラウザの文字サイズを「最大」にすると、サイドバーが記事本文にかぶさるようになってしまいました。これは、サイズを「最大」にしたときだけで、「大」や「中」では問題ありません。

どのようにしたら、上記の問題を解決できるのでしょうか。ご回答、よろしくお願いいたします。

ブログURL


2009-04-11 14:27の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(2)

2.

2009-04-12 04:25:01ベスト
>>#1
すいません、回答1の方法その1は、うまくいきませんね。
IEでの確認を怠っていました。

しかし、2つめの方法はうまくいくはずです。
2つめの方法に追加して、
#links{
  …
	position:absolute;/* こちらは既にある */
	left:320px;
}
のように#links に left:320px; を追加してみて下さい。
回答レベル : アドバイス

数値は、いろいろ調整してみましたが、ピタッとページに収まりません。それでデザインを新しくしました。とりあえず問題は無くなりました。

CSSに関して貴重なご教示どうもありがとうございました。

1.

2009-04-11 18:00:26
原因は、文字を大きく表示することによって、記事部分の幅が拡がり、
サイドバーが落ちてしまい、その表示位置が、サイドバーが無いものとして表示されるようになるためです。
(サイドバー自身は、絶対位置指定で表示されるためにかぶってしまいます)

1つの方法は、記事部分の幅を固定してやることです。
#content {
  …
  width:570px;
}
の様にwidth に横幅を指定してやります。
数値は適当に調整下さい。(内側(.blogなど)で指定されている幅や余白を含めることができる大きさでないといけません)

2つめの方法は、サイドバーと同じく位置を固定してやることです。
#content {
  …
  position:absolute;
  left:520px;
}
などと表示位置を固定してやります。
数値は適当に調整下さい。

3つめの方法は・・・
かぶってしまう程、大きくしたら読めないので、そのような操作はされない。
とタカをくくって、何もしない。smile
回答レベル : アドバイス
Ads By Google

コメント(5)

#1.  ルミコ
2009-04-12 00:03:47

ご回答いただいたとおりにやってみましたが、ブログに反映されません。IEの文字サイズを「最大」にしなければ問題ないので、もう、このままにしておこうかとも思います。

昨日、文字サイズを統一したときは、「最大」で見ても、サイドバーは落ちてなかったはずです。勝手に落ちたものは、また勝手に元どおりになるかも(笑)。

ブログとは関係ないページ(livedoorニュースなど)も「最大」で見ると、ところどころ文字が重なっていたりします。ブラウザに問題があるのでしょうかね。

#2.  BLUEPIXY
2009-04-12 04:31:29

>>#1
サイドバーが落ちる云々の話は、
・(本文記事の幅が拡がって)本来であれば落ちる
・落ちているものとして記事部分がレンダリング(描画構成)される
・サイドバーは、本来なら落ちている状態から絶対位置指定によって、元の位置に描画される。なので、記事位置まで拡がっている記事部分にかぶって位置づけされる
というようなことを(原因について)言っていて、こちらで拝見した状態がサイドバーが落ちている状態であるというように見えたのではありません。

#3.  ルミコ
2009-04-12 22:45:33

2つめの方法に、更に#linksのところでleft:320px;を追加してみましたが、ブログ本体とサイドバーが、かぶさりはしないものの、かなり右よりになってしまいました。数値の調整が適切ではないからでしょうか。

質問ばかりで申し訳ありません。

#4.  BLUEPIXY
2009-04-13 02:01:21

>>#3
数値については、こちらでは、適当に試してみただけなので、
細部位置については、数値を変えて微調整下さい。

#5.  BLUEPIXY
2009-04-15 02:55:50

うまくいきませんか、
やはりなかなか難しいものですね。

トラックバック(2)

トラックバックURL: