- ベストアンサー
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; }
- waltz_love
- お礼率63% (24/38)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
はじめまして。 疑問はすでに解決しましたでしょうか？ まだでしたら参考にしてください。 多分FIRE FOXで見れて、IEはだめ、は background:url(navi.gif)no-repeat; この部分のno-repeat直前の半角スペースがないのが問題ではないでしょうか？ 正：background:url(navi.gif) no-repeat; 自分で試してみましたがうまくいきました。 画像は300×60でいいですよね？（300×30と書いていましたが・・・） 高さ60のうち、上30ピクセルに通常時の画像を。下30ピクセルにhover時の画像を用意し、以下のソースで表示されます。 --------------------------------------------------------------- /* 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; text-indent:-9999px; } .globalnavi li a{ width:100px; height:30px; display:block; } li#btn01{ background:url(navi.gif) 0 0 no-repeat; } li#btn01 a:hover{ background:url(navi.gif) 0 -30px no-repeat; } li#btn02{ background:url(navi.gif) -100px 0 no-repeat; } li#btn02 a:hover{ background:url(navi.gif) -100px -30px no-repeat; } li#btn03{ background:url(navi.gif) -200px 0 no-repeat; } li#btn03 a:hover{ background:url(navi.gif) -200px -30px no-repeat; } --------------------------------------------------------------- なるべく簡潔なソースになるよう頑張ってください！ CSSってパズルみたいですよね。やってて楽しいです。
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは こういうことですか? <style type="text/css"> .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li{ display:block; float:left; list-style-type:none; width:100px; height:30px; margin:0px; padding:0px; } .globalnavi a{ display:block; width:100px; height:30px; background-image:url(navi.gif); background-repeat:no-repeat; } .globalnavi #btn01 a{ background-position: 0px 0px; } .globalnavi #btn02 a{ background-position: -100px 0px; } .globalnavi #btn03 a{ background-position: -200px 0px; } .globalnavi #btn01 a:hover{ background-position: 0px -30px; } .globalnavi #btn02 a:hover{ background-position: -100px -30px; } .globalnavi #btn03 a:hover{ background-position: -200px -30px; } </style> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト1</a></li> <li id="btn02"><a href="#">リスト2</a></li> <li id="btn03"><a href="#">リスト3</a></li> </ul> </div>
><li id="btn01"> .globalnavi li と .globalnavi li#btn01 が別物扱いになってるからでは？ っていうか#付きのIDのcssはこうじゃない？ #btn01 .globalnavi li
関連するQ&A
- グローバルナビの画像のサイズ変更方法
グローバルナビのサイズ指定をして大枠の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
- 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の左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- 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についての質問です
下記のプログラムについて解らないのですが、containerの内のh1と ulの位置関係ですがh1にmargin-bottom: 0と指定し、ulにmargin-top: 0としてあるが、この2つがくっつかないのは何故でしょうか？ 親切な方、ご回答いただけますようよろしくお願いします。 body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ width: 128px; float: left; padding: 0px; margin: 0px; }
- 締切済み
- HTML
- CSSのロールオーバーがIEで崩れます
CSSのロールオーバーでメニューを制作しています。 背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。 （IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。） しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。 ロールオーバー自体でなく、他の部分がおかしいのでしょうか？ ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。 タイトル画像が120x26で、その横に絶対配置で並べています。 ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、 問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。 （メニュー項目の数等一部省略しているところがあります。） よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> ～略～ </div>
- ベストアンサー
- CSS
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- CSS
- CSSの優先順位について
うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。（外部CSS） ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。（外部CSSよりヘッダーを優先するとテキストに書いてありました） しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか？？ 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m
- 締切済み
- その他（プログラミング・開発）
- html+cssでfloatに関して
このやり方に問題があるかどうかを教えてほしいのと、 もっといいやり方があれば教えて頂きたいです。 まずやりたいことは3列並びで何段も下に続いて行くようなレイアウトにしたいのです。 で、1つのブロックのwidthが250pxです。そしてブロックとブロックの間が50pxです。 さらに、それを格納するボックスの幅が850pxです。普通にfloatさせてるようにすると3列に並ばず2列になってしまうので、ulのwidthを900pxにして解決したのですが、これは問題あるのでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"><!-- body{margin:0;padding:0;background:#fc0;} div{width:850px;background:#fff;margin:0 auto;} ul{width:900px;margin:0;padding:0;} li{width:250px;height:300px;float:left;display:inline;margin-right:50px;margin-bottom:50px;background:#0fc;} img{border:0;} --></style> </head> <body> <div> <ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <br clear="all"> </div> </body> </html>
- ベストアンサー
- 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
お礼
アドバイスありがとうございます！ 早速試してみたのですが、やっぱり画像が表示されませんでした。 もう少し頑張って調べてみます。