2012-02-20 14 views
0

フッターはページの下部にありません。コード(インデントなど) のクリーンアップ - - (今渡された)W3Cバリ を - すべてのdivをチェックし、タグは、上記のフッターはページの下部にありません

なしに働いていない終了し、問題が解決しない:

ソリューションは、私が試してみました。ここで

は、問題のスクリーンショットです: enter image description here

真ん中の間で赤いバーがフッターではありませんしてください。そのページの真ん中にではなく、一番下にあることを意図しています。

マイHTML:

<body> 

<div id="call-back"></div> 

<div id="header"> 

<br> 

    <span style="color:#BB2131;"> 
     Welcome to Madhouse Creative </span> 

    <div style="float:right;"> 
     <img src="images/social/twitter.png" class="social_button" alt=""> 
     <img src="images/social/facebook.png" class="social_button" alt=""> 
    </div> 

<br> 
<br> 

    <img src="images/logo.png" alt="logo"> 

    <div id="nav"> 
     <ul id="list-nav"> 
      <li><a href="index.php">HOME</a></li> 
      <li><a href="about-us.php">ABOUT</a></li> 
      <li><a href="portfolio.php">PORTFOLIO</a></li> 
      <li><a href="contact-us.php">CONTACT</a></li> 
     </ul> 
    </div> 

</div> 

<div id="head-slider-break"></div> 

<div id="home-slider"> 

    <script type="text/javascript"> 
     $(window).load(function() 
      { 
       $('#slider').nivoSlider(); 
      }); 
    </script> 

    <div class="slider-wrapper theme-default"> 

     <div class="ribbon"></div> 

     <div id="slider" class="nivoSlider" style="margin-top:30px;"> 
      <img src="images/middleimage3.png" alt="" > 
      <img src="images/middleimage.png" alt="" > 
      <img src="images/middleimage2.png" alt="" > 
     </div> 
    </div> 

</div> 

<div id="wrapper"> 

    <h1>A <span style="color:#BB2131;">WEB</span> AND <span style="color:#BB2131;">GRAPHIC DESIGN</span> COMPANY</h1> 

    <p>Madhouse Creative is a new, innovative company looking to bring a fresh look to how businesses market and present themselves on the internet with elegant designs that contain endless potential. Specialists in user immersing visualisations, they bring a unique approach to brand identity.</p> 
    <p>Based in Kent, working with business throughout the UK. We aim to change the way your business is seen, heard and talked about. Contact us today to see how we could help your business.</p> 

    <div style="width:960px;border:1px dashed #cccccc; margin-top:40px;"></div> 

    <h1>WHAT <span style="color:#BB2131;">WE</span> CAN <span style="color:#BB2131;">OFFER</span>?</h1> 


    <div id="what-we-offer" style="border:2px solid #cccccc;"> 

     <div class="col"> 
      <div class="red-box"> 
       <h3 style="margin-top:0px;">WEB DESIGN</h3> 
      </div> 
      <img src="images/design-web-image.png" class="home-thumb-image" alt=""> 
     </div> 

     <div class="col"> 
      <div class="red-box"> 
       <h3 style="margin-top:0px;">WEB MARKETING</h3> 
      </div> 
      <img src="images/web-marketing.png" class="home-thumb-image" alt=""> 
     </div> 

     <div class="col"> 
      <div class="red-box"> 
       <h3 style="margin-top:0px;">GRAPHIC DESIGN</h3> 
      </div> 
      <img src="images/graphic-design.png" class="home-thumb-image" alt=""> 
     </div> 

     <div class="col"> 
      <div class="red-box"> 
       <h3 style="margin-top:0px;">LOGO DESIGN</h3> 
      </div> 
      <img src="images/logodesign.png" class="home-thumb-image" alt=""> 
     </div> 

     <div class="col"> 
      <div class="red-box"> 
       <h3 style="margin-top:0px;">VISUALIZATION</h3> 
      </div> 
      <img src="images/visualization.png" class="home-thumb-image" alt=""> 
     </div> 

     <div class="col"> 
      <div class="red-box"> 
       <h3 style="margin-top:0px;">WEB APPS</h3> 
      </div> 
      <img src="images/web-marketing2.png" class="home-thumb-image" alt=""> 
     </div> 

</div> 



</div> 
<div id="footer"> 

</div> 

ここでは私のCSSです:

body { 
background-color:#ffffff; 
margin: 0px; 
} 
h1 { 
font-family: "Helvetica Neue" bold; 
color:#cccccc; 
font-size: 35pt; 
line-height: 1.1; 
} 
#content h1 {font-family: "Helvetica Neue" bold; 
color:#cccccc; 
font-size: 35pt; 
line-height: 1.1; 
margin-bottom: -10px; 
} 

