CSSのリスト 背景画像が表示されない

このQ&Aのポイント
  • text-indentを利用して背景画像のみを表示させる方法について説明します。
  • h1要素ではうまくいくが、li要素では背景画像が表示されない問題について解決方法を探ります。
  • text-indentを使用しなければ背景画像は表示されるが、配置がずれてしまう問題についても触れます。
回答を見る
  • ベストアンサー

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
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • goulan
  • ベストアンサー率46% (23/50)
回答No.1

こんばんわ。 >背景画像のみを表示 text-indent -999pxする目的が良くわかりませんが・・・・ その背景画像(../images/menu/top.jpg)が、メニュー項目なのでしょうか?「背景」画像ですから、要素liの中身がない or 文字があっても text-indent -999px ならば、表示するモノがないという事になります。モノがなければ、実際のUA上では幅がありません。「背景」画像も表示されませんね。ただし、IE6の場合は全くないですが、IE7, Firefox, Opera, Safari だと、ほんのわずか、10pxくらいでしょうか、表示されます(4.01の場合)。 ulには、width, height と指定なさってらっしゃいますから、liに、画像メニューの幅と高さを指定すれば表示されるはずです。htmlソースのli/liの中身になにもなくても、です。 h1の場合は、width,height を指定なさってますから、当然h1は中身があってもなくてもそのサイズは確保されてます。ですから、背景画像も表示されますね。 横並びメニューをliで実現するのは、さほど難しいことではありません。しかし、margin, padding, をUA毎に細かく指定するか、最大公約数的に指定しないと、IE,Firefox,Opera,Safari等々、それぞれ異なる隙間が表示され、当然、横並びメニュー全体の幅も変わって来ます。ulに指定した幅を越える、または足りなくて右が広くあいてしまう、などの状態になったりします。 また、画像が下にずれこむ状態とのことですが、background: ;で指定するばあいは、その画像などのポジションは2つあります。水平方向と垂直方向です。要素の width, height が その要素の背景画像より大きい場合、ポジションを指定すれば解決です。center も使えますし、%も使えます。50% 50% = center center ですね。0% 50% = 要素左端の真ん中。50% 0% = 要素中央の上端、という状態です。

JBL555
質問者

お礼

ありがとうございます。 text-indentは、SEOを意識してのことで、本に載ってあったものを使用していました。 お教えいただいたようにliにwitdhを指定し、ulのwitdhを消すとうまくいきました。 ありがとうございました。

