CSSで横並びのロールオーバーの表示がおかしいです
- 知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。
- 症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。オンマウスも効いていません。
- 使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。
- ベストアンサー
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;} ご指摘を宜しくお願いいたします。
- yoshi00623
- お礼率100% (1/1)
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
cssで閉じるところはしっかり閉じてみてはいかがでしょうか？
関連するQ&A
- cssを使ったロールオーバについて どちらの記述が良いでしょうか？
cssを使ったロールオーバについて どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。 とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- 【CSS】float横並びメニューに余白ができてしまいます
リストをfoat:leftさせ横並びのメニューを作っています．下記画像の赤枠の幅に（包含されているdivのボーダーを赤線にしています）メニューをぴったり収めたいのですが，左右に余白ができてしまいます． いろいろネット等で調べてみましたが原因がわかりません．ご教授よろしくおねがいします． ------CSSソース----------------------------------------------------- /*グローバルナビゲーション */ .globalnavi{ width:770px; height:30px; margin:0; padding:0; border:1px solid #cc0000; } .gloabalnavi ul{ height:30px; margin:0; padding:0; background:#ffffff; list-style:none; } .globalnavi li{ float:left; margin:0; padding:0; } .globalnavi span{ display:none; } .globalnavi a{ height:30px; display:block; background-repeat:no-repeat; } li#m1{ width:154px; background-image:url(../image2/menu1.gif); background-position:0px -30px; } li#m1 a{ background-image:url(../image2/menu1.gif); } li#m1 a:hover{ background-image:none; } li#m2{ width:154px; background-image:url(../image2/menu2.gif); background-position:0px -30px; } li#m2 a{ background-image:url(../image2/menu2.gif); } li#m2 a:hover{ background-image:none; } li#m3{ width:154px; background-image:url(../image2/menu3.gif); background-position:0px -30px; } li#m3 a{ background-image:url(../image2/menu3.gif); } li#m3 a:hover{ background-image:none; } li#m4{ width:154px; background-image:url(../image2/menu4.gif); background-position:0px -30px; } li#m4 a{ background-image:url(../image2/menu4.gif); } li#m4 a:hover{ background-image:none; } li#m5{ width:100px; background-image:url(../image2/menu5.gif); background-position:0px -30px; } li#m5 a{ background-image:url(../image2/menu5.gif); } li#m5 a:hover{ background-image:none; } ------------------------------------------------------------------ -----HTML ソース-------------------------------------------------- <div class="globalnavi"> <ul> <li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li> <li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li> <li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li> <li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li> <li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li> </ul> </div><!--div globalnavi finish--> ------------------------------------------------------------------
- ベストアンサー
- HTML
- ロールオーバーで画像がずれない方法
初めてWebサイトを作成しており、今はグローバルナビゲーションを作成していますが、ロールオーバーしたときに、位置が微妙にずれてしまいます。 ちなみに画像の作成は、フォトショップCS6で次のように作成しました。 (1)カンバスサイズを、幅800px、縦60pxで作成 (2)長方形ツールを使い、境界線ありの画像を5つ作成し、手動で横に整列させる。 ※一つ当たりのサイズは幅160px、縦30pxなので、全体の幅は800、縦30です。 (3)ロールオーバー用の画像のために、上記5つのボタンを複製し、色を変える (4)通常表示用とロールオーバー用の画像を、手動で上下に連結させる ※これで幅800px、縦60pxになったので、カンバスサイズと同じサイズになりました。 (5)手動にて連結した画像をカンバスサイズの位置に合わせる (6)テキストツールで会社概要など5つ作成し、上5つの画像の中心に合わせる (7)上5つにある会社概要などの文字を一括コピーする。 (8)一括コピーした文字を、手動で下5つの画像の中心へ合わせる ※大変でしたが、グリッド機能を使って、調整しました。 以上のような流れで全体のグローバルナビゲーションのボタンを作成し、そして次の用にHTMLとCSSを入力したのですが、ロールオーバーした時に、ボタンも文字も微妙にすれてしまいます。 フォトショップの使い方が悪いのか、HTMLとCSSの使い方が悪いのか、どちらなのかわかりません。 いろいろな方からご教示を頂きたいです。本当にお願い致します！！ <!-- /以下HTML --> <ul id="globalnavi"> <li id="menu1"><a href="#"></a></li> <li id="menu2"><a href="#"></a></li> <li id="menu3"><a href="#"></a></li> <li id="menu4"><a href="#"></a></li> <li id="menu5"><a href="#"></a></li> </ul> <!-- /以下CSS --> #globalnavi { margin: 0; padding: 0; } #globalnavi li { width: 160px; height: 30px; float:left; text-align: center; line-height: 3.5; margin:0; padding-left:0; } #globalnavi a { float:left; display: block; text-decoration: none; width: 160px; height: 30px; background-image: url(./img/menu-all.gif); background-repeat: no-repeat; margin:0; padding-left:0; } #menu1 a { background-position: 0px 0px; } #menu2 a { background-position: -160px 0px; } #menu3 a { background-position: -320px 0px; } #menu4 a { background-position: -480px 0px; } #menu5 a { background-position: -640px 0px; } #globalnavi a:hover { text-decoration: none; background-image: url(./img/menu-all.gif); background-repeat: no-repeat; margin:0; padding-left:0; } #menu1 a:hover { background-position: 0px -30px; } #menu2 a:hover { background-position: -160px -30px; } #menu3 a:hover { background-position: -320px -30px; } #menu4 a:hover{ background-position: -480px -30px; } #menu5 a:hover{ background-position: -640px -30px; }
- ベストアンサー
- CSS
- IEでCSSによる背景画像の高さが伸びる原因は？
2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。 ところが、高さ（hight）を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？ FIREFOXだと綺麗に表示されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style> <!-- * { margin:0; padding:0; } h2,ul { text-indent:-9999px; list-style:none; } h2 a { width:175px; height:28px; display:block; } ul a { display:block; width:175px; height:24px; } ul li { padding:0; margin:0; } .float_right { float:right; } .mgn_btm7 { margin-bottom:7px; } div#NAVIBAR { width:175px; margin-top:43px; height:398px; background-image:url(image/test-a.gif); background-repeat:no-repeat; border:1px #FF0000 solid; } h2 a:hover { background-image:url(image/test.gif); background-position:0 0; background-repeat:no-repeat; height:23px; } ul a:hover { background-image:url(image/test.gif); background-repeat:no-repeat; height:23px; } ul a#E:hover { background-position:0 -28px; } ul a#F:hover { background-position:0 -52px; } ul a#G:hover { background-position:0 -76px; } ul a#H:hover { background-position:0 -100px; } ul a#I:hover { background-position:0 -124px; } ul a#J:hover { background-position:0 -155px; } ul a#K:hover { background-position:0 -179px; } ul a#L:hover { background-position:0 -203px; } ul a#M:hover { background-position:0 -227px; } ul a#N:hover { background-position:0 -251px; } ul a#O:hover { background-position:0 -275px; } ul a#P:hover { background-position:0 -299px; } ul a#Q:hover { background-position:0 -323px; } ul a#R:hover { background-position:0 -347px; } ul a#S:hover { background-position:0 -371px; } --> </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>
- ベストアンサー
- HTML
- メニューをJavaScriptで一括更新させたい
いつもお世話になっております。 ページが増えてしまったので、 横並びのメニューをjavaScriptで一括更新できるようにしたいのですが、 JavaScriptが勉強不足でうまく記述できません。（これから勉強していくつもりです） 今回は急ぎのため時間がなく… どうかアドバイス等、記述を教えていただけないでしょうか？ 宜しくお願いいたします。 現在メニューはこのように１ページごと書いてあります。 <div id="globalnavi"> <ul> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">menu</a></li> <li id="menu4"><a href="#">menu</a></li> <li id="menu5"><a href="#">menu</a></li> <li id="menu6"><a href="#">menu</a></li> <li id="menu7"><a href="#">menu</a></li> </ul> </div> CSS↓----------------------------------------------- #globalnavi{ margin: 0; padding: 0; width: ***; height: 40px; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 100px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 40px; background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -100px 0;} #menu3 a{background-position: -200px 0;} #menu4 a{background-position: -300px 0;} #menu5 a{background-position: -400px 0;} #menu6 a{background-position: -500px 0;} #menu7 a{background-position: -600px 0;} #globalnavi a:hover{ background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -40px;} #menu2 a:hover{background-position: -100px -40px;} #menu3 a:hover{background-position: -200px -40px;} #menu4 a:hover{background-position: -300px -40px;} #menu5 a:hover{background-position: -400px -40px;} #menu6 a:hover{background-position: -500px -40px;} #menu7 a:hover{background-position: -600px -40px;}
- ベストアンサー
- JavaScript
- FireFoxでvisitedの表示不具合について
HTMLやCSSに知識がなく困っています。 質問をよろしくお願いいたします。 メニューバーには８つのボタンがあるのですが 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%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 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
- 幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・
お世話になります。 メニュー（リスト）のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。 マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー１</a></li> <li id="02"><a href="#">メニュ－２</a></li> <li id="03"><a href="#">メニュ－３</a></li> <li id="04"><a href="#">メニュ－４</a></li> <li id="05"><a href="#">メニュ－５</a></li> <li id="06"><a href="#">メニュ－６</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} （何か、他に必要な情報があれば、言ってください！）
- ベストアンサー
- CSS
- cssのfloatで右にメニューを出す方法を勉強し
cssのfloatで右にメニューを出す方法を勉強しています。 ヘッダの左にロゴ（クリックをするとTOPへ飛ぶ） 右にメニューを横並びで表示したいです。 ＿＿＿＿＿＿＿＿＿ ■ ■■■■ ロゴ メニュー ＿＿＿＿＿＿＿＿＿ のようにしたいのです。 例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、 メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると ☆★☆★css☆★☆★ /* abc */ #header ul.abc{ float:right; margin: 0 ; padding: 0 ; width: 400px; } #header ul.abc li { float:left; display: inline; } /* 01 */ #header ul.abc li.01 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.01 a { display: block; background: url(../img/01.jpg) no-repeat top left; } #header ul.abc li.01 a:hover { display: block; background: url(../img/01_om.jpg) no-repeat top left; /* 02 */ #header ul.abc li.02 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.02 a { display: block; background: url(../img/02.jpg) no-repeat top left; } #header ul.abc li.02 a:hover { display: block; background: url(../img/02_om.jpg) no-repeat top left; /* 03 */ #header ul.abc li.03 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.03 a { display: block; background: url(../img/03.jpg) no-repeat top left; } #header ul.abc li.03 a:hover { display: block; background: url(../img/03_om.jpg) no-repeat top left; /* 04 */ #header ul.abc li.04 { width:100px; height:50px; margin:0 0 0 0; } #header ul.abc li.04 a { display: block; background: url(../img/04.jpg) no-repeat top left; } #header ul.abc li.04 a:hover { display: block; background: url(../img/04_om.jpg) no-repeat top left; ☆★☆★html☆★☆★ <div id="header"> <div class="logo"><a href="">ロゴ</a></div> <ul class="menu"> <li class="01"><a href=""01</a></li> <li class="02"><a href="">02</a></li> <li class="03"><a href="">03</a></li> <li class="04"><a href="">04</a></li> </ul> <div class="clear"></div> </div> これは例なんですが、 この記述できると思ったのですが、うまくいかず困っています。 何か足りないのでしょうか？それともcssで何か勘違いをしているのでしょうか？ お手数をおかけしますが、ご教授お願いします。
- ベストアンサー
- CSS
- CSSロールオーバーについて教えて下さい。
CSSで横並びのメニューを作っているのですが、背景はそのまま表示され、a:hover時の画像がFirfoxだとずれてしまい、IEだと正しく表示されます。 以下、CSSですが、どこがいけないのでしょうか？ ご教授お願いします。 #gnavi { width: 600px; margin: 0; padding: 0; } #gnavi ul, #gnavi ul li { float: left; list-style-type: none; } #gnavi ul { width: 600px; height: 80px; background: url(./img/gnavi/g_navi.jpg) no-repeat; } #gnavi ul li a { display: block; width: 120px; height: 80px; text-indent: -9999px; font-size: 0; line-height: 0; } #gnavi ul li.gn01 a.active, #gnavi ul li.gn01 a:focus, #gnavi ul li.gn01 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat: no-repeat; background-position: left bottom; } #gnavi ul li.gn02 a.active, #gnavi ul li.gn02 a:focus, #gnavi ul li.gn02 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -120px -80px; } #gnavi ul li.gn03 a.active, #gnavi ul li.gn03 a:focus, #gnavi ul li.gn03 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -240px -80px; } #gnavi ul li.gn04 a.active, #gnavi ul li.gn04 a:focus, #gnavi ul li.gn04 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -360px -80px; } #gnavi ul li.gn05 a.active, #gnavi ul li.gn05 a:focus, #gnavi ul li.gn05 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -480px -80px; } ※メニューはw:600px h:160pxの画像にて背景を利用し各メニュー部分をスライドさせて表示をしようと考えております。 ※各メニューの大きさはw:120px h:80pxです。 以下、HTMLへのタグです。 <div id="gnavi"> <ul> <li class="gn01"><a href="#container" title="トップページ" class="active">トップページ</a></li> <li class="gn02"><a href="#container" title="サービス内容">サービス内容</a></li> <li class="gn03"><a href="#container" title="納品までの流れ">納品までの流れ</a></li> <li class="gn04"><a href="#container" title="会社概要">会社概要</a></li> <li class="gn05"><a href="#container" title="お問合せ">お問合せ</a></li> </ul> </div> 色々と試してはいるのですが、どうも表示が上手く行かず、もしかしたら自分で解決をしようと試み、初心？基本的なことを忘れて入るのではと思い、皆さんに構文を見て頂きご指摘を頂ければ幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- 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
お礼
丸一日苦戦していた事が凡ミスだったとは・・・ くだらない修正箇所への丁寧なご指摘ありがとうございました