• 締切済み

safariで webの画像がちゃんと表示されない。 小さなブルーボッ

safariで webの画像がちゃんと表示されない。 小さなブルーボックスに?マークがでるのはなぜ? 作成中のホームページをsafariで開いてみたらimgで貼付けた画像が見えるが、横に 小さなブルーボックスに?マークがでてきます。  サファリの環境設定でページを開く時に画像を表示にもチェックマークが入っていても同じです。 回避方法ご存知の方、おしえてください。 ナビゲーションメニューを画像にて貼付けてます。 マウスオーバーで画像の色が変わる設定です。 html側 <ul> <li><a id="top" href="#">top</a></li> <li><a id="top2" href="#">top2</a></li> <li><a id="top3" href="#">top3</a></li> <li><a id="top4" href="#">top4</a></li> </ul> cssで背景画像として入れています。 #top{ background-image:url(../image/top_g.png); width:140px; height:25px; margin-left:40px; } #top:hover{ background-image:url(../image/top.png); }

  • CSS
  • 回答数1
  • ありがとう数6

みんなの回答

回答No.1

そもそも、#topがセットしてある<a>要素はインライン要素だから、 width:140px;height:25px;は意味が無いし、背景画像も無い。 display:blockでブロック要素に変えて確認してみやれ #top{ display:block; background-image:url(../image/top_g.png); width:600px; height:200px; margin-left:40px; }

indahouse
質問者

お礼

ありがとうございました。

