2012-02-20 5 views
0

내 바닥 글이 페이지 하단에 없습니다. 코드 (들여 쓰기 등) 정리 - - (지금 통과) W3C 유효성 검사기 을 - 모든 div의를 검사하고 태그는 위의바닥 글이 페이지 하단에 없음

아무도 일하지 종료되었고, 문제가 계속 지속 :

솔루션은 내가 시도 . enter image description here

이 아닌 중간을 가로 지르는 빨간색 막대가 바닥 글 제발 : 여기

문제의 스크린 샷이다. 그것은 페이지의 중앙에있는 것이 아니라 바닥에있는 것을 의미합니다.

내 HTML :

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를 편집하기 위해 최선을 다했다 :

<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입니다.

누구든지 내 코드의 문제점을 진단하고 도움이 필요할 경우 도움을받을 수 있습니다.

+0

바닥 글 div가 비어 있습니다. 내가 잘못? 내가 뭘 놓치고 있니? – DonCallisto

답변

2

당신이 떠있는 것 같습니다 #what-we-offer. 플로팅 요소를 모두 지우려면 #footer에 clear:both을 추가하십시오.

+1

너무 나를 이길. 꼬리말을 지우면 문제가 해결됩니다. 나는 내 대답을 삭제하고 자신의 업적을 평가했다. – jmbertucci

+0

위대한 답. 감사. 전에 뭔가를 띄우면 뭔가를 정리해야한다는 것을 알지 못했습니다. – RSM

1

clear: both;을 바닥 글의 CSS에 추가하십시오. 이렇게하면 문제가 해결됩니다.

관련 문제