css画像置換を使ったロールオーバーボタンが表示されない
- ナビゲーションリストを作成しています。アンカーリンクしたテキストをindentで飛ばして背景画像を表示させ、マウスオーバーはa:hoverで背景画像を高さぶんずらして対応するタイプ、いわゆる画像置換式のロールオーバーボタンを作りました。
- 制作環境はMac OSX DreamWeaverCS3です。DreamWeaverの作成画面でこのボタン部分が空白で表示される事が気になっています。Firefox,safari,Operaではうまく表示されているのですが、windowsXP IE7で空白表示となります。
- ネット上のレンダリングサービスでは、windowsXP IE7でDreamWeaverの作成プレビューと同じように空白表示となってしまいます。友人のwindowsXP IE7では表示されているそうですが、ネット上のレンダリングサービスは不完全なので問題があるのかわかりません。
- ベストアンサー
css画像置換を使ったロールオーバーボタンが表示されない
ナビゲーションリストを作成しています。 アンカーリンクしたテキストをindentで飛ばして 背景画像を表示させ、マウスオーバーは a:hoverで背景画像を高さぶんずらして対応するタイプ、 いわゆる画像置換式のロールオーバーボタンを作りました。 制作環境はMac OSX DreamWeaverCS3です。 まず気になるのが、DreamWeaverの作成画面で このボタン部分が空白で表示される事です。 これはそんなものなのでしょうか。 Firefox,safari,Operaでうまく表示されていたので、 気にしないで制作を進めてきたのですが、 ネット上のレンダリングサービスでは、windowsXP IE7で DreamWeaverの作成プレビューと同じように空白表示となり、 もしや何か間違っているのではと思いはじめました。 ネット上のレンダリングサービスは不完全という話もあり、 友人のwindowsXP IE7では見えているそうなので 問題があるのかもわかりません。 よろしくお願いします。 a.bt1 { display:block; width:150px; height:50px; text-indent:-9999px; background:url(images/bt1.jpg) no-repeat; margin:10px 0px 0px 0px; float:left; overflow:hidden; } a:hover.bt1 { background-position:0px -50px; }
- takeetakee
- お礼率66% (96/144)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> 制作環境はMac OSX DreamWeaverCS3です。まず気になるのが、DreamWeaverの作成画面でこのボタン部分が空白で表示される事です。これはそんなものなのでしょうか。 当方が確認できたのはWindows XP上のDreamweaver8ですので多少環境が食い違いますが、やはり同じ様にtext-indentをマイナス値にした部分には何も表示されていなかったですね。この仕様が「そんなもの」なのかどうかはわかりかねますが…デザイン・ビュー画面での表示はあまり気にされない方が宜しいかと思います。CSSの仕掛けの凝り具合によっては、そこまで解釈しきれないのか、結構ぐっちゃぐっちゃな表示になるみたいですから。 > windowsXP IE7でDreamWeaverの作成プレビューと同じように空白表示となり、 以下のサンプルで当方のWindows XP上のIE7で閲覧する限りは、特に支障なく表示されていましたよ。 ※本件のDOCTYPE等不明でしたので、質問者様の過去の質問でのソースに準じました。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <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> <ul id="navi"> <li><a href="#" class="bt1">テキスト</a></li> </ul> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; } ul#navi { margin: 0; padding: 0; list-style: none; } ul#navi li { margin: 0; padding: 0; } a.bt1 { display: block; width: 150px; height: 50px; text-indent: -9999px; background: url(images/bt1.jpg) no-repeat; margin: 10px 0px 0px 0px; float: left; overflow: hidden; } a:hover.bt1 { background-position: 0px -50px; } ---------------------------------------------------------------------- > もしや何か間違っているのではと思いはじめました。 この検証結果や、このソース自体を見る”限りでは”特に間違った指定をしている様には見受けられませんが。
関連するQ&A
- cssで、一枚の画像でロールオーバーができない。
一枚の画像でロールオーバーさせたいのですが、 どうしてもうまくいきません； 全体 幅495px,高さ60px の画像。 幅99x30pxのボタンで、縦2,横5つ並んでいます。 縦１行目に、通常ボタンが横5つ。 縦２行目に、オンマウスボタンが横5つ。 nav1~nav5のボタンに、 通常は、１行目、１つ目のボタンが表示されていて、 オンマウスすると、画像が消えてしまいます。 わかる方、回答お願いします。 ■html <div id="globalnav"> <ul> <li id="nav1"><a href="#">a</a></li> <li id="nav2"><a href="#">b</a></li> <li id="nav3"><a href="#">c</a></li> <li id="nav4"><a href="#">d</a></li> <li id="nav5"><a href="#">e</a></li> </ul> </div> ■css #globalnav{ width:495px; height:30px; margin-left:305px; margin-top:70px; padding:0; } #globalnav ul{ list-style: none; margin:0; padding:0; } #globalnav li{ float:left; width:99px; margin:0; padding:0; text-indent:-9999px; } #globalnav li a{ display:block; text-decoration:none; width:99px; height:30px; background: url(rollover.gif) no-repeat; } /*通常*/ #nav1 a { background: 0 0; } #nav2 a { background: -99px 0; } #nav3 a { background: -198px 0; } #nav4 a { background: -297px 0; } #nav5 a { background: -396px 0; } /*オンマウス*/ #nav1 a:hover { background: 0 -30px; } #nav2 a:hover { background: -99px -30px; } #nav3 a:hover { background: -198px -30px; } #nav4 a:hover { background: -297px -30px; } #nav5 a:hover { background: -396px -30px; }
- ベストアンサー
- その他（プログラミング・開発）
- CSSでのロールオーバーについて
アメーバにてブログを作ろうと思い、実験用に作ってみました。 まずは自分の作って失敗したものを見てもらいたいのです。 ttp://ameblo.jp/bakasuke-11/ ですが、ここではページ中段にある次の記事へという部分をロールオーバー用の画像にしたのですがうまくロールオーバーできません。 よくブログなどでは使われていてたぶん出来ると思うのですが たとえばこのようにしたいのです。 ↓ ttp://ameblo.jp/sunsuntaiyo/ 自分のサイトではロールオーバーの部分は .topPaging{ margin: 0px auto 10px auto;/*注1*/ width:360px;/*全体の幅注2*/ position:relative; text-align:center; } .topPaging a.firstPage{/*最初のページへ*/ background:url(http://stat.ameba.jp/user_images/a0/a8/10081778130.gif) top center no-repeat; display:block; width:18px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; left:0px;/*左からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.previousPage{/*前のページへ*/ background:url(http://stat.ameba.jp/user_images/05/f6/10081778131.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; left:45px;/*左からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.nextPage{/*次のページへ*/ background:url(http://stat.ameba.jp/user_images/8e/fd/10081778132.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; right:45px;/*右からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.lastPage{/*最後のページへ*/ background:url(http://stat.ameba.jp/user_images/1e/78/10081778133.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; right:0px;/*右からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } としました。 どこが間違っていてどうすれば正常に動作するのが教えてもらいたいです。 長々と見にくいですが回答お願いします。
- 締切済み
- HTML
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- 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
- CSS ロールオーバーの画像が表示されません
CSSでロールオーバーのメニューを作りましたが、 画像が表示されません…参考書どおりに作っているはずなのですが… どなたかお知恵をお貸しください。 【css】 .menu { width:860px; height:70px; margin-top:5px; } .menu #visamadhi a {background-image:url(navi-aboutvisamadhi.gif);} .menu #kirei a {background-image:url(navi-kireininaritai.gif);} .menu #manabi a {background-image:url(navi-manSabitai.gif);} .menu #shiritai a {background-image:url(navi-jibunshiritai.gif);} .menu #shouhin a {background-image:url(navi-shouhin.gif);} .menu ul { margin:0; padding:0; } .menu li {list-style-type:none; float:left;} .menu li a { display:block; width:160px; line-height:70px; border: 1px solid #D8D1AD; text-indent:-9999px; margin-right:5px; margin-left: 5px; overflow: hidden; } .menu li a:hover {background-position:0px -80px;} 【html】 <div class="menu"> <ul> <li id="#visamadhi"><a href="">Visamadhiとは</a></li> <li id="#kirei"><a href="">きれいになりたい</a></li> <li id="#manabi"><a href="">学びたい</a></li> <li id="#shiritai"><a href="">自分を知りたい</a></li> <li id="#shouhin"><a href="">商品を使いたい</a></li> </ul> </div> 実際に作成したcssを格納しました。 以下URLよりダウンロードしていただけるとありがたいです。 http://firestorage.jp/download/7ebe12eca202b26ce2171225270a8ffe53c820e9
- 締切済み
- HTML
- CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。 作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!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> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
- IE9で画像のロールオーバーが上手く表示されない
CSSで一枚の画像のみを使用しロールオーバーをしてみたのですが、Google Chromeではなんとか再現できたものの、IE9で確認してみたところ、画像が全て同じ物（左上の画像）になっていました(マウスを乗せても変化なし) 初心者なので初歩的な部分でつまずいている可能性もあると思いますが、どうかよろしくお願いいたします 以下HTMLとCSSです <body> <ul id="globalnavi"> <li><a href="./info.html" target="main">info</a></li> <li><a href="./main.html" target="main">main</a></li> <li><a href="./blog.html" target="sub">blog</a></li> <li><a href="./link.html" target="main">link</a></li> <li><a href="./index.html" target="top">index</a></li> </ul> </body> #globalnavi,#globalnavi li{ display:block;list-style:none; margin: 0;padding: 0; width: 96px; } #globalnavi li{ width: 96px;height: 79px; display:inline-block; position:relative; } #globalnavi a { display: block; text-indent: -9999px; text-decoration: none; width:100%;height:100%; background: url(./img/1.png) no-repeat 0 0 ; text-decoration: none; } #globalnavi a[href="./info.html"] { background-position: 0px 0px; } #globalnavi a[href="./main.html"] { background-position: 0px -79px; } #globalnavi a[href="./blog.html"] { background-position: 0px -158px; } #globalnavi a[href="./link.html"] { background-position: 0px -237px; } #globalnavi a[href="./index.html"] { background-position: 0px -316px; } #globalnavi a[href="./info.html"]:hover, #globalnavi a[href="./info.html"]:focus { background-position: -96px -0px; } #globalnavi a[href="./main.html"]:hover, #globalnavi a[href="./main.html"]:focus { background-position: -96px -79px; } #globalnavi a[href="./blog.html"]:hover, #globalnavi a[href="./blog.html"]:focus { background-position: -96px -158px; } #globalnavi a[href="./link.html"]:hover, #globalnavi a[href="./link.html"]:focus { background-position: -96px -237px; } #globalnavi a[href="../index.html"]:hover, #globalnavi a[href="./index.html"]:focus { background-position: -96px -316px; }
- ベストアンサー
- CSS
- 画像のロールオーバーがずれてしまいます。（CSS）
テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。 しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像 （背景として設定しているもの）が微妙に１pxほど斜め下にずれて表示されてしまいます。 このような事を防ぐためにはどんな事に気を付ければ良いでしょうか？ ちなみに、ロールオーバー前の画像とロールオーバー後の画像２枚を 全く同じサイズにしています。 参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。 -------------------------------------------------CSS td.1{ background:url(image01.jpg) no-repeat; } td.1 a{ display:block; } td.1 a:hover{ background-color:transparent; } td.1 a:hover img{ visibility:hidden; } -------------------------------------------------HTML <table> <tr> <td class="1"> ←このtd内の画像 <a href="top.html"><img src="image01.jpg"></a> </td> <td> <a href="top02.html"><img src="image02.jpg"></a> </td> <td> <a href="top03.html"><img src="image03.jpg"></a> </td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- firefoxではcssで画像をプリロードができません
リンクの貼られた画像に触れると画像が変化させようと 以下のコードを使ってみました。 IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。 何かやり方があるのでしょうか？ ■html <p class="xxx"><a href="#">sample</a></p> ■css p.xxx{ background:url("img01/a_img.gif") no-repeat; } p.xxx a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px; } p.xxx a:hover{ background:none; }
- ベストアンサー
- CSS
- １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。
はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }
- 締切済み
- デザイナー・クリエイティブ職
お礼
確認作業までして頂きまして本当にありがとうございます。 DreamWeaverのプレビューはそこまで気にすることは無いんですね。 確認はネット上サービスに極力頼らずにやっていこうと思います。