関連するQ&A

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE7で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか? HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • 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
  • ナビゲーションバーの背景画像が表示されません(CSS)

    私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例(ナビゲーションバーです)をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top;  float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="**">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。

    • ベストアンサー
    • CSS
  • ページを開いた直後のサブメニューを非表示

    現在、個人で利用するサイトを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で背景画像が表示されない

    よく見かけるLiでナビゲーション項目を表示させるのを しようとしているんですが、Liの背景画像が上手く表示されません。 navigationの背景画像は表示されたのですが、liで指定した 背景画像が表示されません。 どこが悪いのでしょうか?? 初歩的な事かもしれませんが、よろしくお願いします。 #navigation { WIDTH: 900px; height:50px; background: url(./h_side.jpg); background-position: left top; text-align:left; ul { margin: 0px; padding: 0px;} li { display: block; } .menuA01 { width: 178px; height:50px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; text-decoration: none, background : url(./menuA01.jpg); background-position: left top; float: left; <div id="navigation"> <ul> <li class="menuA01"><a href="/index.html">menuA01</a></li> <li class="menuA02"><a href="/index.html">menuA02</a></li> <li class="menuA03"><a href="/index.html">menuA03</a></li> <li class="menuA04"><a href="/index.html">menuA04</a></li> <li class="menuA05"><a href="/index.html">menuA05</a></li> </ul> </div>

  • HPの作成について質問です。cssを用いてある画像にカーソルを合わせる

    HPの作成について質問です。cssを用いてある画像にカーソルを合わせると、別の画像が現れるという効果をつけたいと思っています。下記のような(該当部分と思われるところ)htmlとcssを作成したのですが、画像の1の部分だけがカーソルにあわせた画像が繰り返された画像となります。また画像の2の部分が画像にカーソルを合わせるとなぜか消えてしまいます。アドバイスお願いします。 *HTML <div id="naraberu"> <ul> <li class="Qone-one"><a href="kikimashita1.html"></a></li> (省略) <li class="Qone-twelve"><a href="kikimashita1.html"></a></li> <li class="Qone-thirteen"><a href="kikimashita1.html"></a></li> <li class="Qone-fourteen"><a href="kikimashita1.html"></a></li> <li class="Qone-fiveteen"><a href="kikimashita1.html"></a></li> <li class="Qone-sixteen"><a href="kikimashita1.html"></a></li> <li class="Qone-seventeen"><a href="kikimashita1.html"></a></li> <li class="Qone-eighteen"><a href="kikimashita1.html"></a></li> <li class="Qone-nineteen"><a href="kikimashita1.html"></a></li> <li class="Qone-twenty"><a href="kikimashita1.html"></a></li> <li class="Qone-twentyone"><a href="kikimashita1.html"></a></li> </ul> <!--end div#naraberu--> </div> *CSS #naraberu { position: relative; margin-top: 10px; margin-left: 20px; width: 400px; height: 1000px; } #naraberu a{ display:block; width:64px; height:79px; } #naraberu a:hover{ position: absolute; left: 380px; top: 90px; display:block; width:210px; height:278px; } (省略) .Qone-fourteen a { background-image: url(../images/card_moto.png); } .Qone-fourteen a:hover { background-image: url(../images/card_example.png); } .Qone-fiveteen a { background-image: url(../images/card_moto.png); } .Qone-fiveteen a:hover { background-image: url(../images/card_example.png); } .Qone-sixteen a { background-image: url(../images/card_moto.png); } .Qone-sixtten a:hover { background-image: url(../images/card_example.png); } (省略) .Qone-nineteen a { background-image: url(../images/card_moto.png); } .Qone-nineteen a:hover { background-image: url(../images/card_example.png); } .Qone-twenty a { background-image: url(../images/card_moto.png); } .Qone-twentyone a:hover { background-image: url(../images/card_example.png); }

    • ベストアンサー
    • 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

  • Chrome だと、画像が少し下にずれてしまう

    こんにちは! CSS初心者で、今回初めてCSSを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています(ナビは、リストをfloatで横並びに表示しています)。 IEだと、問題なく正しい位置で表示されるのですが、Firefoxや Chromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なCSSコードですが(多分、無駄なコードがいっぱいありそう・・・) のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi ul{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</a></li> <LI><a href="**********">ご案内</a></li> <LI><a href="**********">ご利用方法</a></li> <LI><a href="**********">イベント詳細</a></li> <LI><a href="**********">アクセス</a></li> </UL></div> </div><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->

    • ベストアンサー
    • CSS
  • 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
  • 1つの画像を使ったナビゲーションからプルダウン

    <div id="menu"> <ul> <li id="menu01"><a href="#">profile</a></li> <li id="menu02"><a href="#">works</a></li> <li id="menu03"><a href="#" target="_blank">memo</a> <li id="menu04"><a href="#">link</a></li> </ul> </div> ------- #menu{ width:824px; height:100px; padding:0px; margin: 0px auto 20px;} #menu ul{ list-style:none; width:824px; height:100px;} #menu ul li a{ text-indent:9999px; background:url(img/menu.jpg) no-repeat; display:block; width:206px; height:100px;} #menu ul li { float:left; width:206px; height:100px;} #menu ul li#menu01 a { background-position: 0px 0px; } #menu ul li#menu02 a { background-position: -206px 0px; } #menu ul li#menu03 a { background-position: -412px 0px; } #menu ul li#menu04 a { background-position: -618px 0px; } #menu ul li#menu01 a:hover { background-position: 0px -100px; } #menu ul li#menu02 a:hover { background-position: -206px -100px; } #menu ul li#menu03 a:hover { background-position: -412px -100px; } #menu ul li#menu04 a:hover { background-position: -618px -100px; } ※数字のキリが悪いですが、お気になさらず。 上記のような1つの画像をスライドするナビメニューを作ったのですが、 これをベースに、一箇所メニューからドロップダウンさせる事は可能でしょうか。 また、そのドロップダウンされたメニューはテキストではなく画像が良いです。 バックグラウンドの画像の上にメニューの1つの画像を重ね配置してからドロップダウンさせるなど。。 ほぼ初心者に近い為勝手に思いついたのはこれくらいで、よく分かりません。 ネットで色々と検索をしたのですが、思ったようなものがなく、 何か参考になるようなURL等あれば教えていただけますでしょうか。 できれば分かり易いものがありがたいです。。 また、上記のやり方では根本的に無理だという場合も教えて欲しいです。 よろしくお願いします。

    • 締切済み
    • CSS

専門家に質問してみよう