- ベストアンサー
大至急！HPビルダー16の専門家に質問
- HPビルダー16の専門家に教えてほしいことがあります。自分でやっていてわからない部分があるため、教えていただけると助かります。
- フルCSSで作成したHPの左のサイドメニューのリストの画像と位置を変更しましたが、リストメニューのテキストがリンク先に飛ばせなくなりました。どうすればよいでしょうか？
- 変更前のページのタグと変更後のタグを添付しました。どちらから言えば良いのかわからないので、もし必要があれば追加のタグを教えてください。
- maki9091
- お礼率23% (22/92)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No1の回答者です。補足有難うございます。 ただ、検証した限り特にクリック範囲が狂うような事はないですね。 IE、グーグルクローム共にクリック範囲は正常です。 これ以外に、同一ページ内でタグそのものにCSSを反映させてませんか？ p全部とか、a全部とか、body全体とか。 あと多分、頂いたHTMLソースとCSSソースは、一部ですよね？ 表示がおかしい、という所だけのソースを抜粋したものだと思います。 何カラムのデザインか判りませんが、他にもヘッダメニュー部分や、 メインコンテンツや下部メニューなんかも同一ページにあると推測します。 じゃないと、このリストメニューで使われていないCSSが 含まれていることの説明がつきませんし。 このリストメニューを単体で動作させる限りは、別に異常がないようです。 ということは、それ以外のソースが干渉しているという事でしょう。 残念ながら、部分的にソースを頂いても判らない問題のようです。 1ページ丸ごとのHTMLとCSSが必要な様ですね。 そうはいってもまるまるここにUPするのは気が引けるでしょうから、 可能性としていくつか提示しますから確認してみて下さい。 考えられることは、他の要素との横幅縦幅が干渉している可能性と、 閉じタグを忘れたaやdivやspanが周囲に潜んでいる可能性ですね。 displayやfloatやclearがどこかのCSSで不適切、という可能性も十分にあります。 この二つの要素は隣り合っている要素と干渉しまくりますから。
その他の回答 (1)
- einn
- ベストアンサー率37% (671/1802)
ん…？ようは、リスト本文にはリンクのクリック判定が無く、 リストの下の空白スペースに謎のクリック判定がある、ということですか？ 今、変更後のHTMLをこちらのIEとグーグルクロームで検証しましたが、 リンクの範囲は普通に反映されておりますよ？ 変なところにリンクのクリック判定があるとか、そんなことも無いです。 なぜ私と貴方の結果が違うかおわかりでしょうか。 それは、貼られたソースだけではCSSの【内容】が書かれていない為、 本当の意味での動作検証が出来ないからです。 CSSの内容が書かれていないので、 私のブラウザではHTMLのみで検証することになります。 class名やid名だけでCSSが出来ていると思われているなら大間違いです。 HTMLだけで動かした場合にリンク範囲に異常が無いということは、 貼られたHTMLソースには問題が無いという事になります。 いや細かいことを言えば<li>タグにちゃんと終了タグ書こうよとか、 何でFドライブ内を指定した内部アドレス書いてあるんだろとか色々あるんですが、 現状問題があるのはCSSで間違いないでしょう。 <a>で囲んである範囲がリンク範囲になる、というのは鉄則です。 これはソースで守られていますし、普通に表示が出来るはずなんです。 それを邪魔しているのは、CSSの内容でしょうね。 あなたは質問に当たってミスをおかしました。 それはここに載せたソースがHTMLだけなので、これ以上回答ができない、という事です。 CSSのソースを貼って頂ければアドバイスのしようもあるんですが。
補足
知識不足で不愉快な思いをさせて申し訳ございません。 それでも、きちんとご指導いただき ありがとうございます。 ＣＳＳのソースは以下です。 これで具体的なアドバイス頂けるでしょうか？ #ranking { background-color: #eaffc8; border: 1px solid #a5df45; } #ranking h3 { text-align: left; color: #ffffff; font-size: 1em; line-height: 26px; margin-top: 0; margin-bottom: 0; padding-left: 5px; height: 26px; background-image : url(rankingBg_8Eb.png); background-position: left top; background-repeat: repeat-x; } #ranking img.new { float: left; margin-top: -10px; margin-right: 0; } #ranking ol { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 10px; padding-right: 5px; padding-bottom: 0; padding-left: 5px; list-style-type: none; } #ranking li { display: block; border-top-width: 1px; border-top-style: solid; border-top-color: #b1dd6c; padding-top: 5px; padding-bottom: 4px; text-align: left; padding-right: 5px; padding-left: 35px; line-height: 2; } #ranking li:first-child { border: none; } #ranking li img { vertical-align: text-top; } #ranking li#r01 { background-image : url(rankingNum_8Eb_01.png); background-position: left top; background-repeat: no-repeat; padding-bottom: 20px; } #ranking li#r02 { background-image : url(rankingNum_8Eb_02.png); background-position: left top; background-repeat: no-repeat; padding-bottom: 20px; } .ranking li#r03 { background-image : url(rankingNum_8Eb_03.png); background-position: left top; background-repeat: no-repeat; padding-bottom: 20px; } .ranking li#r04 { background-image : url(rankingNum_8Eb_04.png); background-position: left top; background-repeat: no-repeat; } .ranking li#r05 { background-image : url(rankingNum_8Eb_05.png); background-position: left top; background-repeat: no-repeat; }
補足
指導くださるなら全く気が引けるところではありません。 CSSのタグは必要ならまた数時間後にお伝えできます。 サイトのタグです。 多いので2つに分けます <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="Keywords" content=" 更年期 冷え症 生理不順 生理痛 自律神経失調症 美容はり "> <meta name="Description" content=" 女性が安心できる評判の鍼灸院 女性の健康管理お任せください"> <title> 女性に評判 【トップページ】</title> <link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts"> <link rel="stylesheet" href="container_8Eb_2c_top.css" type="text/css" id="hpbcontainer"> <link rel="stylesheet" href="main_8Eb_2c.css" type="text/css" id="hpbmain"> <link rel="stylesheet" href="user.css" type="text/css" id="hpbuser"> <meta name="google-site-verification" content="TWFIfp4YxHrxZRTgEZx1JnuhfT4tMNThbCl8DG_4mDI" /> </head> <body id="hpb-template-08-05b-01" class="hpb-layoutset-02"> <div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div> <!-- container --> <div id="hpb-container"> <!-- header --> <div id="hpb-header"> <div id="hpb-headerMain"> <h1> 摂津 高槻 等北摂全域から多数来院されています。</h1> </div> <div id="hpb-headerLogo"><a href="#" style="background-image : url(logo_8Eb1.png);"></a></div> <div id="hpb-headerExtra1"> <p class="tel"><span>電話でのお問い合わせは</span>072-629-1665</p> <p class="mail"><a href="http://form.os7.biz/f/4349fac5/">メールでのお問い合わせはこちら</a></p> </div> <div id="hpb-headerExtra2"><img src="image6.jpg" width="221" height="45" border="0" alt="受付時間 "></div> </div> <!-- header end --><!-- inner --> <div id="hpb-inner"> <!-- wrapper --> <div id="hpb-wrapper"> <!-- page title --> <div id="hpb-title"> <h2><span class="ja">30～50代の頑張る女性を応援します！！</span><span class="en"></span></h2> </div> <!-- page title end --><!-- main --> <div id="hpb-main"> <div class="hpb-parts-cnt-01 hpb-parts-cnt-style clearfix"> <h3>自分のこと後回しの、頑張り屋のお母さん その症状、ほっといて大丈夫ですか？</h3> <br> <br> <br> <img src="images/sympton_img11.gif" width="163" height="124" border="0"><img src="images/sympton_img15.gif" width="113" height="169" border="0"><img src="images/sympton_img14.gif" width="140" height="189" border="0"><img src="images/sympton_img09.gif" width="132" height="138" border="0"><br> <div class="hpb-parts-cbox-01 hpb-parts-cbox-style clearfix"><br> <br> <br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">よくイライラするようになってきた<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt="女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">お買い物が面倒で、食事も作りたくない<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt=" 女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">無理がきかなくなってきた<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt=" 女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり">朝起きて疲れが取れていない<br> <br> <img src="img_o059.gif" width="16" height="16" border="0" align="middle" alt=" 女性安心 更年期 冷え症 生理不順 自律神経失調症 美容はり ">物忘れが出てきた <br> <br> <br> <img src="images/image10.jpg" width="250" height="250" border="0"><br> <br>