CSSでロールオーバーボタンの修正方法
- CSSで作成したロールオーバーボタンがFirefoxでは正常に表示されるが、IEでは機能しない場合の修正方法について教えてください。
- IEでCSSで作成したロールオーバーボタンがうまく表示されない問題が発生しています。どのように修正すればよいでしょうか？
- CSSで作成したロールオーバーボタンがFirefoxでは正常に表示されるのに対し、IEではロールオーバーが機能しない問題が発生しています。修正方法を教えてください。
- ベストアンサー
CSSでロールオーバーボタン。IEで表示されるようにするには？
CSSでロールオーバーボタンを作っています。 Firefoxだと問題なく表示されるのですが、IEだとロールオーバーしてくれません。 どのように修正すればよいのでしょうか？ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font-family: ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3; color: #FFFFFF; background-color: #c5003f; background-image: url(../images/bg.jpg); background-repeat: no-repeat; margin:0; padding:20px; } #fsize { float:right;} #fsize div { margin:0; } #fsize a { display:block; background-repeat:no-repeat; } #fsize a img { border:none; } #fsize_l { background-image:url(../images/b_fsize_l_f2.jpg); float:left; } #fsize_m { background-image:url(../images/b_fsize_m_f2.jpg); float:left; } #fsize_s { background-image:url(../images/b_fsize_s_f2.jpg); float:left; } #fsize a:hover { background-color:#FFFFFF; } #fsize a:hover img { visibility:hidden; } --> </style></head> <body> <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'"><img src="../images/b_fsize_l.jpg" alt="*" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'"><img src="../images/b_fsize_m.jpg" alt="*" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'"><img src="../images/b_fsize_s.jpg" alt="*" width="29" height="25" /></a></div> </div> </body> </html>
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは a:hoverを使用してのロールオーバーの場合には『href=""』が必要になります <a href="#"> だとか <a href="javascript:void(0);"> といった感じで
関連するQ&A
- 文字サイズ変更ボタンでサイズが思うように制御できません
文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> 元々の文字サイズは％で制御しているのですが、大→中（＝標準）に戻した時、元々のサイズとは異なるサイズになってしまいます。 どうしてでしょうか？ 標準サイズを100％とし、中サイズも100％と記述しています。
- ベストアンサー
- HTML
- 文字サイズを変更できない
web制作していて、文字サイズ変更の機能をつけました。 * * * * * * * * * * * * * * * * <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> </div> * * * * * * * * * * * * * * * * IEとfirefoxで確認したところ、問題なくサイズ変更されていたんですが、制作を進めていったら、いきなり変更しない箇所がでてきてしまいました。 全体のフォント指定はemでやっています。 何が原因なのでしょうか？ 言葉足らずな部分があるかもしれませんが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- XTHML CSSのロールオーバーについて
現在CSSにてロールオーバー方法についてどちらを選択する方が正しいでしょうか？ 通常は一般的な一枚の画像を用意して上下に重ねあわせてhover時に下へ移動させる方法。 ＜画像名：gazo.jpg サイズ：200x300 ID:menu>とします。 もう１つは 予め<div id="menu"></div>で枠を設定しておき 本来のjavascript通り2枚の画像を上下に組み合わせることなく実現する方法。 #menu { height: 300px; width: 200px; float: left; } #merchandise a{ float: left; height: 300px; width: 200px; margin-top: 0px; background-image: url(images/gazo.jpg); background-repeat: no-repeat; } #merchandise a:hover{ float: left; height: 300px; width: 200px; margin-top: 0px; background-image: url(images/gazo-f2.jpg); background-repeat: no-repeat; } 前者の方はWeb上にいくつか出回っておりますが、後者の方は偶然発見しました。やはり前者の方が手間がかからなくて良いでしょうか？ あなたならどっちでしょうか？
- ベストアンサー
- HTML
- xhtml+cssでロールオーバーがうまく動作しない
以下挑戦したのですが、うまくいかないので、 こちらで質問させていただきました。 すいませんが、わかる方教えていただけませんでしょうか。 xhtml+cssでhpコーディングしてみたのですが、ロールオーバーがうまく動作しないのです。 レイアウトもCSS 再度にメニュー項目をCSSで作りました。 以下が htmlの記述です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テストテストテストテスト</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>id "header" の内容がここに入ります</h1> </div> <div id="contents"> <div id="sidenavi"> <h2 id="sn1"><a href="#"><em>TOP</em></a></h2> <h2 id="sn2"><a href="#"><em>テスト</em></a></h2> <h2 id="sn3"><a href="#"><em>テストテスト</em></a></h2> <h2 id="sn4"><a href="#"><em>リンク集</em></a></h2> </div> ************ 以下は、cssのコードです。 /*ここからサイドナビ指定*/ #contents #sidenavi { background: #99CC66 url(images/bg_19.jpg) repeat; margin: 0px; padding: 15px 0px 0px 5px; height: 1100px; width: 190px; float: left; } #contents #sidenavi h2 { font-size: 9px; float: left; margin: 0px; padding: 0px; } #sidenavi h2 a { text-decoration: none; display: block; height: 56px; width: 182px; margin: 0px; padding: 3px 0px 3px 3px; color: #0000CC; visibility: hidden; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #sidenavi em { visibility: hidden; } /*サイドナビ1番目*/ #sidenavi h2#sn1 { background: url(images/navi_06.jpg) no-repeat; } #sidenavi h2#sn1 a:hover,#sidenavi h2#sn1 a:active { background: url(images/navi_ov_06.jpg) no-repeat; } /*サイドナビ2番目*/ #sidenavi h2#sn2 { background: url(images/navi_12.jpg) no-repeat; } #sidenavi h2#sn2 a:hover,#sidenavi h2#sn2 a:active { background: url(images/navi_ov_12.jpg) no-repeat; } /*サイドナビ3番目*/ #sidenavi h2#sn3 { background: url(images/navi_14.jpg) no-repeat; } #sidenavi h2#sn3 a:hover,#sidenavi h2#sn3 a:active { background: url(images/navi_ov_14.jpg) no-repeat; } /*サイドナビ4番目*/ #sidenavi h2#sn4 { background: url(images/navi_16.jpg) no-repeat; } #sidenavi h2#sn4 a:hover,#sidenavi h2#sn4 a:active { background: url(images/navi_ov_16.jpg) no-repeat; } /*ここまでサイドナビ指定*/
- ベストアンサー
- その他([技術者向] コンピューター)
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- IE5*でもCSSで画像を横に並べる方法を・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。
- 締切済み
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- IE6とXHTML+CSS
外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。 <XHTML> <div id="sabNavi"> <ul> <li class="smenu01"><a href="#">サイトマップ</a></li> <li class="smenu02"><a href="#">プライバシーポリシー</a></li> <li class="smenu03"><a href="#">お問合せ</a></li> </ul> </div> <外部スタイルシート> #sabNavi{ width:300px; } #sabNavi a{ height:20px; display:block; text-indent:-9999px; } #sabNavi a:hover{ background-position:0 -20px; } .smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; } .smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; } .smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; } .smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; } .smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; } .smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }
- 締切済み
- HTML
- 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
- safariだけcssが反映されない
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" 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="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css（以下）を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？
- ベストアンサー
- HTML
お礼
ありがとうございます！ あんなに悩んでいたのに、一瞬で！しかも簡単に解決することができました！ とっても勉強になりました。