1

編集: ここに jsFiddle があります: http://jsfiddle.net/7hSny/

CSS で背後に画像があるリンクを配置しようとしています。これは私がそれをどのように持っているかのプレビューです:

プレビュー http://piclair.com/data/odjkf.jpg

ホーム、カンパーニュなどの単語は、メニュー バーの中央に配置する必要があります。HTML は醜いかもしれません。いろいろ試しましたが、適切に配置できません。

ここに私のHTMLがあります:

<div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="img/Menu_Home_Selected.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>

CSS は次のとおりです。

#navigation{
background-image: url(img/Navbar.png);
background-repeat: no-repeat;
width:955px;
color: #FFF;
float: left;
border:1px solid blue;
}

#current_page {
margin: -22 0 0 0px; 
width:164px;
min-height: 124px;
background-image: url(img/Selected.png);
background-repeat: no-repeat;
}

#nav {
min-height: 28px;
margin: 5 0 0 -14px;
}

#nav ul, li {
list-style: none;
}

#nav li {
width:164px;
}

.navlink p (
display: block;
margin: 35 35 35 35px;
}

現在、次のようになっています: プレビュー http://piclair.com/data/mdc5z.jpg

4

3 に答える 3

1

マークアップには、最適化できることがいくつかあります (「醜い」と言ったように)。Web カラーを使用できる画像は使用しないでください。画像テキストの場合、画像が表す実際のテキストを html に入れbackground-image、css で実際の jpg に使用します。垂直方向のセンタリングは (表のセルを使用していない限り) 本来あるべきほど簡単ではありませんが、多くの場合、上下のパディングまたは行の高さを使用できます。

これは、いくつかの更新されたフィドルです。お役に立てれば。

また、さまざまな垂直方向の配置方法が記載されたこのブログ投稿もご覧ください。私の場合は、これらのいずれかが機能するはずです。

于 2013-01-02T16:52:57.363 に答える
0

これで解決することを願っています..これがあなたが望んでいたものかどうかがわかったら、残りの詳細を更新します.

http://jsfiddle.net/7hSny/7/

htmlを修正しました。

    <div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="http://i45.tinypic.com/30ihnkk.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>
于 2013-01-02T14:50:40.823 に答える
0

gettyimages (およびその css スプライトシート) と同じ手法を使用して、単純な css スプライトシートを実行することをお勧めします。そうすれば、セマンティックとスタイリングをより有効に活用できます。

list を使用したナビゲーションを考えてみましょう:

<ul class='nav'>
  <li class='home'><a href='#'>Home</a></li>
  <li class='campagne'><a href='#'>Campagne</a></li>
  ...
</ul>

次に、単純な CSS でスタイルを設定します。

ul.nav
{
   display: block;
   height: 50px;
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.nav li
{
   float:left;
   display: block;
}

ul.nav li a
{
   display: block;
   height: 100%;
   background: url(img/nav.jpg) no-repeat 0px 0px;
   text-indent: -9999px;
}

次に、シンプルなスプライトシートを使用してボタンを「ペイント」します (スプライトシートのチュートリアル):

ul.nav li.home a
{
   width: 50px;
   background-position: 0px 0px;
}

ul.nav li.home a:hover { background-position: 0px -50px; }

ul.nav li.campagne a
{
   width: 80px;
   background-position: 50px 0px;
}

ul.nav li.campagne a:hover { background-position: 50px -50px; }
于 2013-01-02T16:24:42.410 に答える