0

私は2つの別々の作業「オブジェクト」を持っています

全体が CSS で動作するメニューバー。ここで動作することを確認してください：http://jsbin.com/EMEraZu/1/edit?html,css,js,output

そして、ここに派手な CSS/Java スライドショーがあります: http://jsbin.com/ijUW/1/edit?html,css,js,output

これらは、1 つのページにまとめようとするまでは完全に機能しますが、CSS が台無しになります。現在、スライドショーのすべてのサムネイルはリスト項目 (li) 要素です。私の初心者の意見では、これは UL および LI と競合しています。メニューバーの要素。これが問題ですか？メニューバーのdivタグを作成して修正してみました。しかし、私は運がありませんでした。助言がありますか？

以下のCSSとHTMLをコピーしました

 #menubar ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#menubar ul li {
  font: 18px;
  font-family: latolight;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#menubar ul li:hover {
    background: #555;
    color: #fff;
    font-family: latolight;
}
#menubar ul li ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#menubar ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#menubar ul li ul li:hover { background: #666; }

#menubar ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

<div id="menubar">
<ul>
  <li>Home</li>
  <li>Title
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul></li>
  <li>
    Title2
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </li>
</ul>
</div>

//* 上記はメニューバーのコードで、以下のギャラリー コードと競合します。

#gallery{

    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url(img/panel.jpg) repeat-x bottom center #ffffff;

    /* The width */
    width:920px;
    overflow:hidden;
}

#slides{

    height:400px;

    /* jQuery willchange the width later on to the sum of the widths of all the slides. */
    width:920px;
    overflow:hidden;
}

.slide{
    float:left;
}

#menu{
    /* container for the thumbnails */
    height:90px;
}


li{
    /* Every thumbnail is a li element */
    width:120px;
    display:inline-block;
    list-style:none;
    height:90px;
    overflow:hidden;
}

li.inact:hover{
    /* The inactive state, highlighted on mouse over */
    background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg.png) no-repeat;
}

.fbar{
    /* The left-most vertical bar */
    width:2px;
    background:url(img/divider.png) no-repeat right;
}

li a{
    display:block;
    background:url(img/divider.png) no-repeat right;
    height:70px;
    padding-top:10px;
}

a img{
    border:none;
}

<div id="main">




  <div id="gallery">

    <div id="slides">

    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/1.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/2.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/3.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com" target="_blank"><img src="img/sample_slides/4.jpg" width="920" height="400" alt="side" /></a></div>

    </div>

    <div id="menu">

    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/thumb_1.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_2.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_3.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_4.png" alt="thumbnail" width="85" /></a></li>
    </ul>


    </div>

  </div>

</div>
</body>
</html>

それらが衝突している理由について、どんなアイデアでも大歓迎です。

4

1 に答える 1

0

親IDを追加してメニューcssで行ったように、ギャラリーcssは、スタイルを設定する要素をより具体的にする必要があると思います。gallery cssにはidがないため、すべてのli要素に影響します

于 2013-08-22T16:09:23.797 に答える