2012-07-25 2 views
1

내 페이지의 마지막 div 바로 뒤에 내 꼬리말이 나타나려고하고 있는데 왜 내가 원하는 것보다 아래에 앉아있는 이유는 무엇인지 알 수 없습니다. 누구든지 도와 줄 수 있습니까? 을 Heres 코드 :내용의 끝까지 바닥 글 가져 오기

<div id="container"> 
    <div id="header"> 
     <h1> 
      <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> --> 
      <a href="#"><img src="tracylogo6header.jpg" alt="Millington and Hope" /></a> 
     </h1> 
     <h2> 
      <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> --> 
     </h2> 
    </div> 
    <ul id="nav"> 
     <li><a href="index.html">Home</a></li><!-- 
     --><li><a href="stock.html">Stock</a></li><!-- 
     --><li><a href="events.html">Events</a></li><!-- 
     --><li><a href="contact.html">Contact</a></li> 
    </ul> 
    <div id="box"> 
      <a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a> 

      <a href="#"><img src="home6.jpg" alt="Slideshow Image 2" /></a> 

      <a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a> 
    </div> 
    <div id="box2"> 
     <a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a> 
    </div> 
    <div id="footer"> 
     <p class="client">Tel: 0785740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: [email protected]</p> 

    </div> 
</div> 
html,body 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

body 
{ 
    background:rgb(171,163,144); 
    text-align: center; 
    min-width: 600px; 
} 

#container 
{ 
    margin:0 auto; 
    background:rgb(171, 163, 144); 
    width:80%; 
} 

#nav 
{ 
    border:1px solid #ccc; 
    border-width:1px 0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
    /*background:rgb(161,153,134) /* for non-css3 browsers */ 
    background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144)); 
    background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144)); 

} 

#nav li 
{ 
    display:inline; 
}  

#nav a 
{ 
    display:inline-block; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    padding:10px 20px 10px 20px; 
    text-decoration:none; 
    color:white; 
} 


#nav a:hover 
{ 
    background:rgb(171, 163, 144); 
} 


#header 
{ 
    padding: 0px; 
    color: white; 
    width:100%; 
    text-align:center; 
} 



#header h1 
{ 
    margin: 0; 
} 

#stock 
{ 
    position:relative; 
    margin:0 auto; 
    margin-top:35px; 
    width: 1000px; 
    border-collapse:collapse; 
} 

#stock th 
{ 
    height: 30px; 
    background:rgb(151,143,124); 
}  
table, td, th 
{ 
    color:white; 
    border: solid 1px black; 
    padding: 2px; 
} 

#events 
{ 
    position:relative; 
    margin:0 auto; 
    margin-top:35px; 
    width: 1000px; 
    border-collapse:collapse; 
} 

#events th 
{ 
    height: 30px; 
    background:rgb(151,143,124); 
} 

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 

.client 
{ 
    color:white; 
    margin:3px auto; 
    text-indent:1cm; 
    text-align:left; 
} 

#sold 
{ 
    color: red; 
} 

#box 
{ 
    position:relative; 
    margin:0 auto; 
    width:100%; 
    height:200px; 
    margin-top:100px; 
} 
#box img 
{ 
    margin:0 auto; 
    border:solid 1px white; 
    margin: 10px; 
} 

#box2 
{ 
    position:relative; 
    margin-top:200px; 
    width: 100%; 
} 

#box2 img 
{ 
    margin:0 auto; 
    opacity:0.5; 
    filter:alpha(opacity=50); 

}  



h3 
{ 
    color:white; 
    text-decoration:underline; 
}  



#container2 { 
    clear:left; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    background:rgb(171,163,144); /* column 2 background colour */ 
} 
#container1 { 
    float:left; 
    width:100%; 
    position:relative; 
    right:50%; 
    background:rgb(171,163,144); /* column 1 background colour */ 
} 
#left { 
    float:left; 
    width:46%; 
    position:relative; 
    left:52%; 
    text-align:left; 
    overflow:hidden; 
} 
#right{ 
    float:left; 
    text-align:left; 
    width:46%; 
    position:relative; 
    left:56%; 
    overflow:hidden; 
} 

p 
{ 
    color:white; 
} 

바닥 글이 내 마지막 DIV 후 큰 마진을하지만 난이 내가 선언 한 것입니다 같아요 것처럼 나타납니다?

+0

내 대답을 시도 했습니까? 아니면 특정 대답을 얻었습니까? – GOK

답변

1

선언하신 내용입니다. 이 페이지 하단에 사업부를 강제로 : 당신은 당신이 원하는 경우 상단 여백을 조정하지만,이 바닥 DIV 후 오른쪽에 나타날 수 있도록하기 위해이 같은 작업을 수행 할 수 있습니다

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 

.

#footer { 
    position:relative; 
    left:0px; 
    height:25px; 
    width:100%; 
    background:rgb(151,143,124); 
    border-top:solid 1px white; 
} 
0

당신은, 당신의 #containerpadding-bottom: 100px; (또는 유사한 값)를 추가 할 수 있습니다 같은 그것을 만드는 :

#container { 
    margin: 0 auto; 
    background: #ABA390; 
    width: 80%; 
    padding-bottom: 100px; 
} 
2

귀하의 글이 화면 하단 (위치 고정 : 고정, 하단 : 0),이 선언을 제거하고 #container div 외부에 바닥 글을 배치하면 원하는 효과를 얻을 수 있습니다.

0

이 밖으로 시도, 머리글과 바닥 글은 각각 상단과 하단 고집위한 완벽한 요리 코드 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Header & Footer</title> 
     <style type="text/css"> 
      /* Global */ 
      * { 
       margin: 0; 
      } 
      html, body { 
       height: 99%; 
      } 
      /* Header */ 
      .container{ 
       min-height: 100%; 
       height: auto !important; 
       height: 100%; 
       margin: 0 auto -4em; 
       width:100%; 
       font-family:Segoe UI; 
       color:#fff; 
      } 
      .container-header{ 
       padding-top:5px; 
       padding-left:20px; 
      } 

      /* Footer */ 
      .footer{ 
       background-color:#333030; 
       width:100%; 
       font-family:Segoe UI; 
       color:#fff; 
      } 
      .footer img{ 
       padding-left:15px; 
      } 
      /* Page Content */ 
      .content{ 
       height: auto !important; 
      } 
      .container p{ 
      font-size:12pt; 
      font-weight:bold; 
      } 
     </style> 
    </head> 
    <body> 
     <!-- Header Div --> 
     <div class="container"> 
      <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px"> 
       <tr></tr> 
       <tr> 
        <td></td> 
        <td> 
         <div style="padding-left:100px;font-size:36px;">Header</div> 
        </td> 
       </tr> 
       <tr></tr> 
      </table> 

      <!-- Page Content Div --> 
      <div class="content"> 
       Blah Blah 
      </div> 
     </div> 

     <!-- Footer Div --> 
     <div class="footer"> 
      <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px"> 
       <tr></tr> 
       <tr> 
        <td></td> 
        <td> 
         <div style="padding-left:100px;font-size:36px;">Footer</div> 
        </td> 
       </tr> 
       <tr></tr> 
      </table> 
     </div> 
    </body> 
</html> 

건배!