Javascript Nivo滑块似乎在header div中放置了一个内联css高度

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名称)的文本

我正在使用一个名为的模板

我想调整滑块和标题的大小,这是无烟煤的颜色。但是,滑块似乎将内联CSS放置在标题div中的高度与我想要的不同…我尝试了以下方法:

  • 在谷歌上搜索-找不到结果,找到了一个教程,但它没有解释任何关于将高度放入div的内容
  • 更改了nivo滑块的foldername,使其无法工作-CSS内联高度消失
  • 将header div的名称更改为headers,这很有效-内联CSS消失了
  • 查看了JavaScript,但我对此了解不多,也找不到任何带有文本“header”(div名称)的文本
所以看起来滑块将这个高度放在了一个叫做header的div中,但我找不到任何关于它的信息……有人知道解决方案吗

HTML部分:

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