0

Webページの下部からDIVを上にスライドさせるJavascriptを使用し、それを絶対的な下部中央に配置しようとしました。

一番下のDIVは左下のようで、ブラウザのウィンドウサイズに関係なく中央に配置しようとしました。

問題のページを確認するには、次のURLを参照してください：http ：//s361608839.websitehome.co.uk/oneonly/index.html

HTML：

<div class="slide-out-div">
  <a class="handle" href="http://link-for-non-js-users">Content</a>
  <a href="mailto:name@domain.com">name@domain.com</a><br /><br />
  <p>Address</p>
  <p>Telephone</p>
</div>

CSS：

.slide-out-div {
  padding: 20px;
  width: 276px;
  background: url(images/kontakt-bg.png);
  color: #fff;
}

JS：

$(function(){
  $('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                        //class of the element that will be your tab
    pathToTabImage: 'images/kontakt-tab.png',    //path to the image for the tab (optionaly can be set using css)
    imageHeight: '26px',                         //height of tab image
    imageWidth: '316px',                         //width of tab image    
    tabLocation: 'bottom',                       //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                  //speed of animation
    action: 'click',                             //options: 'click' or 'hover', action to trigger animation

    fixedPosition: false                         //options: true makes it stick(fixed position) on scroll
  });
});

ありがとう！

4

3 に答える 3

0

追加

left: 50%;
margin-left: -138px; /* half its width which you have set to be 276px */

to .slide-out-div（開発者ツールを介してライブ編集するときに機能します）。

于 2012-09-11T12:56:31.590 に答える
0

左の位置を追加する必要があります.slide-out-div

<div class="slide-out-div"
    style="line-height: 1; position: fixed; bottom: -124px; width: 300px; left: 50%; margin-left: -150px; ">

負のマージンは幅の半分です。

于 2012-09-11T12:58:15.630 に答える
0

これを.slide-out-divクラスに追加します

margin-left: -138px; /* half of the width of the div */
left: 50%;
于 2012-09-11T13:00:02.547 に答える