Nivo-slider 似乎在标题 div 中放置了内联 css 高度

Question

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

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

• 在 Google 上搜索 - 找不到结果，找到了教程，但没有解释任何有关将高度放入 div 的内容。
• 更改了 nivo-slider 的文件夹名称，使其无法正常工作 - CSS 内联高度消失了。
• 将标题 div 的名称更改为标题，这可以正常工作 - 内联 CSS 消失了
• 查看了 JavaScript，但我对此了解不多，找不到任何带有文本“标题”（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 -->

CSS 部分：

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

Answer 1

在js/custom.js 第 144 行

$('.home #header').height($('#headline').height() + 430);

这增加了一个内联样式来修改#header的高度。