定心本体和大滑(centering body and big slider)

2019-09-17 10:53发布

我已经成功地uncenter我的身体,而试图放置我的滑块在后台执行,这样它也居中,并使其保持甚至当窗口大小居中。

该网站是活的,如果你的浏览器可以缩小你可以看到,该网站为中心,但是当你打开它,滑块图片太大,它只是与窗口的左边缘对齐。

我是自学成才的,所以也许我错过了一些东西,或只是需要一些指导如何解决这个问题。 请帮忙!

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液体)

<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]

Answer 1:

卸下left:40px#billboardPrev, #billboardNext上的style.css线287将使下一个图标,即使你缩小浏览器中的滑块内可见。

此外,您的“下一步”图标不显示。 要显示改变background-position: 0 -41px;#billboardNext中的style.css线288。

你的滑块图片太大。 这就是为什么它被转移时,放大和缩小。

解:

而不是使用大图像,将它分成2个imges。

使用下面的图像作为滑块的图像:

和为贵#gatekeeper-content使用下面的背景和CSS。

background-repeat: repeat-x;

滑块图像被裁剪到960像素的宽度。 也可以尝试使用position:relative你的代码。



文章来源: centering body and big slider