Контроллеры для слайд-шоу неправильно вставляются с использованием DOM

Я пытаюсь вставить мои правый и левый контроллеры по бокам моего div слайд-шоу, используя.prepend() и.append(), но вместо этого они отображаются в верхних углах окна

Вставка Javascript DOM (работает в файле.html):

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

Слайд-шоу HTML:

<body>
<div id="slice">
<div class="container">
<div id ="mainContent">


  <div id="pageContainer">

 <!-- Slideshow HTML -->
  <div id="slideShow">

    <div id="slidesContainer">

      <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 CSS webpage" /></a></p>

      </div>

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

  </div>

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

CSS:

#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;
}

.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position: absolute;
  cursor: pointer;
}
#leftControl {
  top: 0;
  left: 0;
  background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
 top: 0;
 right: 0;
 background:transparent url(control_right.jpg) no-repeat 0 0;
}
Источник

1 ответ

У вас есть позиция: абсолютная; в вашем классе.control, поэтому верхние:0 left:0 и top:0 right:0 свойства в #leftControl и #rightControl позиционируются на основе всего экрана.

Попробуйте просто перемещать элементы управления влево и вправо, как

#leftControl {
  float:left;
  background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
 float:right;
 background:transparent url(control_right.jpg) no-repeat 0 0;
}
Источник
Другие вопросы по тегам