自社Webページ内の階層リンクへ飛ばない

このQ&Aのポイント
  • 自社Webページ内の階層リンクへ飛ばなくなり困っています。ドリームウィーバーでページを構築していますが、気づいたら同サイト内のリンクに飛ばなくなっていました。
  • div#menu ulのCSSに問題があるかもしれません。liのリスト要素が抜けていたので追加しましたが、問題は解決していません。
  • 他のページへのリンク(別窓で開く)は問題なく機能しているようです。原因を特定できずに困っています。
回答を見る
  • ベストアンサー

自社Webページ内の階層リンクへ飛ばない

自社Webページ内の階層リンクへ飛ばなくなり困っています。 ドリームウィーバーでページを構築していますが、気づいたら同サイト内のリンクに飛ばなくなっていました。 <div id="menu"> <ul> <li><a href="#">トップページ</a></li> <li><a href="houjin.html">●●</a></li> <li><a href="tenpo.html">●●</a></li>     </ul> </div> div#menu ul { margin:0 auto; padding:10px 0; } div#menu li { font-size:85%;/* 12px相当 */ color:#2e2930; text-align:center; list-style-type:none; } div#menu li a { display:block; width:200px; color:#2e2930; line-height:60px; } /* マウスオーバー時 */ div#menu li a:hover { color:#f1f1f1; background:#2D2D2D url("img/bg_menu.gif") 0 0 repeat; } </li>が抜けていたので付け足しても変わりません。 他のページへのリンク(別窓で開く)は有効です。 考えられる原因を教えていただけると幸いです。 どうぞよろしくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • gachamuk
  • ベストアンサー率34% (28/81)
回答No.1

リンクのパスは正しいのでしょうか? 同じディレクトリでない場合は、パスを指定しないと ページが表示できないです。 一度、リンクを絶対パスで指定してみてはどうでしょうか?

kimi0108
質問者

お礼

回答ありがとうございます! よく確認してみると、URLはそれぞれのページになっていました。 ドリームウィーバーで修正していた際に、何かの拍子にメニュー以外がトップページと同じように上書きされてしまったようです。 以前のデータが突然なくなってしまい途方にくれていますが、この機会にページを新しく作り直します。 ありがとうございました。

その他の回答 (1)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

「リンクに飛ばなくなって」これって第三者が見てわかります? 実際のところ、どうなるの? 404エラーとか、クリックできないとか、無反応とか色々あるでしょうに。 「階層リンク」と書かれているのだから <li><a href="../">トップページ</a></li> <li><a href="../houjin.html">●●</a></li> <li><a href="../tenpo.html">●●</a></li> こんな感じじゃないかな、階層が違うのでしょう。

kimi0108
質問者

お礼

回答ありがとうございます!

