のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。
html側
<div id="banner_menu">
<ul>
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
<li><a href="#">たちつてと</a></li>
<li><a href="#">なにぬねの</a></li>
<li><a href="#">はひふへほ</a></li>
</ul>
</div>
CSS側
#banner_menu {
clear: both;
margin: 0px;
padding: 7px 0 5px 15px;
border-top: solid 1px #999;
border-bottom: solid 1px #999;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
#banner_menu ul {
text-align: left;
padding-bottom: 1px;
margin: 0px;
}
#banner_menu li {
color: #ffffff;
display: inline;
padding-left: 7px;
padding-right: 5px;
border-left: solid 1px #999;
width: 120px;
}
#banner_menu a {
color: #4d4d4d;
font-weight: normal;
background-color: none;
text-decoration: none;
font-size: 12px;
background: url(var_gry120x48.gif) no-repeat center center;
line-height:20px;
height: 20px;
}
#banner_menu a:hover {
color: indianred;
font-weight: normal;
background: url(var_gry120x48_2.gif) no-repeat centert bottom;
}
No.1ベストアンサー
- 回答日時:
インライン要素とブロックレベル要素の違いを把握されていないようです。
インライン要素は横にならぶ物ではなく、行の中に入るもので、幅や高さをもてません。marginも効きませんが、paddingなら効きます。ブロック要素は前後に改行を含む矩形で、高さや幅をもてます。
今回liをインラインに変えられたので、liは高さも幅ももてません。その中の要素はaでやはりインライン要素です。同じく高さも幅ももてません。paddingならもてます。文字の長さにしたがって、aの幅が変わるのならpaddingで幅や高さを指定する手があります。
全menuに同じ幅と高さを指定したいなら、この場合、a要素をinline-block要素に見せかける方法があります。これは外向きにはinline内向きにはblockになる要素です。imgなどと同じように外に対しては改行されず、行内に含まれるが、中身は高さや幅を持てます。
知識として、出来上がりの見た目が同じタイプなら、liをdisplay:inlineにせず、float:leftにして、afterでclear:leftする方法がよく使われます。
ありがとうございました。とりあえずliをfloat:leftに変更して、a:をdisply:blockにして解決しました。シンプルな形にするのもだいじですねぇ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FC2 HTML編集について
-
FC2ブログのテンプレートを...
-
FC2ブログ 拍手・facebookなど...
-
gooブログにカウンターをつけたい
-
ブログ表紙について
-
ホームページ制作とコーティング
-
Hotmailでテンプレートできます...
-
三つ折りのリーフレットを作りたい
-
goo ブログのレイアウトが崩れ...
-
ブログペットのgooについて・・...
-
FC2ブログのアクセスカウンター...
-
gooブログ の 下書きの保存 方法
-
Excel2007自作テンプレート共有...
-
cssの@mediaについて
-
シーサーブログの記事投稿について
-
FC2ブログの表示がおかしく...
-
FC2と忍者ブログの比較
-
楽天アフィリエイトについて 現...
-
文字に背景色を入れる時、隙間...
-
FC2ブログのamazonのアフリエ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログにおいて記事...
-
中央寄せの解除
-
エキサイトブログで挿入画像を...
-
ライブドアブログのサイドバー...
-
アメブロ。日記から本文がはみ...
-
アメブロでブログタイトル上部...
-
tumblrをやっている方、jsやcss...
-
スタイルシートの使い方について
-
HEAD・HTMLの行間改行が上手く...
-
bloggerブログで画像の枠を消す...
-
FC2ブログで引用に背景色をつける
-
MT4のタイトルを一枚画像(バナ...
-
wordpress カスタムフィールド...
-
ブログ記事内に文章を左右2列に...
-
右サイドバーが下に落ちてしまう
-
お世話になっております。fc2で...
-
FC2 HTML編集について
-
FC2ブログ タイトルの文字を...
-
fc2ブログで記事とサイドバーに...
-
2beeブログで行間と文字の間隔...
おすすめ情報