ぃぇ本当に助かりました。
感謝
![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
こんにちは。
現在XHTML1.0を作成中でドン詰まり中です（Ｔ_Ｔ）
CSSでナビゲーションを作成しているのですが、 1枚の背景画像を使ってマウスオーバー時に表示位置をズラす作業をしようと試みたんですが・・・んん；；；全く反応がありません↓
色々、参考書等を覗いては試みたんですが・・・なんでだろぅ；；；面白いぐらいに無反応です。。。
ＣＳＳでは基本中の基本らしいので是非マスターしたいです。
どなたか助言いただけませんでしょうか。
※リンク画像は100px×100ｐｘで、HOMEボタンの位置はX：240px Y：0pxです。
-----------HTMLソース-----------
<div id="header">
・
・
・
<div id="nav">
<ul>
<li id="nav-home"><a href="">トップページ</a></li>
<li id="nav-business"><a href="">製品情報</a></li>
<li id="nav-webdesigning"><a href="">ホームページ制作</a></li>
<li id="nav-company"><a href="" >会社概要</a></li>
<li id="nav-contact"><a href="">サポートメンテナンス</a></li>
</ul>
</div><!-- end navi -->
・
・
・
</div><!-- end header -->
----------- CSS -----------
#nav {
display: block;
width:780px;
height:100px;
background:url(images/nav.gif) no-repeat;
margin:0 10px;
}
#nav li {
list-style:none;
/* リストマーク無 */
display: block;
margin: 0;
padding: 0;
float:left;
text-indent: -9999px;
}
#nav a {
display:block;
text-decoration:none;
padding:0;
width:100%;
/* リンク範囲（幅）をリスト項目範囲全て */
height:100%;
background-image:url(images/nav.gif);
background-position:-240px 0px;
/* ★↑背景画像の（0px 0px）の位置★ */
background-repeat:no-repeat;
}
#nav-home a:hover {
background-image:url(images/nav.gif);
/* マウスが上に来た時の背景画像設定 */
background-position:-240px -100px;
/* ★↑背景画像の（0px -35px）に移動★ */
}
/* ----- end navi ----- */
以上です。どうぞ宜しくお願いします。
現在XHTML1.0を作成中でドン詰まり中です（Ｔ_Ｔ）
CSSでナビゲーションを作成しているのですが、 1枚の背景画像を使ってマウスオーバー時に表示位置をズラす作業をしようと試みたんですが・・・んん；；；全く反応がありません↓
色々、参考書等を覗いては試みたんですが・・・なんでだろぅ；；；面白いぐらいに無反応です。。。
ＣＳＳでは基本中の基本らしいので是非マスターしたいです。
どなたか助言いただけませんでしょうか。
※リンク画像は100px×100ｐｘで、HOMEボタンの位置はX：240px Y：0pxです。
-----------HTMLソース-----------
<div id="header">
・
・
・
<div id="nav">
<ul>
<li id="nav-home"><a href="">トップページ</a></li>
<li id="nav-business"><a href="">製品情報</a></li>
<li id="nav-webdesigning"><a href="">ホームページ制作</a></li>
<li id="nav-company"><a href="" >会社概要</a></li>
<li id="nav-contact"><a href="">サポートメンテナンス</a></li>
</ul>
</div><!-- end navi -->
・
・
・
</div><!-- end header -->
----------- CSS -----------
#nav {
display: block;
width:780px;
height:100px;
background:url(images/nav.gif) no-repeat;
margin:0 10px;
}
#nav li {
list-style:none;
/* リストマーク無 */
display: block;
margin: 0;
padding: 0;
float:left;
text-indent: -9999px;
}
#nav a {
display:block;
text-decoration:none;
padding:0;
width:100%;
/* リンク範囲（幅）をリスト項目範囲全て */
height:100%;
background-image:url(images/nav.gif);
background-position:-240px 0px;
/* ★↑背景画像の（0px 0px）の位置★ */
background-repeat:no-repeat;
}
#nav-home a:hover {
background-image:url(images/nav.gif);
/* マウスが上に来た時の背景画像設定 */
background-position:-240px -100px;
/* ★↑背景画像の（0px -35px）に移動★ */
}
/* ----- end navi ----- */
以上です。どうぞ宜しくお願いします。
|
|
|
|
コメント(6)
本当にありがとうございました
解決致しました
@kane さん
凄く解りゃすく見ゃすかったです！！！
一度コピペで試したらアっとぃぅ間にできました。
その後、色々調整してぃるぅちに段々コツをつかんできたみたぃです
←思い込みですが・・・ははは
それに比べ自分のCSS見てたら・・・
なんかめっちゃ恥ずかしぃ
これからも負けずとCSS制覇します！
本当にぁりがとぅござぃました。
療養ケィ さん、DarkDaft さん
これか
ぃゃ？こぅか
と手当たり次第入れてくぅちに収集できなくなった結果がコレです。
何処に何を入れるか、、、多分まだ変な場所に入れてるとこが沢山ぁると思ぅのですが、少しずっ理解できるょぅ頑張ります
ぁりがとぅござぃました！
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
