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

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

解決済みの質問

cssのulタグについて質問です。

cssの初心者ですがよろしくお願いします。

以下内容です。
#headerの中にulタグで
float:left;
display: inline;
を使って横のメニューを作りました。
その下に幅いっぱいの画像を入れたかったので
一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。
そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが
2段目の1番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。(横に短くなっている)
画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。
cssで指定している画像の大きさも間違いありません。

試しに上のメニューを<div id="header">にして
<div class="clear"></div>で区切って
下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。

htmlはこれです
<div id="header">
<ul class="yama">
<li class="logo"><a href>ロゴ</a></li>
<li class="kyouiku"><a href="">教育</a></li>
<li class="syoukai"><a href="">紹介</a></li>
<li class="shizen"><a href="">自然</a></li>
<li class="mura"><a href="">村</a></li>
</ul>

<div class="clear"></div>
<div class="line"></div>

<ul class="rei">
<li class="name"><a href="">あいうえお</a></li>
<li class="abc"></li>
<li class="map"><a href="">マップ</a></li>
</ul>
</div>

<li class="name"><a href="">あいうえお</a></li>これが問題のタグです。

文字が足りなかったのでcssの一部ですが
/* rei */
#header ul.rei{
float:left;
}

#header ul.rei li{
float:left;
display: inline;
}

で <li class="name"> のcssですが

#header ul.rei li.name {
display: block;
width:295px;
height:51px;
}

#header ul.rei li.name a {
display: block;
background: url(../img/name.jpg) no-repeat top left;
text-indent:-9999px;
height:100%;
width:100%;
}

#header ul.rei li.name a:hover {
display: block;
text-indent:-9999px;
height:100%;
width:100%;
background: url(../img/name_om.jpg) no-repeat top left;
}

という風にしています。
初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。

投稿日時 - 2010-11-24 21:58:40

QNo.6341863

困ってます

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

/* rei */
#header ul.rei{
float:left;
}

#header ul.rei li{
float:left;
display: inline;
}

#header ul.rei li.name a {
display: block;
background: url(../img/name.jpg) no-repeat top left;
width:295px;
height:51px;
text-indent:-9999px;
}

#header ul.rei li.name a:hover {
background: url(../img/name_om.jpg) no-repeat top left;
}


こんな感じでどうでしょう?
#header ul.rei li.name { }
は必要ないので消してください。

それとなんとなく用途が想像できますが、この部分は修正しておくといいと思います。
空のdivは文法上おかしいので。

<div class="clear"></div>
<div class="line"></div>

まずclearをしているdivは内容が特にないのであればlineの方に統合しましょう。

<div class="line"></div>

.line{
clear:left;
}

それで、もしlineが線を引いたりするだけのために置いてあるのであれば、ulに統合します。


#header ul.rei{
float:left;
clear:left;
border-top:1px solid black; /* 線 */
padding-top:30px; /* 線からの余白 */
}

投稿日時 - 2010-11-25 14:37:33

お礼

ありがとうございます!!
とても詳しくご教授いただき勉強になりました。
さっそくやってみます^^
本当にありがとうございました。

投稿日時 - 2010-11-28 18:03:22

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

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

回答(1)

あなたにオススメの質問