• ベストアンサー

CSSでの<ul><li id=n><a>での表示に付いて

初めて質問させて頂きます。仮に作ったサイト名が次の通りです。 http://yusukeinoue.web.fc2.com/271p/271p.html Firefox、Operaで<#sidenavi>での<ul><li id=n><a>のCSSが間違っているのかimgが表示されないのです。CSSは以下の様な感じで } #wrapper #sidenavi ul { list-style-type: none; font-size: 10px; margin: 0px; padding: 0px; display: block; } #wrapper #sidenavi li a { display: block; margin: 0px; padding: 0px; height: 30px; width: 200px; font-size: 12px; text-decoration: none; } #sidenavi li#1 { background-image: url(images/bButton1.gif); background-repeat: no-repeat; margin: 0px; padding: 0px; height: 30px; width: 200px; } #sidenavi li#2 { background-image: url(images/bButton2.gif); background-repeat: no-repeat; margin: 0px; padding: 0px; height: 30px; width: 200px; id=liはそのあとも続くのですが、<em></em>で非表示にしています } #sidenavi em { visibility: hidden; } 使用環境はMacOX10.4.7、DreamweaverMXです。safariでは問題なく表示されます。 参考書籍通りに<ul><li>をボックス化して、インラインにし背景画像を 埋め込むと言う作業でした。 それ以上は書いていないので分かりません。。。 ご教授のほどお願いいたします

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

  • ベストアンサー
  • webtera
  • ベストアンサー率57% (40/70)
回答No.2

I.Eでは、表示できていません。  画像で無理な場合は、一度はずして、背景色を適当に指定して、表示されれば画像のデータがアップできていないか、画像までのパスが間違っていると思います。  見本では、リストテキストが見えませんが、リストのブロック状態になっていますので、背景画像指定だけが問題だと理解します。  それと、サーバーのデータに、この背景画像がアップされているかも確認する必要があります。  ちなみに #xx #yy liというのは、  ID xx の中にある ID yy の●●   というように指定方法は間違っていないと思います。  No.1の方の言うように、数字の前に英字で名前をつける必要があります。  

echo170en
質問者

お礼

ご回答ありがとうございます。 NetscapeおよびSafariでは表示の確認が出来てます。 画像のアップロードは確認しましたがありました。パスは改めて調べてみます、ありがとうございます。 確かに<li>のブロック化で幅・タテを教則本通りに指定して背景を設定すると書かれてます。 おっしゃる通り今日、画像を外してアップしてみます。 またよろしくお願いします。

echo170en
質問者

補足

原因が分かりました?。CSSの<li id=xxx>で背景を設定した「ボックス」の大きさを入力していなかったのが原因でした?。 今の所WinでIE・FireFox○。MacintoshでFireFox○Opera○です。 webteraさんが言われた様に「背景に色」をしているので一瞬2段目と3段目に青とピンクが出ます。 #xx#yyは良いんですよね。ちょっと不安ですけども。 id=xxにはこれから英字をつける様にします。 大変助かりました。ありがとうございました。 引き続きおかしな点ありましたらお願いいたします

その他の回答 (2)

  • tany180sx
  • ベストアンサー率63% (239/379)
回答No.3

#1です。 構文は正しいですが、普通は#xx .yy か .xx #yy に なるんじゃないかと思っただけです。すいません。 汎用的にidを使いまわすのは個人的には避けたいです。

echo170en
質問者

補足

すみません。初心者で本当に面倒おかけします。 #xx #yyは「新規スタイルシート」で「CSSセレクタと疑似クラス」で作ったもにが全てです。 解説本に詳しいことが書いてないのですがDiv"xx"で括った中の更なるDiv"yy"と言うことで そうなるのかなぁ?と思っていました。 #xx.yyや.xx#yyでも良いのですねー。試してみます。 ホント良くない本を買ったんだなぁ>_< ;。 URLありがとうございます。今の所チンプンカンプンですが頑張って勉強して行きたいと思います。

  • tany180sx
  • ベストアンサー率63% (239/379)
回答No.1

気になる点を。 ・idは一意性のあるものなので #xx #yy の指定はおかしい。 ・idがアルファベットから始まっていない id="1"

参考URL:
http://hp.vector.co.jp/authors/VA022006/css/selector.html#id-selectors
echo170en
質問者

お礼

ありがとうございます。CSS初心者でお手数お掛けします。今勉強中、山のふもとと言った状態です。 >・idは一意性のあるものなので #xx #yy の指定はおかしい。 そうなんですか?教則本通りにしてたので疑問も持たずしておりました。 ちなみに#xxはDivコンテナでさらに次の#yyはその中のコンテナという感じです。 では?。解説本全部間違っているのだぁ???。 「高柳ヤヨイ」の「至極のCSSデザイン!パーフェクトブック」なのですがお持ちの方いましたらまた更にお願いします。 id="数字"は駄目なのですね。すみません。省略して、無知でした。

関連するQ&A

専門家に質問してみよう