0

スライドショー div の両端にあるように、DOM を介してスライドショー div の両端に左右のコントローラーを挿入しようとしています。

これまでのところ、ブラウザ ウィンドウの上隅 (上: 0; 左: 0および上: 0; 右:左右のコントローラ ID のスタイル形式に 0 を使用) または左コントローラーは本来あるべき場所に表示されますが、右のコントローラーはスライドショーの div の反対側ではなく、左のコントローラーのすぐ下に表示されます (これを行うには、右と左のコントローラーのスタイルを変更して、今述べた前の書式設定の代わりにフロートさせました) )

スタイリングと関係があるように感じますが、ひどく間違っている可能性があります. 誰にもアイデアはありますか？

HTML:

  <div id="pageContainer">

 <!-- Slideshow HTML -->
  <div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
    <div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">

      <div class="slide">

        <h2>Web Development With PHP</h2>
        <p><a href="#"><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></a></p>

      </div>

      <div class="slide">

        <h2>Database Design with MySQL Workbench</h2>
        <p><a href="file:///C:/Users/Owner/Documents/IRWireframe/experience.html#test"><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></a></p>

      </div>

      <div class="slide">

        <h2>Web Design With CSS and HTML</h2>
        <p><a href="#"><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></a></p>

      </div>
    </div>

  </div> 
  <!-- Slideshow HTML -->

  </div>

CSS:

/*
 * Slideshow style rules.
 */
#slideShow {
    margin:0 auto;
    width:640px;
    height:263px;
    background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
    position:relative;
}
#slideShow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideShow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/** 
 * Slideshow controls style rules.
 */
.control {
  display: block;
  width: 39px;
  height:263px;
  text-indent:-10000px;
  position: absolute;
  cursor: pointer;
}
#leftControl {
  float: left;
  /*
  top: 0;
  left: 0;
  */
  background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
 float: right;
 /*
 top: 0;
 right: 0;

*/
  background:transparent url(control_right.jpg) no-repeat 0 0;
}

Javascript (HTML ドキュメントで実行):

  // Insert controls in the DOM
  $('#slideShow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
4

2 に答える 2

0

コントロールが絶対配置で配置されている場合 -

.control {
  display: block;
  width: 39px;
  height:263px;
  text-indent:-10000px;
  position: absolute;
  cursor: pointer;
}
#leftControl {
  top: 0;
  left: 0;
  background:#ff0000;
}
#rightControl {
 top: 0;
 right: 0;
  background:#ffcc00;
}

表示方法にエラーは見られません。ここhttp://jsfiddle.net/CERFY/を見ると、正しいように見えます。これに影響を与える可能性のある他のマークアップはありますか?

于 2013-07-19T04:42:33.597 に答える
0

これはうまくいくはずです：

#slideshow{
position:relative;
}
#leftControl{
float:none;
top:0;
left:0;
}
#rightControl{
float:none;
top:0;
left:0;
}

もちろん、float none を追加する必要はありません。現在これらの要素にある float:left と float:right を単純に削除できます。

于 2013-07-19T13:01:02.103 に答える