関連するQ&A

  • cssでの擬似リンク(a:hover)の複数指定

    cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうkまく行きません。 FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。 ■css /* menu-1 */ #menu-1 { width: 200px; height: auto; margin: 0; padding:0; } #menu-1 ul.support, #menu-1 li.support { margin: 0; padding: 0; list-style: none; } #menu-1 li.support { width: auto; height: auto; padding: 5px 10px; } #menu-1 a, #menu-1 a:link, #menu-1 a:visited { padding: 0.2em 10px; height:1.4me; color: #ff0000; text-decoration: none; } #menu-1 a:hover { color: #9f0f0f; text-decoration: underline; } /* menu-2 */ #menu-2 { width: 200px; height: auto; } #menu-2 ul, #menu li.list1, #menu li.list2 { margin: 0; padding: 0; list-style: none; } #menu-2 ul li.list1, #menu-2 ul li.list2 { width: auto; height: auto; } #menu-2 ul li.list1 { font-weight: bold; } #menu-2 .list1 a, #menu-2 .list1 a:link, #menu .list1-s a:visited { text-decoration: none; color: #0e2159; } #menu-2 .list1 a:hover { color: #9f0f0f; text-decoration: underline; } #menu-2 li.list2 a, #menu-2 li.list2 a:link, #menu li.list2-s a:visited { text-decoration: none; color: #000000; } #menu-2 li.list2 a:hover { color: #9f0f0f; text-decoration: underline; } ■html <div id="menu-1"> <a href="#"> <ul> <li class="support">テスト</il> </ul> </a></div> <div id="menu-2"> <a href="#"> <ul> <li class="list1">スタイル1</il> <li class="list2">スタイル2</il> </ul> </a></div>

    • ベストアンサー
    • HTML
  • jqueryによるクリック時のclass名追加

    サイドバーのメニューをクリックした際にどのページか分かるように、クリックしたリンクの色を変えたいと思います。 例えばページAリンクをクリックした際にliタグにid=selectを追加し、 他のリンクにもしid=selectがついている場合は、削除するという処理を jQueryで行いたいのですが、どのように記述すればよろしいでしょうか? 分かる方、ご教授お願いします>< ■HTML ----------------------------------- <div id="sidebar"> <ul> <li><a href="">ページA</a></li> <li><a href="">ページB</a></li> <li><a href="">ページC</a></li> <li><a href="">ページD</a></li> </ul> </div> ■CSS ----------------------------------- #sidebar li a { color: #F00; } #select a { color: #0F0; }

  • CSS  IEバグ リストの後の隙間を消したい

    よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>

  • CSSの「a」と「a:link」の違いを教えてください。

    CSSでリストを横に並べて、グローバルナビゲーションを作っているのですが、aとa:linkの違いがわかりません。 例えばHTMLは以下のように <div id="gNavi"> <ul> <li><a href="../omotenashi.html">おもてなし</a></li> <li><a href="../stay.html">過ごし方</a></li> <li><a href="../rooms.html">客室</a></li> <li><a href="../facilities.html">館内施設</a></li> <li><a href="../dish.html">料理</a></li> <li class="last"><a href="../onsen.html">温泉</a></li> </ul> </div> CSSは #gNavi { height: 60px; width: 960px; margin-right: auto; margin-left: auto; } #gNavi ul { text-align: center; } #gNavi ul li { display: inline; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; width: 159px; float: left; } #gNavi ul li.last { border-right-style: none; } #gNavi ul li a { background-color: #F00; width: 159px; float: left; } #gNavi ul li a:hover { background-color: #09F; color: #FFF; width: 159px; float: left; } という風に書きますが(間違っているかもしれません。)、#gNavi ul li aを#gNavi ul li a:linkと書いてはいけないのでしょうか? aとa:linkの違いはなんですか?

    • ベストアンサー
    • HTML
  • xhtmlでページを作ったらcssのhoverの部分がFirefoxで

    xhtmlでページを作ったらcssのhoverの部分がFirefoxでは動くのにIEでは上手く動きません。 どうしたらいいのでしょうか? --xhtml-- <div class="menu"> <ul> <li><a href="#"target="content">link1</a><br/></li> <li><a href="#"target="content">link2</a><br/></li> <li><a href="#"target="content">link3</a><br/></li> </ul> </div> --css-- .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; }

    • ベストアンサー
    • HTML
  • 擬似フレームでのページ内リンクについて

    擬似フレームの横分割のレイアウトで、 左に位置固定された折りたたみ式メニュー 右にメイン画面を置いてあります。 左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。 どうやったらできるでしょうか? 折りたたみメニュー ・外部js function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } ・外部CSS body { font-size: 82%; color: #505050; position: relative; padding: 0px 20px 0px 150px; } #PAGETOP { margin: 0px auto; max-width: 700px; } #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } .box{ line-height: 1.2; background-color: #FFFFFF; border: 1px solid #000000; padding: 1em; margin-top: 0.5em; } #MEIN {line-height: 1.5;} 以下、text.htmlのソース ----------------------------------------- (中略) <body> <div id="PAGETOP"> <div id="HEADER"> (中略) </div> <!--  左メニュー  --> <div id="MENU"> <div class="box"> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー1</a></li> <div id="o0" style="display:none"> <ul> <li><a href="text.html#abc.html">ABC</a> <li><a href="text.html#def.html">DEF</a> </ul> </div> </div> </div> <!--  右メイン  --> <div id="MEIN"> <h2 id="abc">ABC</h2> (中略) <h2 id="def">DEF</h2> (中略) </div> <div id="FOOTER"> (中略) </div> </div> </body> 検討よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssで作成する多階層リスト

    こんにちは。 cssで ・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする ・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい 以上のように作成したいのですが、 そのcssの記述がわかりません。 色々サイトで探しましたが見つからず。。。 どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">TEST(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">TEST(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "MS Pゴシック", "MS PGothic", "MS UI Gothic", "MS ゴシック", "MS 明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※.子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }

  • cssのaリンクで、幅(width=)が設定できない。(FireFoxの場合)

    cssでサブメニューを作っているのですが、 <div id="menu_sub_other"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">PHOTOS</a></li> <li><a href="#">SPAIN</a></li> <li><a href="#">MAIL</a></li> </ul> </div> #menu_sub_other a { color:#183770; width:160px; text-align:left; text-decoration:none; margin : 0px 0 0 0; padding:3px 10px 3px 15px; font-weight:bold; } マウスhoverで背景の色が変わるようにしようとしているのですが、 aリンクのwidth:160px;とするとIEではきちんとすべて160pxと幅がそろうのですが、 FireFoxだとメニューのボタン名として入力した 文字分の幅しか得られません。 FireFoxで、aリンクの幅を文字数関係なくすべてそろえる方法はありますでしょうか?? ここ2,3日こんなことで悩んでいます。。(;_;) どうか、お返事よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 訪問済リンクを未訪問の状態に再び戻す方法

    質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン7つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul>  <li><a href="../new/top.html" target="main" class="c"></a></li>  <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>

  • 背景画像へのリンク

    CSSで背景画像をリンクさせているのですが 文字が出てきて困っています。 ソースは以下の通りです。 文字が出ないようにするにはどうしたらいいのでしょうか。 <div id="side"> <div class="menu_content"> <ul class="menu"> <li class="menu_top"><a href="index.html">トップページ</a></li></ul> </div> </div> .menu_content li{display:block; text-indent:-9999px; font-size:0px; width:206px;height:68px; text-indent:-9999px;} li.menu_top a{display:block; width:406px;height:128px; text-indent: -9999px; background:url("css/menu_top.gif") bottom left no-repeat;}

専門家に質問してみよう