関連するQ&A

  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか? それともそのような仕様なのでしょうか? よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • css: IEでsidebarが表示されない

    cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar(背景、画像、テキストを含むすべて)がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative;     background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px;    ist-style: none;         width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}

    • ベストアンサー
    • CSS
  • fire foxでリスト番号が表示されてしまう

    プルダウンメニューを使っていてリストマークを表示しない設定にしていますが、firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。原因が分かる方いらっしゃいましたら解決方法を教えてください。(下記は5つメニューがある中の3つ分のHTMLとCSSです。) <==HTML==> <div id="menu"> <ul class="main"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">トップ</a> </li> </ul> <ul class="main2"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">メニューのご紹介</a> <ol class="sub"> <li><a href="#">トップ</a></li> </ol> <ol class="sub2"> <li><a href="#">メニューのご紹介</a></li> </ol> </li> </ul> <ul class="main3"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">店舗のご案内</a> <ol class="sub3"> <li><a href="#">店舗のご案内</a></li> </ol> <ol class="sub4"> <li><a href="#">当店の歴史</a></li> </ol> <ol class="sub5"> <li><a href="#">ご予約</a></li> </ol> </li> </ul> </div> <==CSS==> /****全体位置の決定****/ #menu{ width:630px; height: 89px; float: left; z-index: 1000; margin-top: 20px; margin-left: 0px; padding-left: 0px; list-style-type: none; left: 4px; top: -12px; font-size: 0.8em; position:relative; } /****メインメニュー用スタイル****/ ul.main{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main2{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main3{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } /*通常時*/ .main li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main2 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main3 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } /*展開時*/ .main li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main>li.on{ overflow:visible;/*×*/ } .main2 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main2>li.on{ overflow:visible;/*×*/ list-style-type:none; } .main3 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main3>li.on{ overflow:visible;/*×*/ } /*リンクスタイル*/ .main a{ display:block; text-decoration:none; background-image: url(images/m_top.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main a:hover{ background-image: url(images/m_top-on.jpg); } .main2 a{ display:block; text-decoration:none; background-image: url(images/m_menu_list.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main2 a:hover{ background-image: url(images/m_menu_list-on.jpg); } .main3 a{ display:block; text-decoration:none; background-image: url(images/m_store.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main3 a:hover{ background-image: url(images/m_store-on.jpg); } /****サブメニュー用スタイル****/ ol.sub{ text-align:left; margin: 0px; padding: 0px; height: 40px; width: 126px; }

  • ナビゲーションバーの背景画像が表示されません(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
  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

  • cssハックについて

    googleとfirefoxでcssが聞かない箇所があります。 css--------- #operation { width: 420px; background-image: url(../picture/top/left_middle.jpg); background-repeat: repeat-y; background-position: center top; margin-top: 10px; } #operation img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #operation #ope_top { background-image: url(../picture/top/left_top.jpg); background-repeat: no-repeat; background-position: left top; height: 30px; padding-bottom: 0px; margin-bottom: 0px; } #operation #ope_top #ope_tit { font-size: 14px; line-height: 2; font-weight: bold; color: #FFFFFF; text-indent: 10px; float: left; width: 200px; margin-top: 0px; padding-top: 0px; height: 20px; } #operation #ope_top .ope_img { padding-top: 5px; float: right; margin-right: 10px; } #operation #ope_middle { margin-top: 0px; padding-top: 0px; width: 420px; margin-left: -200px;←ここがおかしいです!! } #operation #ope_middle .content ul { margin-top: 5px; padding-left: 30px; list-style-image: url(../picture/list.jpg); } #operation #ope_middle .content li { margin-bottom: 5px; margin-top: 1px; } #operation #ope_middle .content .line01 { border: 1px dotted #CCCCCC; margin-top: 2px; margin-bottom: 2px; } というかんじなのですが、左右へとぶれてしまいます。 どのように修正したいいのか困っております。 参考になるようなことありましたらお願いします。

  • CSSで画像1枚によるロールオーバー

    CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか?よろしくお願い致します。 作っている物は以下の通りです。(すべて同じ階層にあります) --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の1枚の画像) --------------------------------------------------------------- list.html(とりあえずメニュー1つだけです) <!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="#">リスト1</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
  • ブラウザ間のCSSの表示違いにつきまして

    現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部(float boxの上)に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ(auto)にしたくて・・・ どなたか解る方いらしたらご教示お願いします!

    • ベストアンサー
    • HTML
  • 画像を横並びにできなくて困っています:CSSの設定

    現在こちらのサイトの管理をしています。 ↓ http://heiz.jp/ カテゴリを2つほど増やそうと、画像を作り替え、横幅を設定しなおしてアップしたら、 現在のように、画像と画像の間に幅ができ、ひとつ画像がずれて表示されてしまいました。 CSSの設定が悪いのかと思うのですが、CSS初心者のため、どこが悪いのか解りません。 ↓ http://heiz.jp/styles-site.css ちなみに、カテゴリー部分のスタイルシートはこんな感じです。 ↓ /* ----- カテゴリー一覧 ----- */ div.category-archives { font-size:90%; margin:0 0 0 0; } div.category-archives img { border:0; } div.category-archives ul { list-style:none; margin:0; line-height:100%; float:left; } div.category-archives ul li { display:inline; line-height:100%; margin:0; padding:0; float:left; text-align:center; } div.category-archives ul li a { display:block; width: 99px; height: 38px; padding:9px 0 0 0; background:#ffffff url(images/h_menu_0.jpg) no-repeat 0 0; color:#292929; font-weight:bold; line-height:100%; margin:0; } div.category-archives ul li a:hover { display:block; width: 99px; height: 38px; padding:9px 0 0 0; background:#ffffff url(images/h_menu_1.jpg) no-repeat 0 0; text-decoration:none; color:#0072C2; font-weight:bold; line-height:100%; margin:0; } どこを修正したら、ちゃんと横並びに表示されるのか、 どなたか教えてください!助けてください!!

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