こんにちは。
CSSで<li>を使って横並びメニューを作っているのですが、メニューのイメージとイメージの隙間を空けるにはどうすればよいのでしょうか?
現在の記述はこうです。
-----------------html------------------------
<div id="menu">
<ul>
<li id="menu01"><a href="index.html"></a></li>
<li id="menu02"><a href="business.html"></a></li>
</ul>
</div><!--menu-->
-----------------css------------------------
#menu ul{
margin:95px 0 0 25px;
padding:0;
width:100%;
float:left;
list-style:none;
}
#menu ul li{
float:left;
}
#menu ul a{
text-decoration:none;
display:block;
width:125px;
height:30px;
}
#menu ul a:hover{
text-decoration:none;
display:block;
width:125px;
height:30px;
}
#menu01 a{
background-image:url(img/menu01a.gif);
background-left:0 0;
}
#menu01 a:hover{
background-image:url(img/menu01b.gif);
background-position:0 0;
}
#menu02 a{
background-image:url(img/menu02a.gif);
background-position:0 0;
}
#menu02 a:hover{
background-image:url(img/menu02b.gif);
background-position:0 0;
}
現状だと、画像(menu01.gif)と画像(menu02.gif)がどうしてもつながってしまうんです。
どなたかご教授いただけませんでしょうか。
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
<a href="index.html"></a> は危ないかな。
#menu ul a:hover{ は不要かな。
必要ならbackground関連でも全統一設定しておけば良いかも。
基本的には、
a も a:hover も同じ内容なら a:hover の重複分不要。
background-left:0 0; これは?
=====================
実際、ケースバイケースだけど、
<a href="index.html">○○</a>
で、
画像置換えを利用するとか、
#menu ul li{
float:left;
width:130px; /* こうとか */
}
#menu02 a{
background:url(img/menu02a.gif) 2px 0 no-repeat;
/* こうとか */
}
他にも色々と・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
インターネット用語について教...
-
SBI証券に繋がらないのですが
-
ASPで取得した情報をscriptタグ...
-
XPERIASO-01Gを使用してます こ...
-
Qoo10で注文をキャンセルしたら...
-
ネットの検索に引っかかるには
-
スマホ用サイトのURL
-
画像録画ソフト Apower RECの解...
-
有料サイトの開設方法
-
FC2 BLOG <AUDIO TAGを入れプ...
-
ホームページ
-
サーバーログイン情報とFTP接続...
-
自分のドメインが他者のサイト...
-
インターネットの環境をポケッ...
-
Slackの料金体系に詳しい方教え...
-
アフェリエイトって登録したサ...
-
任意団体名でも開設できますか
-
あいみょんというワードが検索...
-
イントラネットを構築したい
-
FC2掲示板に広告を表示させる方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Qoo10で注文をキャンセルしたら...
-
画像録画ソフト Apower RECの解...
-
インターネット用語について教...
-
LINE でリンク先を投稿すると ...
-
http://cloth-gallery.net/inde...
-
任意団体名でも開設できますか
-
イントラネットを構築したい
-
MP3のURLが知りたい
-
Slackの料金体系に詳しい方教え...
-
サーバーログイン情報とFTP接続...
-
au光のIPv4/IPv6デュアルスタッ...
-
aspの記述がコメント表示されて...
-
XPERIASO-01Gを使用してます こ...
-
自分のドメインが他者のサイト...
-
容量の多さについて
-
ホームページが、見られません。
-
海外でも報酬を受け取れるアフ...
-
貸借対照表について
-
ASPで取得した情報をscriptタグ...
-
プログラミングに触れて見たい
おすすめ情報