끈끈한 바닥 글 문제 html css

코드를 완전히 어지럽히고 다른 요소의 위치를 다시 정렬하면 아무리 끈끈한 바닥 글을 만드는 데 문제가 있습니다. 여러 div 요소를 사용하고 있습니다. http://www.cssstickyfooter.com/using-sticky-footer-code.html 도움말과 같이 온라인으로 바닥 글을 붙이는 방법에 대한 대부분의 자습서를 많이 보았습니다. 고마워요!끈끈한 바닥 글 문제 html css

HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org"> 
<title>Southend-on-Sea Independant Tourist Guide</title> 
<!--Attached CSS to keep constant throughout site--> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<meta name="description" content="An independant tourist guide on Southend-on-Sea"> 
<meta name="keywords" content="southend, southend-on-sea, tourist guide, tourist, independant"> 
<meta name="author" content="Callum Stevens"> 
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"><!--[if !IE 7]> 
     <style type="text/css"> 
       #wrap {display:table;height:100%} 
     </style> 
<![endif]--> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<link rel="stylesheet" type="text/css" href="navigation.css"> 
</head> 
<body> 
<div id="container"> 
<div id="content"> 
<div id="header"> 
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td><img src="southendpiersept2006edit.jpg" width="700" height="389" alt="southend pier site logo"></td> 
</tr> 
</table> 
</div> 
<div id="navigation"> 
<ul> 
<li class="home"><a href="index.htm">Home</a></li> 
<li class="places"><a href="places.htm">Places to go</a></li> 
<li class="things"><a href="things.htm">Things to do</a></li> 
<li class="where"><a href="where.htm">Where to stay</a></li> 
<li class="getting"><a href="getting.htm">Getting&lt; here/a&gt;</a></li> 
<li class="about"><a href="getting.htm"></a><a href="getting.htm"></a><a href="about.htm">About the town</a></li> 
<li class="contact"><a href="contact.htm">Contact us</a></li> 
</ul> 
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td></td> 
</tr> 
</table> 
</div> 
<br> 
<br> 
<h1>Southend-On-Sea</h1> 
<br> 
<h2>Welcome to Southend-On-Sea Tourist Information Site. You're #1 stop for finding out about Southend!</h2> 
<br> 
<h3>This site aims to help you in getting here, finding accomodation, and letting you know whats going on.</h3> 
<p>paragraph</p> 
<p id="p2">paragraph2</p> 
</div> 
</div> 
<div id="footer"></div> 
</body> 
</html>

있는 style.css :

html, body { margin: 0px; 
      padding: 0px; 
text-align:center 
} 


body{ 
background: url(bg.jpg) repeat-x;} 

#content { 
    text-align:center 
    width:67%; 
} 

h2 { 
text-transform: capitalize;}

navigation.css

#navigation ul { 
    width: 700px; 
    height: 50px; 
    position: absolute; /** Places image at the top of the page **/ 
    top: 389px; /** Determines the height from the top of the page **/ 
    left: 15.3%; /** Determines the width from the left of the page **/ 
    background: url(menu.jpg) no-repeat 0 0; 
    list-style: none; 
    margin: 0; padding: 0; 
} 
#navigation li { 
    display: inline; 
} 
#navigation li a:link, #navigation li a:visited { 
    border: none; 
    width: 100px; 
    height: 50px; 
    display: block; 
    position: absolute; 
    top: 0; 
    text-indent: -7000px; 
    outline: none; 
} 
#navigation li.home a:link, #navigation li.home a:visited { 
    left: 0; 
} 
#navigation li.places a:link, #navigation li.places a:visited { 
    left: 100px 
} 
#navigation li.things a:link, #navigation li.things a:visited { 
    left: 200px 
} 
#navigation li.where a:link, #navigation li.where a:visited { 
    left: 300px 
} 
#navigation li.getting a:link, #navigation li.getting a:visited { 
    left: 400px 
} 
#navigation li.about a:link, #navigation li.about a:visited { 
    left: 500px 
} 
#navigation li.contact a:link, #navigation li.contact a:visited { 
    left: 600px 
} 

#navigation li.home a:hover { 
    background: url(menu.jpg) no-repeat 0 -50px; 
} 
#navigation li.places a:hover { 
    background: url(menu.jpg) no-repeat -100px -50px; 
} 
#navigation li.things a:hover { 
    background: url(menu.jpg) no-repeat -200px -50px; 
} 
#navigation li.where a:hover { 
    background: url(menu.jpg) no-repeat -300px -50px; 
} 
#navigation li.getting a:hover { 
    background: url(menu.jpg) no-repeat -400px -50px; 
} 
#navigation li.about a:hover { 
    background: url(menu.jpg) no-repeat -500px -50px; 
} 
#navigation li.contact a:hover { 
    background: url(menu.jpg) no-repeat -600px -50px; 
}

출처

2012-11-18 CJava

) 우리는이 코드의 결과를 더 쉽게 검사 할 수 있습니까? –

아니면 그냥 [피들] (http://jsfiddle.net/)을 만들 수 있습니까? –

죄송합니다. 나는 바이올린에 익숙하지 않습니다. 코드를 복사 할 수 있습니까? – CJava

내가 제대로 표시되지 않을 수 있습니다하지만 당신은 #에 대한 어떤 CSS 선택을 넣지 않은 바닥 글 (style.css) 바닥 글을 페이지 아래쪽에 붙이려면 매우 간단합니다.

#footer { 
    position:fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
    background-color:#ddd; 
}

출처

2012-11-18 17:00:34

고정 된 위치에 머 무르므로 스크롤하면 바닥 글이 아래로 스크롤 될 때 페이지 하단에 있지 않고 항상 바닥 글이 계속 표시됩니다. – CJava

페이지 콘텐츠가 너무 짧으면 잘랐다면, 바닥 글을 뷰포트의 아래쪽에 붙이시겠습니까? –

예 thats 내가 무엇을 필요 :) 덕분에 – CJava

작업 JS 바이올린 : http://jsfiddle.net/eQMmk/

관련 부분은 CSS의 끝에 : 일시적이 아닌 공개 (웹 서버에이를 업로드 할 수있는 방법이 있나요

/* sticky footer */ 
html, body { width: 100%; height: 100%; } 
#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -150px; 
} 
#footer { 
margin-top: -150px; 
height: 150px; 
width: 100%; 
background-color: red; 
}

출처

2012-11-18 17:14:55

코드는 바닥 글이 내 2 단락 위에 올라가고, 어떤 아이디어가 그 일을 막을 수 있을까? – CJava

바닥 글 위의 내용이 포함 된 div 또는 block 요소에'padding-bottom : 150px;'를 추가하십시오. –

답변

관련 문제