定心体和大滑块 [英] centering body and big slider

查看:188
本文介绍了定心体和大滑块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经设法取消了我的身体,同时尝试在后台放置滑块,因此它也居中,所以即使调整窗口大小也保持居中。



如果您的浏览器允许缩小网站,您可以看到该网站位于中心,但是当您打开它并且滑块图像太大时,它只会与窗口的左边缘对齐。



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



css在这里:

  #billboardWrapper { height:600px; width:1800px; margin:-170px auto auto;位置:相对; 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%;背景位置:50%0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:auto;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px; text-align :auto;}

html是(使用firebug拷贝为html是shopify液体)

 < html> 
< head>
< body id =welcomeclass =indexdata-twttr-rendered =true>
< div id =body>
< div id =utility-wrap>
< div id =header-wrap>
< div id =content-wrap>
< script type =text / javascriptsrc =// dk0684j3ynpoi.cloudfront.net/assets/client.js\">
< div id =gatekeeper-contentclass =>
< div id =body>
< div id =billboardWrapper>
< span id =billboardPrev>上一页< / span>
< span id =billboardNext>下一页< / span>
< div id =billboard>
< div class =slide slideRightLayoutstyle =position:absolute; top:0px; left:0px; z-index:2; opacity:0; display:none; width:1800px; height:600px; >
< div class =slide slideRightLayoutstyle =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]

解决方案

删除 left:40px #billboardPrev,#billboardNext on style.css line 287将使滑块内的上一个图标可见,即使您缩小浏览器。



此外,您的下一步图标不显示。要在style.css第288行显示 background-position:0 -41px; 上的变化 #billboardNext p>

您的滑块图片太大。



解决方案:





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



#gatekeeper-content 使用以下背景和CSS。



  background-repeat:repeat-x 

滑块图像裁剪为960像素宽。还要尝试在代码上使用 position:relative


I've managed to uncenter my body while trying to position my slider in the background so that it is also centered and so that it remains centered even when the window is resized.

The site is live if your browser allows to zoom out you can see that the site is centered but when you open it and the slider image is too big it just aligns with the left edge of the window.

I am self-taught so maybe I have missed something or just need some guidance how to fix this. please HELP!

the css is here:

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

the html is (copied with firebug as the html is shopify liquid)

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

![here is what it looks like zoomed out][2] ![with a narrow resolution the slider aligns with the left side of the window and shifts][3] ![this is what I am aiming at?!??][4]

解决方案

Removing the left:40px from #billboardPrev, #billboardNext on style.css line 287 will make the previous icon visible inside the slider even though you zoom-out the browser.

Also your "Next" icon is not displaying. To display that change background-position: 0 -41px; on #billboardNext in style.css line 288.

Your slider image is too big. Thats why it is shifting when zoom-in and out.

Solution:

Instead of using that big image, split it into 2 imges.

Use the following image as your slider image:

and for your #gatekeeper-content use the following background and CSS.

background-repeat: repeat-x;

The slider image is cropped to 960px width. Also try to use position:relative on your codes.

这篇关于定心体和大滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