Shinraというテンプレートを使用しています。
無煙炭色のスライダーとヘッダーのサイズを変更したいと思います。ただし、スライダーがヘッダー div にインライン CSS を入れて、希望とは異なる高さになっているようです...次のことを試しました:
- Google で検索 - 結果が見つからず、チュートリアルが見つかりましたが、div に入れられる高さについては何も説明されていませんでした。
- nivo-slider のフォルダ名を変更して動作しないようにしました - CSS のインラインの高さが消えました。
- ヘッダー div の名前をヘッダーに変更しました。これは機能します - インライン CSS が消えました
- JavaScript を調べましたが、それについてはよくわからず、テキスト「ヘッダー」(div の名前) を含むテキストが見つかりませんでした。
したがって、スライダーがこの高さをヘッダーと呼ばれる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;
}