コンテンツの背後に表示しようとしている大きなグラフィックがあります。現在、グラフィックはコンテンツの背後に引き上げるのではなく、その下に配置されているため、コンテンツの下部とフッターの間に大きなギャップが生じています。参照用の大きなグラフィックは、下部にある水彩画の鳥です。内容は履歴書です。履歴書のテキストは展開するアコーディオン リンクであることに注意してください。このスペースを閉じるのを手伝ってください。
http://imip.rvadv.com/index3.html
CSS:
#bottom-graphic-container {
margin:0;
padding:0;
background:#fff url(../images/bg-bottom.jpg) bottom left no-repeat;
height:313px;
}
.wrapper{
max-width:920px;
margin:25px auto 0 auto;
padding:0;
width:100%;
z-index:1;
}
.st-accordion ul li.st-open > a{
/*margin-top:70px;*/
}
.st-open:last-child .st-content {
padding-bottom: 0;
}
.st-content{
padding: 5px 0px 100px 0px;
}
.st-content p {
font-size: 14px;
font-family: Georgia, serif;
font-style: normal;
line-height:22px;
padding: 0px 4px 15px 4px;
}
.st-accordion{
width:100%;
min-width:270px;
margin:0 auto;
}
.st-accordion ul li{
overflow: hidden;
padding:0 30px;
}
.st-accordion ul li:first-child{
overflow:visible;
list-style-type:none;
}
.st-accordion ul li:last-child{
}
.st-accordion ul li > a{
font-family: 'Trocchi', serif;
text-shadow: 1px 1px 1px #fff;
color:#688993;
line-height:44px;
font-size: 36px;
display: block;
text-decoration:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color:#18232e;
}
HTML:
<div class="wrapper">
<!-- <div class="chirp">chirp</div>-->
<div id="st-accordion" class="st-accordion">
<ul>
<li>
<a href="#aboutme" id="chirp" class="chirp">Chirp. Would you like to know about me?<h2>Read the official birdwatcher's guide.</h2></a>
<div class="st-content"><p>content goes here</p>
</div>
</li>
<li>
<a href="#portfolio" id="birdseye">A bird's eye view of my endeavors<h2>and other flights of fancy, also known as my portfolio.</h2></a>
<div class="st-content">
<p>Portfolio Goes Here.</p>
</div>
</li>
<li>
<a href="#resume" id="migration">My migration pattern<h2> and other common facts, otherwise known as my resume.</h2></a>
<div class="st-content"><p>content goes here</p>
</ul>
</div>
</div>
</div>
<!--bottom graphics-->
<div id="bottom-graphic-container"></div>
<!--Footer-->
<div id="footer-container">
<div id="footer-content-container">
<div id="footer-copy">Tiffani Hollis, Creative Professional (404)931.6057 <a href="mailto:thollis@i-make-it-pretty.com"> thollis@i-make-it-pretty.com</a></div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>
