- ベストアンサー
firefoxにてページ内リンク時、div要素の一部が隠れる
http://fortest.coresv.net/ 上記のサイトで サイドメニューから、ページの中間にリンク移動すると、 見出し画像の付近が隠れてしまいます。 （win,macのfirefox使用時。winIE6では問題なし） どなたかCSSの修正方法をお教えいただけないでしょうか。 cssは以下を使用しています。 http://fortest.coresv.net/_css/test.css どうかおねがいします！
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
やってみましたが直りましたよ。 clearfixというのは:afterの部分と、#contentsLineと#contentsのoverflow:hidden;のことです。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
リンク先が、そこだとそうなります。A要素にborder: solid ip red;など枠を入れてデザインすると、よく分かるでしょう。 この場合、CSSではなくて、HTMLを修正するのが先です。href="mainにすると期待した位置に飛びます。 他にも気になるところがあるので ☆<a name=""></a>は使わず、idにしましょう。 <a>要素は内容を持つものです。 XHTMLでは、a nameは非推奨 ☆目的は分かりませんが、divの使い方が酷すぎます。 まるで、デザインするためだけにdivを多用しているようです。 div自体もブロック要素ですから、内容的に意味のあるものにして不必要なものはなくしましょう。 例)<div id="header">はヘッダ(見出し)でしょうからh1でマークアップすればよいです。 例)<div id="contentsLine"><div id="main">は重堆してます。一つでよい 例)<br />は、一つの段落ではあるけれど改行するところ(強制改行)で原則使わない。<br />何重にも書くのは良くありません。 <p></p>でマークアップする。マージンはスタイルシートで調整 下の例ではp+pで制御してある。 例) floatは制御が難しいので出来るだけ使わない。特に全体の配置には不向き 親ブロックをstatic以外に設定してabsoluteで 例) zoomはMS-IE用 例) pとdivはどちらもブロック要素ですが、divには何でも入れられる (pはinline要素のみ)ので、ここにpを入れ、ブロック内のpどおしは、 <br /><br /><br />ではなくp+pで制御しよう。 ★ユーザーエージェントが以前より多様になった現在では、幅の固定指定は出来るだけ避ける。ウィンドウ幅が1900近いワイドディスプレイもある一方で、いまだに800pxのものも多い。幅は固定しないほうが良い。 CSSの最大の特徴(カスケードやセレクタ)をうまく使いましょう。特に単純に.contentsではなく、body>div とするとclass="contents"なんてのは不要になる。 そうすると、HTMLソースも随分とシンプルになり、スタイルシートもメンテナンスしやすくなります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>テスト</title> <link rel="stylesheet" type="text/css" href="_css/test.css" /> <style type="text/css"> <!-- * {margin:0; padding:0;} body{font-size: 75%;color: #333333;background-color: inherit; padding: 0px 10%;} div#main{position:relative;border: solid 1px gray;margin: 80px 0px 0px 0px;} div.pLead{margin: 5px 0px 30px 10px;font-size: 130%;width: 75%;max-width: 800px; line-height: 140%;border: 1px solid #CCCCCC; background: url(http://fortest.coresv.net//_share/bg_side.gif) repeat-y right top; min-height: 200px;} div.pLead p{text-indent: 1em;margin: 0.5em;} div.pLead p+p{margin-top: 2em} h1{font-size: 1em;height: 80px;background-color: #EFEFEF;margin-bottom: 10px; font-weight: normal;} p.Logo{position: absolute;top:-80px;} div#main h2{font-size: 1.15em;margin: 1em 0px;} div#main div#side{display:block;position: absolute;top: 5px; right:2%;border: 1px solid red;width: 20%;} div#main div#side li{display: block;margin-bottom: 0.5em;} p.goPageTop{text-align: right;} --> </style> </head> <body> <!-- header --> <h1 id="top">ヘッダ</h1> <!-- /header --> <!-- main --> <div id="main"> <p class="Logo"><img src="http://fortest.coresv.net/title.gif" width="600" height="80" alt="" /></p> <h2>ああああ</h2> <div class="pLead"> <p> テキスト・・・【中略】・・・ </p> <p> テキスト・・・【中略】・・・ </p> <p> テキスト・・・【中略】・・・ </p> <p> テキスト・・・【中略】・・・ </p> </div> <h2>ああああ</h2> <div class="pLead"> <p> テキスト・・・【中略】・・・テキスト </p> <p> テキスト・・・【中略】・・・テキスト </p> </div> <h2 id="test">メニュー1</h2> <div class="pLead"> <p> テキス・・・【中略】・・・テキスト </p> <p> テキスト・・・【中略】・・・テキスト </p> </div> <!-- side --> <div id="side"> <ul> <li><a href="#test">メニュー1</a></li> </ul> </div> <p class="goPageTop"><a href="#top">上へ↑</a></p> <!-- /side --> </div> <!-- /main --> </body> </html>
お礼
ありがとうございます。 あくまでサンプルのソースなので不自然なところはありますが。。
書き忘れましたが両方消してみてください。
#contentsLineと#contents（それぞれの:afterにも）の両方にclearfixのテクニックが使われているのが気になります。 片方だけにすると解決されませんか？
お礼
ありがとうございます。 #contentsLine のclearfixを削除しましたが改善されないようですね。。 cssでなくhtmlの書き方に問題があるのでしょうか。
お礼
ありがとうございます。 背景画像の兼ね合いで、もうちょっと試してみる必要はありますが 解決への糸口をつかめました。