cssボックスでのリンクがうまくできません

質問

css初心者です。表現が分かりにくかったら申し訳ありません。
現在Dream Weaver8でサイトを作成中です。壁に当たり、困っております。

cssで背景に画像を置いて、そこにボックスを作りリンクを貼っていて、最初の頃はプレビューでマウスを置いたら反応していたのですが、あるときからマウスを置いても反応しなくなりました。

本に載っている通にしているつもりですがどうしても解決しないため、よろしければご指導下さいませ。参考までにその部分のhtmlとcssを掲載させて頂きます。

<div id="mainnavi">
<h2><a href="#"><em>あああ</em></a></h2>
<h2><a href="#"><em>いいい</em></a></h2>
<h2><a href="#"><em>ううう</em></a></h2>
<h2><a href="#"><em>えええ</em></a></h2>
<h2><a href="#"><em>おおお</em></a></h2>
</div>

#mainnavi {
margin: 3px 0px 0px;
padding: 0px;
width: 850px;
background: url(image/mainmenu.jpg) no-repeat;
height: 50px;
#mainnavi h2 em {
visibility: hidden;
}

#mainnavi h2 a {
display: block;
height: 50px;
width: 170px;
margin: 0px;
padding: 0px;
text-decoration: none;
}

お手数かけますが、よろしくお願い致します。

回答No.4

abril · ベストアンサー

ANo.1です。ANo.2様へのお礼欄のCSSを見ました…これは最初に質問文で頂いていたCSSと「全然」違いますね。これでは適切な回答ができるわけもないですね。

ANo.1では、質問文のCSSを見た上で、

> #mainnavi {
> （省略）
> height: 50px;※←子要素である#mainnavi h2 aもheight: 50px;なのに、親要素の高さが全く同じでは、<h2>が複数あっても表示されるのは最初の1つのみになってしまいますが？
> }

と指摘させて頂きましたが、それはこの時点で#mainnavi h2がfloatしている（結果として横並びになる）という情報が提供されてなかったからです。なのでこの指摘は今回のケースには無意味なものとなりましたので、取り消します。

で、新たなCSSを見てわかった事は、既にANo.3様が指摘されてる通りなのですが、

#mainnavi h2 {
（省略）
visibility: hidden;
}

肝心のh2を「非表示」にしてしまったのでは何にもならない、という事です。"visibility: hidden;"による「非表示」というのは、「その要素の領域は確保するが、要素自体は不可視とする」という様な仕様ですので、そこにいくら内包するリンクやらがあっても「機能」する事はできません。
ナビ部分の画像は表示されてはいますが、それは単に親要素#mainnaviでbackgroundとしてmainmenu.jpgが指定されているからで、結果、現状は単なる「背景」が見えているだけ、その上にある筈のリンクはh2が不可視になっている事で事実上存在しなくなっています。
一方、emが不可視になっていてもリンクが機能するのは、a自体は不可視ではなく、emの親要素としてマークアップされているからです。

こういう、CSSによる画像置換的ロールオーバーがやりたいのであれば、「どうしてそういう風に見えるのか」という事をちゃんと理解しながら（HTMLの構造、CSSのプロパティの意味や指定の仕方をきちんと把握しながら）する事ですね。それが難しいならいっそ素直に1つ1つのナビの画像にしてimgでマークアップした方が宜しいかと思います。SEO云々的な事でこの画像置換の方法も定着していますが、別にナビをimgでそのまま挿入してリンクを貼ったって間違いなわけでもなんでもないので…
それから、こちらはANo.1で指摘した通りなので、繰り返しますが、h2は見出しであってナビではありません。この場合のマークアップとしては適切ではありません。ulでマークアップする事をお奨めします。CSSの指定はちょっと変更するだけでほとんどそのまま使えますから。

お礼

abril様

何度も丁寧なご指導本当に有難うございます。おかげさまで解決することが出来ました。お会いしてもないのにこんな親切にして頂き、感謝しております。

CSSの概念も指導頂く前とでは全く変わりまして、まずは全体をもっと勉強して、それから部分的なところをやっていこうと思います。

これからも投稿させて頂きますので、もし見られてお答え頂けるときありましたら、よろしくお願い致します。

本当に有難うございました。

回答No.3

font_color

はじめまして。
リンク内テキスト部分（em）を非表示にして
画像に置き換えるということでしょうか？

#mainnavi h2 {
font-size: 12px;
margin: 0px;
padding: 0px;
float: left;
visibility: hidden;←※
}
※これがいらないのでは？
これではh2を非表示にしています。

#mainnavi h2 em {
visibility: hidden;←※
}
※emのテキストを非表示にさせるならこれだけで。
他にも方法はありますが。

＞マウスを置いても反応しなくなりました。
とはオンマウスで色や背景が変わることですか？
a:hover{
background:～;
color:～;
}
などで試してください。

＞あるときから
・・とは・・？

回答No.2

yambejp

#1さんの回答にありますが

#mainnavi {
・・・・

が最後「}」で閉じていませんが、これはたんなる転記ミスですか？
それによって回答が全然ちがってきます

お礼

maybejp様

ご意見有難うございます。大変申し訳ございません、
私の単なる転記ミスでした。最後は閉じておりました。

#mainnavi {
margin: 3px 0px 0px;
padding: 0px;
width: 850px;
background: url(image/mainmenu.jpg) no-repeat;
height: 50px;
}

#mainnavi h2 {
font-size: 12px;
margin: 0px;
padding: 0px;
float: left;
visibility: hidden;
}

#mainnavi h2 em {
visibility: hidden;
}

#mainnavi h2 a {
display: block;
height: 50px;
width: 170px;
margin: 0px;
padding: 0px;
text-decoration: none;
}

回答No.1

abril

「マウスを置いても反応しなく」なったというのがどういう状態なのか今一不明瞭ですね。「あああ」「いいい」などのテキスト部分にマウスオーバーしてもポインタがリンクを指し示す形にならない、という事でしょうか？
ソースを丸ごとコピペして試した状態では、その様な現象は起こっていませんが？

ただ、このソースには色々と問題があります。

height: 50px;※←閉じていません
#mainnavi h2 em {
visibility: hidden;
}

#mainnavi {
（省略）
height: 50px;※←子要素である#mainnavi h2 aもheight: 50px;なのに、親要素の高さが全く同じでは、<h2>が複数あっても表示されるのは最初の1つのみになってしまいますが？
}

また、#mainnaviという名称から、この部分は「ナビ（メニュー）」ですよね？h2は「見出し」と意味を持つものであり、ナビやメニューとして使う要素ではありません。この場合はulなどのリスト要素を使うのが妥当です。

状況とソースをもう少し詳細に補足して頂ければ現在抱えておられるトラブルの原因を見極められるかもしれませんが…公開されていない他の部分に原因があるとしか、今の段階では考えられないかと思います。

お礼

abril様

早速のご丁寧な対応有難うございます。周りに聞ける人もおらず、マークアップの仕方もよく分かっておりませんので、頂きましたご指摘には本当に感謝させて頂いております。

私の表現がうまく出来ませんので、一つずつお聞きさせて頂きたく思います。

アップしております画像を背景にして、それぞれにリンクを張りたいと思います。(それぞれ170×50の範囲で)※すいません、画像は800pxのものです。

ブラウザで表示したときにその部分をマウスオーバーしてもポインタがリンクを指し示す形にならない現状にあります。最初は出来たのですが、あるときからならなくなったので、どうしたらいいのかと思っているところです。

お手数ですが、ご検討下さいませ。