为什么我的容器属性被覆盖？（Nivo Slider，CSS）

我在项目中首次使用Nivo Slider。我的容器保存图像有填充和背景，以适应设计，就像这样：为什么我的容器属性被覆盖？（Nivo Slider，CSS）

#slider { 
background: #fff; 
border: 1px solid #c1c1c1; 
padding: 10px; 
margin-bottom: 25px; 
clear: left; 
}

之前添加NIVO代码，一切都显示正常。现在我失去了我的背景和填充。下面是滑块代码：

/* 
* jQuery Nivo Slider v2.1 
* http://nivo.dev7studios.com 
* 
* Copyright 2010, Gilbert Pellegrom 
* Free to use and abuse under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
* 
* March 2010 
*/ 


/* The Nivo Slider styles */ 
.nivoSlider { 
position:relative; 
} 
.nivoSlider img { 
position:absolute; 
top:0px; 
left:0px; 
} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
position:absolute; 
top:0px; 
left:0px; 
width:100%; 
height:100%; 
border:0; 
padding:0; 
margin:0; 
z-index:60; 
display:none; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
display:block; 
position:absolute; 
z-index:50; 
height:100%; 
} 
/* Caption styles */ 
.nivo-caption { 
position:absolute; 
left:0px; 
bottom:0px; 
background:#000; 
color:#fff; 
opacity:0.8; /* Overridden by captionOpacity setting */ 
width:100%; 
z-index:89; 
} 
.nivo-caption p { 
padding:5px; 
margin:0; 
} 
.nivo-caption a { 
display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
position:absolute; 
top:45%; 
z-index:99; 
cursor:pointer; 
} 
.nivo-prevNav { 
left:0px; 
} 
.nivo-nextNav { 
right:0px; 
} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav a { 
position:relative; 
z-index:99; 
cursor:pointer; 
} 
.nivo-controlNav a.active { 
font-weight:bold; 
}

我敢肯定它与绝对定位和利润率做，但我已经花了一些时间调整，而且我不确定如何解决这个问题。我需要滑块图像具有完整的功能，并恢复到白色背景的填充。

任何想法？

在此先感谢。

来源

2010-08-31 Jonathan Musso

您可以制作一个包含“#slider”的“容器div”并给“#slider”留出一个边距：10px。这将创建相同的填充效果，对于背景，您可以将其添加到“容器div”的CSS中。检查我的尝试：http://meherranjan.com/nivo

来源

2010-08-31 20:12:59

除了顶部边距不存在之外，还可以按预期工作。我假设这与我的SuperFish下拉菜单有关。 – 2010-09-01 15:36:46

使用CSS CLEARFIX修复。感谢Meher。 – 2010-09-01 19:29:19

我有一个nivo滑块的副本，所以我试了一下。看起来你的CSS“#slider”放在nivo-slider的CSS之前。您只需在NivoSlider的CSS之后放置“#slider”的CSS，我认为它应该适合您。

来源

2010-08-31 18:35:12

我的#slider css在我的style.css文件中。我评论它，并将其放在nivo-slider.css的末尾，它仍然不起作用。 – 2010-08-31 19:08:57

我找到了我的网站的解决方案，我给了#slider 533px的高度，并且它被我的主题文件中找不到的任何元素样式覆盖。所以我只需将nivo-slider.css中的高度设置为“height: 533px !important;”，!important就可以覆盖元素样式。不是我理想的解决方法，但我厌倦了将我的头撞在墙上。希望它能帮助任何人。

来源

2013-06-21 21:25:40

为什么我的容器属性被覆盖？ （Nivo Slider，CSS）

回答

相关问题

为什么我的容器属性被覆盖？（Nivo Slider，CSS）