CSSで、リストでGlobalNavigation(画像ボタン)を作り、CSSでのRollOverと上下の隙間を消す方法

質問

CSSでのWebサイト制作するのは二度目なので壁ばかりです。
リストでGlobalNavigation(画像ボタン)を作ります。
このとき、

[1] CSSでのRollOverをさせる方法(JavaScript非使用)

[2] GlobalNavigation画像ボタンとボタンの間の隙間を消す方法(左に縦にボタン群を並べるので)

を探しております。どのようにすればいいでしょうか？
ネットサーフして片っ端から現在調べ中ですがなかなかありそうで無く・・・
以下、ソースです。
HTML】
<div id="wrapper">
<div id="hdr-all">
<div id="hdr-area">
<div id="hdr-vi">
<h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1>
</div>
ヘッダーエリア</div>
<div id="hdr-line"></div>
</div>
<div id="main-all">
<div id="main-area">
<div id="nv-global">
<ul>
<li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li>
<li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li>
</ul>
</div>
<div id="main-area-cts">
<table width="557" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../img/share/cts_frm_top.gif" width="557" height="21" /></td>
</tr>
<tr>
<td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td>
<td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td>
<td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td>
</tr>
<tr>
<td colspan="3"><img src="../img/share/cts_frm_btm.gif" width="557" height="21" /></td>
</tr>
</table>
</div>
</div>
<div id="main-line"></div>
<div id="ftr-all">
<div id="ftr-area">フッターエリア</div>
<div id="ftr-line"></div>
</div>
</div>
</div>

【CSS】
body {
margin: 0 auto;
background: #5ca786;
font-family: "Osaka";
font-size: 12px;
letter-spacing: 1px;
line-height: 150%;
color: #333333;
}
#wrapper {
margin: 0px auto 0px auto;
width: 100%;
height: 100%;
background: #333333;/*Total BG Color*/
text-align: left;
}
#hdr-all {
margin: 0px 0px 0px 0px;
width: 100%;
height: 112px;
background: #a2d8c0;
}
#hdr-area {
margin: 0px 0px 0px 0px;
width: 749px;
height: 112px;
background: url(../img/share/bg_hdr.jpg) no-repeat;
float: left;
}
#hdr-line {
margin: 0px 0px 0px 0px;
width: 1px;
height: 112px;
background: url(../img/share/line_rht.gif);
float: left;
}
#main-all {
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
background: #5ca786;
}
#main-area {
margin: 0px 0px 0px 0px;
width: 749px;
height: 100%;
background: #266e4e;
float: left;
overflow: auto;
}
#main-line {
margin: 0px 0px 0px 0px;
width: 1px;
height: 100%;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}
#nv-global {
top: 5px;
left: 0px;
margin: 5px 0px 0px 5px;
width: 177px;
padding-bottom: 30px;
background: #7bb395;
float: left;
}
#nv-global ul {
}
#nv-global li{
}
#main-area-cts {
top: 5px;
left: 187px;
margin: 5px 0px 0px 0px;
width: 557px;
padding-bottom: 30px;
background: #266e4e;
float: left;
}
#ftr-all {
margin: 0px 0px 0px 0px;
width: 100%;
height: 150px;
background: #FFFFFF;
}
#ftr-area {
margin: 0px 0px 0px 0px;
width: 749px;
height: 150px;
background: #FFFFFF;
float: left;
}
#ftr-line {
margin: 0px 0px 0px 0px;
width: 1px;
height: 150px;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}

回答No.2

leap_day · ベストアンサー

こんにちは

＞img { vertical-align:bottom; }
これは今回の質問に対する回答です
前回で記述したのはリスト画像とtable画像の下に隙間ができていたので消せないものかと思って追加しただけです(一応IE6.0,Firefox2.0,Opera9.2でほぼ同じ表示にしているつもりですが・・・)

＞画像オフにすると
スタイルシート無効、画像読み込み無効、背景色指定無効などのことですか？

