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

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

解決済みの質問

横並びリストの文字の高さを主なブラウザで揃えたい

いつもお世話になっております。
早速質問です。
添付画像の様なナビゲーションを作ろうと思っておりますが、
以下のcssですと、IE6(スタンドアローン版で確認しました)画像3と文字の間に隙間ができてしまいます。
〔css〕
#topicpath{
text-align: left;
width: 700px;
height: 20px;
background: url(images/画像1.gif) no-repeat left center;
padding: 0px 45px;
}
#topicpath li {
display:inline;
list-style-type:none;
}
#topicpath li a {
padding-right:15px;
background:url(images/画像2.gif) no-repeat right center;
}

〔html〕
<div id="topicpath">
<ul>
<li><a href="">top</a></li>
<li>aaa</li>
</ul>
</div>
<div><img src="images/画像3.gif"></div>

リストの下に画像3を配置した場合、line-heightで文字位置を調整しようとしても、画像3も下に移動してしまう為、IE6以外のほかのブラウザと同じ高さにリストを配置できません。
IE7、Firefox、Opera、そしてIE6といったメジャーなブラウザ全て同じ見た目に仕上げたいのですが、良い方法をご教授ください。
補足ですが、画像1は球体の画像ではなく、背景に白い長方形を置いた画像となっておりますが、球体のみの画像を用意することも可能です。

投稿日時 - 2009-04-20 17:53:08

QNo.4895107

暇なときに回答ください

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

"topicpath"というネーミングからして、いわゆるパン屑リストみたいなものですよね?
だとすると、現状のものはマークアップに対する各スタイルの割り当て方がちょっと適切ではない様にも思えます。

・画像1.gifはパン屑リストの”リンク部分”を示す、リンクの先頭に付く「→」アイコン
・画像2.gifはパン屑リストの”現在表示されているコンテンツ(リンクなし)”を示す、先頭に付く「>」アイコン
・画像3.gifはナビゲーションの領域の境界線(終わり)を示す為のライン

以下は、この考え方で相違ないと仮定した場合です。

・画像1.gif(dummy1.gif W10px×H10pxぐらいと想定)は、li内のaに対する背景画像として指定。
・画像2.gif(dummy2.gif W10px×H10pxぐらいと想定)は、liの直下の(aに囲まれていない)テキスト部分に対する背景画像として指定。
・画像3.gif(dummy3.gif W任意×H10pxと想定)は、ulの背景画像として下部に指定。

以下はそうした場合の一例です。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>

<div id="topicpath">
<ul>
<li><a href="#">top</a></li>
<li><a href="#">aaa</a></li>
<li class="here">bbb</li>
</ul>
</div>

</body>
</html>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
#topicpath{
text-align: left;
width: 700px;
padding: 0px 45px 10px 45px;
background: url(images/dummy3.gif) repeat-x left bottom;
}
#topicpath ul,
#topicpath li {
margin: 0;
padding: 0;
}
#topicpath ul {
list-style-type: none;
line-height: 100%;
}
#topicpath li {
display: inline;
}
#topicpath li a {
background: url(images/dummy1.gif) no-repeat left center;
padding-left: 15px;
}
#topicpath li.here {
background: url(images/dummy2.gif) no-repeat left center;
padding-left: 15px;
}
---------------------------------------------------------------------

いかがでしょうか?意図されているものと解釈が違う様でしたら、詳細を補足して下さい。

投稿日時 - 2009-04-20 19:09:53

お礼

ご教授ありがとうございます。

>"topicpath"というネーミングからして、いわゆるパン屑リストみたいなものですよね?
>だとすると、現状のものはマークアップに対する各スタイルの割り当て方がちょっと適切ではない様にも思えます。

プロ的なご指摘ありがとうございます。
仰るとおり、質問した記述はパンクズリストで使用する予定でございます。
仕事でwebを制作しなければなりませんので助かります!

ご説明通りの指定をすると、リストの下の線とリストの間の隙間をどのブラウザでも狭くできるのでデザインの可能性が広がりそうです。

ありがとうございました。

投稿日時 - 2009-04-21 10:45:19

ANo.2

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

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

回答(2)

ANo.1

#topicpath の背景に「画像 3」を置き、ul の背景に「画像 1」を置くのはどうですか?

投稿日時 - 2009-04-20 19:08:48

お礼

ご教授ありがとうございます。

教えていただいた方法を指定して、画像3の高さと、#topicpathと#topicpath ulのpaddingを調整すると4つのブラウザで文字が同じ高さになりました。
marginを0に指定しても、IE6ではulの下に隙間を調整できず悩んでおりました。
勉強になりました。

投稿日時 - 2009-04-21 10:37:30

あなたにオススメの質問