• 締切済み

FireFoxでvisitedの表示不具合について

HTMLやCSSに知識がなく困っています。 質問をよろしくお願いいたします。 メニューバーには8つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。 何か解決法はありませんでしょうか? よろしくお願いいたします。 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>

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

 <li><a href="../new/top.html" target="main" class="c"></a></li>  両端に全角スペース・・・ これフレームですか? まず、ローカルで全て正しく構築(リンク関係、CSSも)出来てるか要確認。 動作確認はしていませんが、見た限りでは、 オモチャのようなメニューですが、その辺が出来ていれば、動作するはず。

md_fuji
質問者

お礼

ご返答有難うございます。 これはフレームのトップ部分です。 フレームでトップとメインとサイドがわかれています。 IEだとどこかのページに飛ぶ度にトップのボタンが ひとつずつ消えたりして困っています。 ご指摘頂いたリンク関係をもう一度見直してみます。 オモチャのようなのですね、全くの素人でしてお恥ずかしい限りです。 どうも有り難うございました。

関連するQ&A

  • 訪問済リンクを未訪問の状態に再び戻す方法

    質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 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の継承について...

    CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画(矢印)・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます) 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか? それとも根本的な何かを履き違えしているのでしょうか? 宜しくお願い致しますm(_ _)m

  • ページを開いた直後のサブメニューを非表示

    現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとCSSのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }

  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • <li>タグでメニューを作った場合

    横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか

    • ベストアンサー
    • CSS
  • Firefoxだとメニューバーが崩れてしまいます。

    movable typeでなんとかここまできました。 http://www.mamyu.jp これをFirefoxでみますと、メニューの部分だけ大幅に崩れてしまいます。 スタイルシートの問題だと思うのですが、 その部分は、 #nav { margin-left: 0; padding-left: 0; list-style-type: none; border-top: 0px solid #999999; border-right: 1px solid #999999; border-bottom: 1pxsolid #999999; background-image: url(images/beansmenu01.gif); background-repeat: repeat-x; background-position: bottom; height:25px; width: 849px; float: left; } #nav a { font-size: 12px; font-weight: bold; color: #0000CC; text-decoration: none; background-repeat: no-repeat; background-position: left top; display: block; height: 25px; width: 121px; padding-top: 6px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } #nav a:hover { color:#cc3300; background-repeat: no-repeat; } #nav li { float: left; width: 121; } としており、 テンプレート部分は、 <ul id="nav"> <li><a href="http://www.mamyu.jp/">TOP</a></li> <li><a href="http://www.mamyu.jp/000">ブログ</a></li> <li><a href="http://www.mamyu.jp/001">政治信条</a></li> <li><a href="http://www.mamyu.jp/002">プロフィール</a></li> <li><a href="http://www.mamyu.jp/003">政治家養成塾</a></li> <li><a href="http://www.mamyu.jp/007">競馬場問題</a></li> <li><a href="http://www.j-beans.jp">ホームページ</a></li> </ul> としております。 これでどうしてFirefoxだと大きく崩れてしまうのか。崩れない方法はないものかわからないままです。それぞれのメニューバーの左側にでる○印がなんとも邪魔なのです。。。。

  • CSSで横並びのロールオーバーの表示がおかしいです

    知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。 当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。 症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。 オンマウスも効いていません。 使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。 以下ソースです。 /*---HTML*/ <?xml version="1.0" encoding="shift_jis "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <title>###</title> </head> <body> <div id="main"> <div id="menu"> <ul> <li class="menu1"><a href="#">sample</a></li> <li class="menu2"><a href="#">sample</a></li> <li class="menu3"><a href="#">sample</a></li> <li class="menu4"><a href="#">sample</a></li> <li class="menu5"><a href="#">sample</a></li> </ul> </div> </div> </body> </html> /*---CSS*/ #menu{ width: 950px; height: 60px; margin-top: 20px; margin-bottom: 20px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; } #menu li{ width: 190px; margin: 0px; padding: 0px; float: left; text-indent: -9999px; } #menu a{ display: block; width: 100%; height: 60px; background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a{ background-position: 0px 0px;} .menu2 a{ background-position: -190px 0px;} .menu3 a{ background-position: -380px 0px;} .menu4 a{ background-position: -570px 0px;} .menu5 a{ background-position: -760px 0px;} #menu a:hover{ background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a:hover{ background-position: 0px -60px;} .menu2 a:hover{ background-position: -190px -60px;} .menu3 a:hover{ background-position: -380px -60px;} .menu4 a:hover{ background-position: -570px -60px;} .menu5 a:hover{ background-position: -760px -60px;} ご指摘を宜しくお願いいたします。

  • ドロップダウンの残像

    どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。

    • ベストアンサー
    • HTML
  • fire foxでリスト番号が表示されてしまう

    プルダウンメニューを使っていてリストマークを表示しない設定にしていますが、firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。原因が分かる方いらっしゃいましたら解決方法を教えてください。(下記は5つメニューがある中の3つ分のHTMLとCSSです。) <==HTML==> <div id="menu"> <ul class="main"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">トップ</a> </li> </ul> <ul class="main2"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">メニューのご紹介</a> <ol class="sub"> <li><a href="#">トップ</a></li> </ol> <ol class="sub2"> <li><a href="#">メニューのご紹介</a></li> </ol> </li> </ul> <ul class="main3"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">店舗のご案内</a> <ol class="sub3"> <li><a href="#">店舗のご案内</a></li> </ol> <ol class="sub4"> <li><a href="#">当店の歴史</a></li> </ol> <ol class="sub5"> <li><a href="#">ご予約</a></li> </ol> </li> </ul> </div> <==CSS==> /****全体位置の決定****/ #menu{ width:630px; height: 89px; float: left; z-index: 1000; margin-top: 20px; margin-left: 0px; padding-left: 0px; list-style-type: none; left: 4px; top: -12px; font-size: 0.8em; position:relative; } /****メインメニュー用スタイル****/ ul.main{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main2{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main3{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } /*通常時*/ .main li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main2 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main3 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } /*展開時*/ .main li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main>li.on{ overflow:visible;/*×*/ } .main2 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main2>li.on{ overflow:visible;/*×*/ list-style-type:none; } .main3 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main3>li.on{ overflow:visible;/*×*/ } /*リンクスタイル*/ .main a{ display:block; text-decoration:none; background-image: url(images/m_top.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main a:hover{ background-image: url(images/m_top-on.jpg); } .main2 a{ display:block; text-decoration:none; background-image: url(images/m_menu_list.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main2 a:hover{ background-image: url(images/m_menu_list-on.jpg); } .main3 a{ display:block; text-decoration:none; background-image: url(images/m_store.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main3 a:hover{ background-image: url(images/m_store-on.jpg); } /****サブメニュー用スタイル****/ ol.sub{ text-align:left; margin: 0px; padding: 0px; height: 40px; width: 126px; }

  • グローバルナビの画像のサイズ変更方法

    グローバルナビのサイズ指定をして大枠のwidthを1000pxにして、ひとつひとつのナビのサイズを200px×5で調節して1000pxでナビ同士の横の隙間を無くすように合わせたいです。 自分なりにやってみたのですが、どうしてもわかりません。 プログラミングをどのように変更すれば良いのでしょうか。よろしくお願いします。 html部分 <div id="globalnavi"> <nav> <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#">Portfolio</a></li> <li><a href="#"><span>Contact</a></li> </ul> </nav> </div> css部分 #globalnavi{ height:36px; width:1000px; margin-top:0px; margin-bottom:5px; background-color:white; } #globalnavi ul{ list-style-type:none; margin:0; padding:0; margin-top:1px; margin-bottom:4px; } #globalnavi li{ float:left; width:200px; height:20px; margin-bottom:10px; margin-top:5px; margin:0px; padding-left:10px; } #globalnavi a{ text-align:center; display:block; padding-top:8px; padding-bottom:15px; margin-bottom:-1px; width:160px; background-image:url(images/btn046_06.gif); background-repeat:no-repeat; color:blue; } #globalnavi a.home{ width:160px; background-image:url(images/btn046_05.gif); } #globalnavi a:hover{ background-image:url(images/btn046_10.gif); }

    • ベストアンサー
    • CSS

専門家に質問してみよう