0

タイトル バーのリンク リストの背後に画像を正しく配置できません。左の配置を調整しようとしましたが、失敗し続けています。誰もが使える解決策を見つけたいと思います。ありがとう！

http://thefishonthedome.com/index.html

これは私が話していることの例です。MBACK コア

以下のコード:

   <div class="header">
        <div id="menu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about_us.html">About Us</a></li>
            <li><a href="reviews.html">Reviews</a></li>
            <li><a href="kids_art.html">Kids' Art</a></li>
           (For Example) <li><img alt="" id="mback"3 src="images/fish.png"><a href="contact_the_fish.html">Contact The Fish</a></li>
          </ul>
        </div>
      </div>

CSS:

/*Menu Style (Same All Through)*/
#menu ul{
  list-style-type:none; 
}
#menu li{
  display:inline;
  font-family: 'Alef', sans-serif;
  font-size: 30px;
  padding-right:22px;
}
#menu{
  text-align:center;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

/*Fish Position*/
/*Index Page*/
#mback{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*About Us*/
#mback2{
  z-index: -1;
  height:75px;
  width:150px;
  position: absolute;
  top:0;
  left:0;
}
/*Contact The Fish*/
#mback3{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*Reviews*/
#mback4{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*Kids Art*/
#mback5{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
4

2 に答える 2

1

このようなもの？

jsFiddle のデモはこちら

CSS

#menu ul{
   list-style-type:none; 
}
#menu li{
     display:inline;
     font-family: 'Alef', sans-serif;
     font-size: 20px;
     padding:38px;
}
#menu{
     text-align:center;
     position: absolute;
     top:0;
     left:0;
}  
.active {
     background: url('http://thefishonthedome.com/images/fish.png') -6px 20px / 130px 64px no-repeat;
}

クラスの使い方に注意.active

  <ul>
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about_us.html">About Us</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    <li><a href="kids_art.html">Kids' Art</a></li>
    <li><a href="contact_the_fish.html">Contact</a></li>
  </ul>
于 2013-09-07T02:49:43.177 に答える
1

魚の画像を背景画像にして、その上にテキストを配置します

#menu li {
    background: url(images/fish.png) no-repeat;
    font-size: 30px;
    etc...
}

この投稿を参照してください: li の背景画像を使用する

于 2013-09-07T02:40:38.087 に答える