Javascript Nivo滑块似乎在header div中放置了一个内联css高度
我正在使用一个名为的模板 我想调整滑块和标题的大小,这是无烟煤的颜色。但是,滑块似乎将内联CSS放置在标题div中的高度与我想要的不同…我尝试了以下方法:Javascript Nivo滑块似乎在header div中放置了一个内联css高度,javascript,css,slider,nivo-slider,inline-styles,Javascript,Css,Slider,Nivo Slider,Inline Styles,我正在使用一个名为的模板 我想调整滑块和标题的大小,这是无烟煤的颜色。但是,滑块似乎将内联CSS放置在标题div中的高度与我想要的不同…我尝试了以下方法: 在谷歌上搜索-找不到结果,找到了一个教程,但它没有解释任何关于将高度放入div的内容 更改了nivo滑块的foldername,使其无法工作-CSS内联高度消失 将header div的名称更改为headers,这很有效-内联CSS消失了 查看了JavaScript,但我对此了解不多,也找不到任何带有文本“header”(div名称)的文本
- 在谷歌上搜索-找不到结果,找到了一个教程,但它没有解释任何关于将高度放入div的内容
- 更改了nivo滑块的foldername,使其无法工作-CSS内联高度消失
- 将header div的名称更改为headers,这很有效-内联CSS消失了
- 查看了JavaScript,但我对此了解不多,也找不到任何带有文本“header”(div名称)的文本
<div id="wrapper">
<!-- HEADER -->
<div id="header">
<a href="index.html"><img id="logo" src="img/logo.png" alt="Nova" /></a>
<!-- Social -->
<div id="social-holder">
<ul class="social">
<li><a href="http://www.facebook.com" class="poshytip facebook" title="Become a fan"></a></li>
<li><a href="http://www.twitter.com" class="poshytip twitter" title="Follow our tweets"></a></li>
<li><a href="http://www.dribbble.com" class="poshytip dribbble" title="View our work"></a></li>
<li><a href="http://www.addthis.com" class="poshytip addthis" title="Tell everybody"></a></li>
<li><a href="http://www.vimeo.com" class="poshytip vimeo" title="View our videos"></a></li>
<li><a href="http://www.youtube.com" class="poshytip youtube" title="View our videos"></a></li>
</ul>
</div>
<!-- ENDS Social -->
<!-- Navigation -->
<div><ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">HOME</a></li>
<li><a href="features.html">FEATURES</a>
<ul>
<li><a href="features-appearance.html"><span> Appearance</span></a></li>
<li><a href="features-columns.html"><span> Columns layout</span></a></li>
<li><a href="features-accordion.html"><span> Accordion</span></a></li>
<li><a href="features-toggle.html"><span> Toggle box</span></a></li>
<li><a href="features-tabs.html"><span> Tabs</span></a></li>
<li><a href="features-infobox.html"><span> Text box</span></a></li>
<li><a href="features-monobox.html"><span> Icons</span></a></li>
</ul>
</li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="gallery.html">GALLERY</a>
<ul>
<li><a href="gallery.html"><span> Four columns </span></a></li>
<li><a href="gallery-3.html"><span> Three columns </span></a></li>
<li><a href="gallery-2.html"><span> Two columns </span></a></li>
<li><a href="video-gallery.html"><span> Video gallery </span></a></li>
</ul>
</li>
<li><a href="http://luiszuno.com/blog/downloads/shinra-html-template">DOWNLOAD</a></li>
</ul></div>
<!-- Navigation -->
<!-- search -->
<div class="top-search">
<form method="get" id="searchform" action="#">
<div>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>
<!-- ENDS search -->
<!-- headline -->
<div id="headline">
</div>
<!-- ENDS headline -->
<!-- Slider -->
<div id="slider-block">
<div id="slider-holder">
<div id="slider">
<a href="http://www.luiszuno.com"><img src="images/01.jpg" title="Visit my web site regularly and get freebies each week!" alt="" /></a>
<a href="http://themeforest.net/user/Ansimuz/portfolio?ref=ansimuz"><img src="images/02.jpg" title="Support the freebies buying high quality premium themes from my portfolio at themeforest" alt="" /></a>
</div>
</div>
</div>
<!-- ENDS Slider -->
</div>
<!-- ENDS HEADER -->
在
js/custom.js
第144行
$('.home#header').height($('#headline').height()+430)代码>
这添加了一个内联样式来修改#header
的高度,我怀疑初始化东西的JavaScript就是找到有趣部分的地方。啊!奇怪的是,我在NIVOJS脚本中找不到它,非常感谢!你是怎么追溯的?下次出现类似问题时,知道可能会很方便。@Jeffrey我查看了模板的演示,查看了源代码以查看head标记中包含的脚本列表。对于作者来说,custom.js似乎是放置自定义javascript的合理位置,因此我首先查看了那里,发现了令人不快的一行。没什么特别的,只是知道去哪里看。
body {
line-height: 1;
color: #696969;
background: #f1f1f1 url(../img/bg/webtreats/webtreats_blue_creme_pattern_87.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
#wrapper{
width: 966px;
margin: 30px auto;
background: #363636;
min-height: 700px;
font-size: 14px;
line-height: 1.5em;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header{
height: 200px;
position: relative;
z-index: 10;
}
#main{
background: #ffffff;
position: relative;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#content{
min-height: 400px;
overflow: hidden;
margin-bottom: 40px;
}
#footer{
position: relative;
color: #fff;
}
#logo{
position: absolute;
top: 40px;
left: 30px;
}
body.home #header{
height: 170px;
position: relative;
z-index: 10;
}