3

スライダーを背景に配置しようとしているときに、体の中心を外すことができたので、スライダーも中心に配置され、ウィンドウのサイズが変更されても中心に配置されたままになります。

ブラウザーでズームアウトが許可されている場合、サイトはライブです。サイトが中央に配置されていることがわかりますが、それを開いてスライダー画像が大きすぎると、ウィンドウの左端にちょうど整列します。

私は独学なので、何かを見逃しているか、これを修正するためのガイダンスが必要なだけかもしれません. 助けてください！

CSSはここにあります：

#billboardWrapper {height:600px;width:1800px; margin:-170px auto auto; position:relative; overflow:hidden;  }

#billboard {height:600px;width:1800px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}

#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }

.slide {height:600px;width:1800px;display:none;  } 
.slide img {height:600px;  width:100%; background-position: 50% 0pt;  
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:auto;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:auto;}

html は (html は shopify 液体であるため、firebug でコピーされます)

<html>
<head>
<body id="welcome" class="index" data-twttr-rendered="true">
<div id="body">
<div id="utility-wrap">
<div id="header-wrap">
<div id="content-wrap">
<script type="text/javascript" src="//dk0684j3ynpoi.cloudfront.net/assets/client.js">
<div id="gatekeeper-content" class="">
<div id="body">
<div id="billboardWrapper">
<span id="billboardPrev">Previous</span>
<span id="billboardNext">Next</span>
<div id="billboard">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0; display: none; width: 1800px; height: 600px;">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 1800px; height: 600px;">
<img alt="" src="http://static.shopify.com/s/files/1/0059/9612/t/10/assets/slideTwo.jpg?108526">
</div>
</div>
</div>
</div>

![これがズームアウトした様子です][2] ![狭い解像度では、スライダーはウィンドウの左側に合わせて移動します][3] ![これが私が目指しているものですか?!??] [4]

4

1 に答える 1

3

style.cssの287行目を削除すると、ブラウザをズームアウトしても、スライダー内に前のアイコンが表示されleft:40pxます。#billboardPrev, #billboardNext

また、「次へ」アイコンが表示されていません。その変更background-position: 0 -41px;を#billboardNextstyle.cssの288行目に表示します。

スライダーの画像が大きすぎます。そのため、ズームインおよびズームアウト時にシフトします。

解決：

その大きな画像を使用する代わりに、2つの画像に分割します。

次の画像をスライダー画像として使用します。 小さなスライダー画像

そしてあなたの#gatekeeper-content使用のために以下の背景とCSS。

スライダーの背景

background-repeat: repeat-x;

スライダー画像は960px幅にトリミングされます。またposition:relative、コードで使用してみてください。

于 2012-05-23T10:09:15.890 に答える