2012-05-01 8 views
0

私は本当に自分のフッターに苦労しています。私はhttp://www.cssstickyfooter.com/の指示にしたがって、ページの一番下にフッタを付けるようにしました。フッタのdivにdivを追加するまではうまく動作します - 紫の背景と画像は消えます。私は1つのdivとしてそれを行うだろうが、私は別のボックスを作成せずにジグザグのエッジを行う方法を働くことはできません。複数のdivが含まれているスティッキーフッター

ご協力いただければ幸いです!私はこれを動作させるために何日も努力してきました。 は、ここに私のHTMLです:

<body> 
    <div id="wrapper"> 


    <!-- Begin Header --> 
    <div id="header"> 

    <a href="index.html"><img src="images/logo.png" width="435px" height="112px" alt="Lauren Womack Logo" /></a> 

    <div id="menu"> 
    <a href="/"><img src="images/menu/home.png" width="142" height="160" alt="Home" /></a> 
    <a href="about.html"><img src="images/menu/about.png" width="131" height="157" alt="About" /></a> 
    <a href="contact.html"><img src="images/menu/contact.png" width="128" height="160" alt="Contact" /></a>  
    </div>    
    </div> 
    <!-- End Header --> 
    <!-- Begin Content --> 
    <div id="content"> 
    <div id="rightholder"> 
    <div class="outerleft"> 
    <div class="inner"><h2>Animation and Interactive</h2> 
    </div> 
    </div> 
    <div class="outerright"> 
    <div class="inner"> 
    <h2>Web Design</h2> 
    </div>  
    </div> 
    <div class="outerleft"> 
    <div class="inner"> 
    <h2>Print Design</h2> 
</div></div> 

    <div class="outerright"> 
    <div class="inner"> 
    <h2>Illustration</h2> 
</div> 
     </div></div>   <!-- End Content --> 
    </div> 
    </div><!-- Begin Footer --> 
    <div id="footer"> 
    <div class="footeredge"> </div> 
    <div class="footerinner">  <p>© Lauren Womack 2012</p> 
    </div>  </div> </div> 
      <!-- End Footer --></body></html> 

そして、ここに私のCSSです:私はそれを見てみたいどのよう

body {font-size: 13px; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;} 
    html {height: 100%;} 
    #wrapper{ min-height:100%; min-width:992px; margin-left:0px; margin-right:0px;} 
    #header {height: 170px; padding-top:36px; border: none;} 
    #menu {float:right;} 
    #content { position: relative; min-width: 1141px; border:none;background: none; overflow:auto; padding-right:32px; padding-left:32px; padding-bottom: 86px;} 
    #rightholder { float: right; clear: left;min-width: 639px;width: 60%;padding-top: 90px;} 
    .outerright {background-image:url(images/threadborder.jpg);min-width: 257px;width: 45%; height: 98px; margin-top: 22px; margin-bottom: 22px; margin-left: 20px;float: right;clear: right;} 
    .outerleft {background-image:url(images/threadborder.jpg); 
min-width: 257px; width: 45%; height: 98px; margin-top: 22px;margin-bottom: 22px;margin-right: 20px; float: left;clear: left;} 
    .inner {padding: 5px; height: 87px;} 
    #footer {position: relative; margin-top:-86px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; height:86px; clear:both; padding-right: 32px; margin-left:0px; margin-right:0px; border: none; 
    /*Opera Fix*/ 
    body:before { 
content:""; 
height:100%; 
float:left; 
width:0; 
margin-top:-32767px;/ 
    } 
    .footeredge { 
background-color: none; 
background-image:url(images/footer/zigzag.png); 
    background-repeat:repeat-x; 
    height: 20px; 
    } 
    .footerinner { 
background-color:#663366; 
height: 66px; 
    } 

http://tinypic.com/r/242swuc/6一番下に紫色のボックスとジグザグはちょうど、しかし表示されていませんテキスト。

+0

jsfiddleへのリンク、またはこれがホストされている環境へのリンクを提供できますか? – trickyzter

+0

http://laurenwomack.com/laurenwomack.com/ちょうどそれをアップロードすることができました。 返信いただきありがとうございます。 – LaurenWomack

答えて

0

#footerには中括弧がありません。これは、このポイントの後にスタイル宣言を破棄します。

+0

それは動作します!どうもありがとうございます!私はそれもとてもシンプルなものだとうれしいです。 – LaurenWomack

+0

心配しないで、うれしく思うよ。 :) – trickyzter

関連する問題