0

左上に大きな会社のロゴがあるサイトをコーディングしています。

そのため、背景画像としてロゴ、H1 に会社名を使用してコーディングし、画像置換技術を使用して H1 を非表示にします。

しかし、サイトの残りのナビゲーションには「ホーム」リンクはありません。ロゴはおそらく「ホーム」リンクを意図しています。しかし、セマンティック/イメージ置換技術により、クリックするものは何もありません。

この状況であなたはどうしますか？ロゴの上に透明なものを配置するのが最初の考えですが、他の提案を聞きたいです.

4

1 に答える 1

6

非常に単純<a href="/home">Company name</a>です-H1要素の内側に配置し、画像置換スタイルをh1#logo a（または使用するセレクター）に適用します。display:block;アンカーを正しく動作させるには、スタイルに追加する必要があります。

これ以上の詳細が必要な場合はお知らせください。

追加の詳細：

OK-私は通常、画像の置換に次のHTMLとCSSを使用します。

HTML：

<h1 id="logo">
    <a href="/home" title="Back to the home page">[Company name]</a>
</h1>

CSS

#logo a {
  display:block;
  width: 200px; /* Or whatever you like */
  height: 0;
  padding-top: 100px; /* The required height */
  text-indent: -999em; /* negative text indent, leaves the box alone, and in ems to scale with text */
  overflow: hidden;
  background: /*whatever you like */;
}

これは一種の「ダブルストレングス」です。height：0 / padding-topテクニックを使用すると、必要なサイズのボックスが作成されますが、テキストを表示する余地はありません（背景画像は上部のパディングに表示されますが、テキストは表示されます）しません）。大きなネガティブテキストインデントは、時々問題が発生するブラウザの安全性にすぎません（古いWebキットには問題がありましたが、最近はそれほど問題にはなりません）。

どうやって行くのか教えてください！

于 2011-11-11T20:55:33.753 に答える