みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSで背景画像にリンクを貼ったら表示されない

こんばんは、過去ログを探したのですが
解決できなかったので、教えてください。

スタイルシートを勉強中です。横並びのナビゲーションに
背景を使って、ロールオーバーリンクにしたいと思い、
自分なりに調べて書いてみたのですが、

IEだと希望どおり表示されるのですが、ChromeとFireFoxだと
はじめの"home.jpg"画像だけが表示されません。


<HTML>
<div id="g-nav-box">
<div id="g-nav-inner">

<ul id="nav">
<li class="home-nav"><a href="index.html">ホーム</a></li><!--
--><li class="aaaa-nav"><a href="aaaa.html">AAAA</a></li><!--
--><li class="bbbb-nav"><a href="bbbb.thml">BBBB</a></li><!--
--><li class="cccc-nav"><a href="cccc.html">CCCC</a></li>
<!--/ul.nav--></ul>

<!--/div#g-nav-inner--></div>
<!--/div#g-nav-box--></div>

<CSS>
#g-nav-box #g-nav-inner #nav ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#g-nav-box #g-nav-inner #nav li{
margin: 0;
padding: 0;
  display: inline;
float: left;
}

#g-nav-box #g-nav-inner #nav a{
display:block;
width:220px;
height:38px;
  text-indent:-1000em;
  overflow:hidden;
 padding-left:0;
}

#header-area #g-nav-box #g-nav-inner #nav .home-nav a{ 
background-image:url(images/home.jpg);
}

#header-area #g-nav-box #g-nav-inner #nav .home-nav a:hover{
background-position:0px -38px; /* 背景画像の(0px -38px)に移動 */
}

#header-area #g-nav-box #g-nav-inner #nav .aaaa-nav a{
background-image:url(images/aaaa.jpg);
}

#header-area #g-nav-box #g-nav-inner #nav .aaaa-nav a:hover{
background-position:0px -38px;
}

#header-area #g-nav-box #g-nav-inner #nav .bbbb-nav a{
background-image:url(images/bbbb.jpg);
}

#header-area #g-nav-box #g-nav-inner #nav .bbbb-nav a:hover{
background-position:0px -38px;
}

#header-area #g-nav-box #g-nav-inner #nav .cccc-nav a{
background-image:url(images/cccc.jpg);
}

#header-area #g-nav-box #g-nav-inner #nav .cccc-nav a:hover{
background-position:0px -38px;
}

文字を表示させないように
テキストインデントを使っているため背景画像も飛んでしまったのかな?と
思っているのですが、解決できないでいます。
どのような修正が考えられるでしょうか、お願いします。

投稿日時 - 2013-07-10 19:19:07

QNo.8170810

困ってます

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

#header-area #g-nav-box #g-nav-inner #nav .home-nav a{ 

の末尾の部分に全角スペースが入っているからでは無いでしょうか??

そのほか、数箇所全角スペースの入っている部分があるようなので、

全角スペース ⇒ 半角スペース

に変えてあげたほうが良いと思います!

投稿日時 - 2013-07-10 19:31:24

お礼

回答いただきありがとうございます!

ご指摘の通り、全角スペースを削除したところ
今回の現象は解決できました。

素早い回答をありがとうございました!

投稿日時 - 2013-07-11 10:00:59

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

スタイルシートのみ書き換え(CSS3バージョン)
#global-nav ul,#global-nav ul li{
margin: 0;padding: 0;
list-style-type: none;
}
#global-nav ul{
width:80%;
min-width:480px;max-width:800px;/* 480px~800px */
margin:0 auto;
position:relative;
}
#global-nav ul li{
width:25%;height:38px;
display: inline-block;
}
#global-nav li a{/* 詳細度 0 1 0 2 */
display:block;
width:100%;height:100%;
text-indent:-20em;
background-image:url(images/home.jpg);
background-size:100% 200%;
overflow:hidden;
}
#global-nav li a:hover{/* 詳細度 0 1 1 2 */
background-position: 0 -38px;
}
#global-nav li a[href="aaaa.html"]{/* 詳細度 0 1 1 2 */
background-image:url(images/aaaa.jpg);
}
#global-nav li a[href="bbbb.html"]{
background-image:url(images/bbbb.jpg);
}
#global-nav li a[href="cccc.html"]{
background-image:url(images/cccc.jpg);
}

 ⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
 ⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
をよく読み、どうしてこのようなセレクタになるか理解すること。それによってHTMLもCSSも、とっても簡単に分かりやすくなります。

投稿日時 - 2013-07-11 08:47:40

お礼

回答ありがとうございます!

今回の現象は全角スペースを削除したところ、解決できました。

丁寧な回答をいただき、ありがとうございました!

セレクタと継承されるプロパティについてよくわかっていないので、
…がんばって勉強したいと思います!!

また何かありましたら宜しくお願いします。

投稿日時 - 2013-07-11 10:18:15

ANo.2

そんな、ややこしいHTMLにしなくても(^^)
どのブラウザでも、きちんと表示されますよ。ただし次は修正
・#g-nav-box #g-nav-inner #nav ulなんて要素はないですよ!!
・全角文字が混入しているとか
・#header-areaの子孫じゃないのに子孫として指定している。
じゃないですか。

 そんなややこしいHTML--デザインのために書いてしまうから手が付けられなくなるのですよ。
★DIVはあくまでclass名やidと併用することで文書構造を補完するためです。デザインのためにDIV使うから、文書構造を示すためのDIVとデザインのためのDIVがカオスを作ってしまう。デザインもエラーを探すのも、将来HTMLの変更やデザインの変更する時に困ります。
#は一意セレクタで、詳細度も[0,1,0,0]と高いので入れ子にしなくても良いです。

【サンプル】
☆floatをつかうならdisplay:blockで行間の<!-- ------>のコメントアウトは不要です。
 display:inline-blockをつかうなら、コメントアウトしないと半角スペースが入ります。
  ⇒連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )
☆継承されるプロパティは継承させる。
☆こんな簡単なHTMLとスタイルシートで実現できます。しかもリキッドですから、スマホでも幅広ディスプレイでも、ウィンドウ幅を変えても使える。
 (注)背景画像の伸縮(background-size-CSS3)は使ってません。

★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
 W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
 でチェック済みのHTML4.01strict + CSS2.1です。
★タブは_に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
#global-nav ul,#global-nav ul li{
margin: 0;padding: 0;
list-style-type: none;
}
#global-nav ul{
width:80%;min-width640px;max-width:800px;
margin:0 auto;
position:relative;
}
#global-nav ul li{
width:25%;height:38px;
display: inline-block;
}
#global-nav li a{
display:block;
width:100%;height:100%;
text-indent:-1000em;
background-image:url(images/home.jpg);
}
#global-nav li a:hover{
background-position: 0 -38px;
}
#global-nav li a[href="aaaa.html"]{
background-image:url(images/aaaa.jpg);
}
#global-nav li a[href="bbbb.html"]{
background-image:url(images/bbbb.jpg);
}
#global-nav li a[href="cccc.html"]{
background-image:url(images/cccc.jpg);
}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<div class="nav" id="global-nav">
___<ul>
____<li><a href="index.html">ホーム</a></li><!--
---------------><li><a href="aaaa.html">AAAA</a></li><!--
---------------><li><a href="bbbb.html">BBBB</a></li><!--
---------------><li><a href="cccc.html">CCCC</a></li>
___</ul>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2013-07-10 20:23:57

あなたにオススメの質問