スタイルシート無効であれば「リスト1」のところに<img>と記述すれば回避できます

画像読み込み無効であれば<img>も画像になるので表示させることはできません

背景色無効であれば(IE6.0ではできませんが)
<style type="text/css"><!--
#a1 span img { display:none; }
#a1:hover img { display:none; }
#a1:hover span img { display:block; }
ul {
margin:0px;
padding:0px;
}
--></style>
<div id="nv-global">
<ul>
<li><a href="***.html" id="a1"><img src="sample0.gif"><span><img src="sample1.gif"></span></a></li>
</ul>
</div>
のようなやり方ができます

お礼

おっしゃるとおりでした。

img { vertical-align: bottom; }

でバッチリ隙間が消えました。

御礼申し上げます。

回答No.1

leap_day

こんにちは

1つ前の質問にも記述している

img { vertical-align: bottom; }

のことですか？

ですがCSSのみでロールオーバーさせるのであれば<img>ではできません

<style type="text/css"><!--
#nv-global #a1 {
display:block;
width:100px;
height:20px;
text-indent:-999999px;
background-image:url(sample0.gif);
background-repeat:no-repeat;
}
#nv-global #a1:hover {
background-image:url(sample1.gif);
}
ul {
margin:0px;
padding:0px;
}
--></style>
<div id="nv-global">
<ul>
<li><a href="***.html" id="a1">リンク1</a></li>
</ul>
</div>

って感じになります

display:block;
width:100px;
height:20px;
text-indent:-999999px;
background-repeat:no-repeat;

はひとつにまとめてもいいです

#nv-global a {
display:block;
width:100px;
height:20px;
text-indent:-999999px;
background-repeat:no-repeat;
}
#a1 {
background-image:url(sample0.gif);
}
#a1:hover {
background-image:url(sample1.gif);
}

お礼

助かっております。本当に。
何としても今夜じゅうにこのベースHTMLをつくりあげないと
他の何十ページもあるコンテンツがつくりに入れず、時間がありません。
日曜じゅうに20～30ページある他のページをつくりあげなくてはなりません(各コンテンツは文字データがあるので流し込みでかなり早くできるとは思いますが、とにかく時間がありません)
だから本当にありがたいです。

補足

前の質問でもお世話になっていたのですね。心強いです。
当方、Tableレイアウト時にサイトをつくりにつくっていて、
Tableの場合、デザインを凝りまくれ、クライアントもそこを買って
もらっていましたが、二年強業務から離れている間にCSSが主流になって
いました。
SEOの知識もとことん追求したので、今はCSSで制作しようと決めて取り組んでおりますが、CSSは極上デザインとSEOの両輪を兼ね備えたノウハウが見当たらず、四苦八苦しております。デザインレベルを下げればどうということもないのですが、1pxもずれがないほどにデザインを落とし込んでいるので固執しなければなりません。

余談が過ぎました。

> 1つ前の質問にも記述している
> img { vertical-align: bottom; }
> のことですか？

いいえ、違うんです。前回は単なる要素の話で、今回はリストの話です。
リストタグ(<ul><li>)でGlobal Navigationをつくることが主流ですね。
理由等も他の方のご回答で既に得心しております。
しかしこのリスト、左側に縦に画像ボタンとして並べていくと、
4～5pxほどでしょうか、画像ボタンと画像ボタンの間に隙間ができるんです。

> ですがCSSのみでロールオーバーさせるのであれば<img>ではできません

やはりそうなんですか。
aやhoverの背景画像設定でやるようにご案内ありますが、私もネットサーフして
これを見つけたのでやろうかと思ってはいたのですが、
「この手法は画像をOFFにして閲覧された場合、何も見えなくなる。
この理由によって、今はほとんど採用されなくなっている」
ということを本で見たので、これもダメだと判断しておりましたが、
実はまんざらでもないのでしょうかね。