h2, h3, h4, h5, h6{ 
font-family: "Helvetica Neue" bold; 
color:#808080; 
} 
a {color:#BB2131; text-decoration: none;} 
a:hover {color:#BB2131; text-decoration: underline;} 
#header{height: 50px; width: 100%;font-family: "Helvetica Neue"; 
} 
#home-slider { 
margin:0 auto;width:960px; height:auto; 
} 
#head-slider-break {height:60px;} 
#wrapper{ 
width:960px; 
margin:0 auto; 
color:#000000; 
font-family: "Helvetica Neue"; 
font-size:12pt; 
line-height:1.2; 
word-spacing:1.5; 
} 
#social{ 
text-align: right; 
padding-top: 4px; 
} 
#header1{height: 50px; width: 100%; background-image: url(images/header.png);} 
#headtxt {margin-top: -40px;} 
#nav {width:400px; float: right;} 
ul#list-nav { 
list-style:none; 
padding:0px; 
float: right; 
} 
ul#list-nav li { 
display:inline; 
} 
ul#list-nav li a { 
text-decoration:none; 
height: 40px; 
padding: 7px; 
color:#808080; 
float:left; 
text-align:center; 
line-height: 3; 
font-size: 15px; 
font-family: "Helvetica Neue" bold; 
font-weight: bolder; 
} 

ul#list-nav li a:hover { 
color:#BB2131; 
} 

#head{ 
color: #ffff66; 
font-family: ; 
font-size: 30px; 
} 
.container { 
padding-left: 20px; 
padding-right: 20px; 
} 

.social_button { 
width:36px; 
height:36px; 
} 
#index_middle_image { 
margin-top:30px; 
} 
#request_call_back { 
margin-left:10px; 
} 
.nivoSlider { 
    position:relative; 
    width:960px; /* Change this to your images width */ 
    height:397px; /* Change this to your images height */ 
    background:url(images/loading.gif) no-repeat 50% 50%; 
} 
.nivoSlider img { 
    position:relative; 
    top:0px; 
    left:0px; 
    display:none; 
} 
.nivoSlider a { 
    border:0; 
    display:block; 
} 
#redbox {background-image:url('images/red-box-for-web.png'); width:160px; 
height:75px;;color:#ffffff; font-size:14pt; 
font-family: "Helvetica Neue"; float:left; text-align:center; line-height:80px; padding-right: 30px;overflow: hidden;} 
#greybox {background-image:url('images/grey-box-for-web.png'); width:160px; 
height:75px;color:#BB2131; font-size:14pt; 
font-family: "Helvetica Neue"; float:left;text-align:center;line-height:80px; padding-right: 30px; overflow: hidden;} 


#what-we-offer .col {float: left; width: 315px; padding: 2px;} 
#what-we-offer {width: 960px;margin-bottom: 10px; 
padding: 5px; 
height: auto; 
float: left;} 
.red-box { 
background-image: url(images/red-box.png); 
width: 315px; 
height: 68px; 
margin-bottom: 5px; 
margin-top: 5px; 
} 

#what-we-offer h3 {color: #ffffff; text-align: center; line-height: 4;} 

.home-thumb-image {width:315px; height: 179px;} 

#call-back{background-image: url(images/REQUEST-CALL-BACK-2.png); float: right; width: 100px; height: 100px; top: 0; right: 0; position: fixed; } 

#footer {background-image: url(images/footer2.png); height: 300px;} 

#home-text {width:960px; height:auto;} 
#header { 
width:960px; 
margin:0 auto; 
font-family: "Helvetica Neue"; 
font-size:12pt; 
word-spacing:1.5; 
} 

私は必要なすべてのコードが含まれており、不要なCSSを編集するために全力を行っています。

誰かが自分のコードに何が間違っているのかを診断したり、追加する必要がある場合は大きな助けになります。

+0

フッターdivが空です。私が間違っている?私は何が欠けていますか? – DonCallisto

答えて

2

浮いているようです。#what-we-offerです。 #footerにclear:bothを追加して、すべてのフローティング要素をクリアするようにします。

+1

私もそれを打つ。フッターをクリアすると問題が解決するはずです。私は私の答えを削除し、彼の評判を上げた。 – jmbertucci

+0

素晴らしい答え。ありがとう。それ以前に何かを浮かべた場合、何かをクリアしなければならないことは分かっていませんでした。 – RSM

1

フッタのCSSにclear: both;を追加してみてください。これは問題を解決するはずです。

関連する問題