1

JSFiddleにHTML/CSSプロジェクトがあり、jsfiddleZyBZTにいくつかの問題があります。

  • は<DIV class"footer">下部に表示されていません。
  • 背景画像が表示されない：url('http://i.imgur.com/z5vCh.png')
  • スプライト画像が<UL>リストに表示されていません。

元々、スプライトは機能していましたが、私が追加したものは、次のようなスプライトCSSコードを変更していません。

#nav {
  list-style-type:none; /* removes the bullet from the list */
  margin:20 auto;
  text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
  white-space:nowrap; /* ensures text stays on one line */
  width:600px; /* Allows links to take up proper height */
}
#nav li {
  display: inline-block;
  text-align: center;
  width: 192px;    
}
#nav a {
  background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
  display: block;
  height: 50px; /* This allowed the buttons to be full height */
  color: Blue;
}
#nav a:hover {
  background-position: 0 -50px;
  color:Red;
}
#nav .active, a:hover {
  background-position: 0 0;        
  color: Black;
}
#nav .active:hover {
  background-position: 0 0;        
  color: Black;
}
#nav span {
  position:relative;
  text-align: center;
  vertical-align: middle; /* This doesn't seem to work (???) */
}
​

背景画像が機能する場合もあれば、機能しない場合もあります。

最近、私はこのFOOTER divを機能させようとしていますが、今ではもっと多くの機能が台無しになっているようです。

あるCSSが別のCSSを壊したとき、どうすればわかりますか？何かがCSSを実行しようとしてエラーが発生した場合、どうすればわかりますか？

4

3 に答える 3

2

あなたができる最善のことはすることです

  1. Firebugまたは選択したブラウザ開発ツールを使用して、ブラウザが適用しているクラス/スタイル、および効果を確認します。
  2. HTML標準を調べて、正しくコーディングしていることを確認してください。それらはしばしば直感に反することを覚えておいてください。MDNには、 HTMLレイアウト、垂直方向の配置、およびその他の多くのHTML / CSS/Javascriptトピックに関する優れた記事がいくつかあります。
于 2012-09-26T16:07:32.820 に答える
0

このために私が見つけた最高のツールはFirebugであり、それでもChromeのツールよりも優れています。要素を調べると、適用されたスタイルの階層と、オーバーライドされたスタイルが表示されます。（取り消し線付き）

これは、何が起こっているかを確認するための最良のツールです。

z-indexの問題が発生していて、text-shadowが問題を引き起こしていると思います。を削除し、z-index:-1とtext-shadow背景が動作します。

于 2012-09-26T17:01:40.250 に答える
0

フッターの問題を簡単に修正しました。

div.footer {
  bottom:0px;
  position:fixed;
  text-align:center;
}

ただし、これは主な質問に答えるものではありません。

于 2012-09-26T16:15:35.737 に答える