我对嵌入到轮播中的背景图像有疑问。单击此处我注意到,当我从一张幻灯片单击到另一张幻灯片时,我网站上的背景图片会移动到不合适的位置。我的轮播的边缘顶部当前设置为margin-top:-275px;
,背景图像设置为margin-top:-64px;
我有点担心这些设置。
有没有人可以解决这个问题?
要激活幻灯片,请单击导航栏下的红色细选项卡
我对嵌入到轮播中的背景图像有疑问。单击此处我注意到,当我从一张幻灯片单击到另一张幻灯片时,我网站上的背景图片会移动到不合适的位置。我的轮播的边缘顶部当前设置为margin-top:-275px;
,背景图像设置为margin-top:-64px;
我有点担心这些设置。
有没有人可以解决这个问题?
要激活幻灯片,请单击导航栏下的红色细选项卡
我想那是因为你有
.rslides li {
top:0;
}
它对position:relative
(并且当前幻灯片有)没有任何作用,但它使用position:absolute
(隐藏的幻灯片)向下移动幻灯片。
当您单击一个选项卡时,有一段时间新选项卡会淡入,但还position:relative
没有。然后,在那一刻,新幻灯片不在您想要的位置。
所以删除那条线。
发生跳跃是因为您在动画切换结束时将LI
项目从切换position: absolute;
到。position: relative;
这可以通过删除您的 CSS 规则来避免:
.rslides li { left: 0; top: 0; }
指定width
andheight
很好,但是一旦你指定left
and top
- 然后从相对定位切换到绝对定位,你就会看到你所看到的跳跃。
至于每个面板的定位 - 它与您布置盒子的方式有关。您指定的尺寸对于您提供的内容来说不够大。例如:<div id="header">
是37px
高,这是社交媒体按钮的合适大小,但您也可以将它作为容器#nav-menu
UL
- 这是另一个102px
高。
看来,为了纠正这一点并使事情重叠,您正在使用负边距 - 这让您都被抛弃了。
我的建议是使用标准化的布局系统,例如以下任何一种:
并使用它来执行您的布局任务,而不是尝试使用混合绝对/相对定位自行制作重叠图层。
或者,如果您要走重叠层路线(同样,不建议),请真正承诺。在整个布局中绝对定位事物。
为了实现这一点,您可能会考虑 CSS 规则,例如:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
再一次 - 这是更多的工作,更难维护并且更不优雅 - 但至少会给你带来一致的间距/尺寸。