2012-02-20 13 views
0

Мой нижний колонтитул не находится внизу страницы.Нижний колонтитул внизу страницы

Solutions Я пробовал: - W3C валидатор (теперь прошло) - Очистка кода (отступов в и т.д.) - Проверено все дивы и теги закончились

Ни одно из вышеперечисленного не работал, и проблема все еще сохраняется ,

Вот снимок экрана проблемы: 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

Нижний колонтитул пустой. Я ошибаюсь? Что мне не хватает? – DonCallisto

ответ

2

Похоже, вы плаваете #what-we-offer. Добавьте clear:both в #footer, чтобы очистить все плавающие элементы.

+1

избил меня тоже. Очистка нижнего колонтитула должна устранить проблему. Я удалил свой ответ и поднял рейтинг. – jmbertucci

+0

отличный ответ. Благодарю. не знал, что вам нужно что-то прояснить, если вы что-то выплыли перед ним. – RSM

1

Попробуйте добавить clear: both; в ваш footer CSS. Это должно решить проблему.

Смежные вопросы