CSS로 꼬리말을 올바르게 배치하는 방법은 무엇입니까?

희망 내 페이지 꼬리말에 약간의 도움을 얻을 수 있습니다 ..CSS로 꼬리말을 올바르게 배치하는 방법은 무엇입니까?

이 질문에 많은 질문이있는 것 같지만 끈적 인 바닥 글 (위치는 고정됨)을 원하지 않습니다. 내 다른 내용. 페이지 끝과 페이지 사이에는 약간의 간격이 있습니다.

HTML

<!-- Start Navigation Bar --> 
<nav id="nav_container"> 
    <ul id="navigation"> 
     <li><a href="#about">About</a> 
     </li> 
     <li><a href="#experience">Experience</a> 
     </li> 
     <li><a href="#projects">Projects</a> 
     </li> 
     <li><a href="#skills">Skills</a> 
     </li> 
     <li><a href="#education">Education</a> 
     </li> 
     <li><a href="#contact">Contact</a> 
     </li> 
    </ul> 
</nav> 

<!-- Start Body Container --> 
<div id="container"> 

</div> 
<!-- End Body Container --> 

<!-- Start Footer --> 
<footer id="footer_container"> 
    <ul id="footer"> 
     <li> 
      <p>Created by Name</p> 
     </li> 
     <li><a href="#about"><p>Back To Top.</p></a> 
     </li> 
    </ul> 
</footer>

CSS

/****************************************************/ 

/* HEADER */ 

/****************************************************/ 
#nav_container { 
    position:fixed; 
    width:100%; 
    background-color:#222222; 
    text-align:center; 
} 
#nav_container #navigation { 
    padding-top:45px; 
    padding-bottom:20px; 
} 
#nav_container #navigation li { 
    display:inline-block; 
    padding-right:10px; 
    margin-left:20px; 
    font: 400 16px/20px'Bree Serif', Georgia, serif; 
} 
/****************************************************/ 

/* PAGE CONTAINER */ 

/****************************************************/ 
#container { 
    width:850px; 
    margin:0px auto 300px auto; 
    overflow:auto; 
} 
/****************************************************/ 

/* FOOTER SECTION */ 

/****************************************************/ 
#footer { 
    position:relative; 
    width:auto; 
    background-color:#222222; 
    text-align:center; 
    padding-top:20px; 
    bottom:15px; 
} 
#footer li { 
    display:block; 
    padding-right:10px; 
    margin-left:20px; 
    font: 400 16px/20px'Bree Serif', Georgia, serif; 
    color:#FFFFFF; 
}

출처

2014-02-09 tom

난 그냥 제목에 웃고, 아마 편집 도착하지만, 도대체 무슨 일을 일치, 그것을 나를 웃게 만들었습니다 :) – DannyG

쓰레기 제목을 쓰지 마십시오. Reddit이 아니며 무엇이 있습니까? – Nit

@Nit Thanks Nit! 내 제목은 설명적이고 고유 한 것과 같았습니다. 'Nit.EnablePartyPooperMode()' – tom

는하지의 #footer 바닥 글에 배경 색상을 넣어. 또한 html5 css 재설정을 추가했습니다. 여기

http://jsfiddle.net/DrJkY/1/

http://jsfiddle.net/DrJkY/2/

/* 
html5doctor.com Reset Stylesheet 
v1.6.1 
Last Updated: 2010-09-17 
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark 
*/ 

html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, 
del, dfn, em, img, ins, kbd, q, samp, 
small, strong, sub, sup, var, 
b, i, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video { 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
} 

body { 
    line-height:1; 
} 

article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section { 
    display:block; 
} 

nav ul { 
    list-style:none; 
} 

blockquote, q { 
    quotes:none; 
} 

blockquote:before, blockquote:after, 
q:before, q:after { 
    content:''; 
    content:none; 
} 

a { 
    margin:0; 
    padding:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
} 

/* change colours to suit your needs */ 
ins { 
    background-color:#ff9; 
    color:#000; 
    text-decoration:none; 
} 

/* change colours to suit your needs */ 
mark { 
    background-color:#ff9; 
    color:#000; 
    font-style:italic; 
    font-weight:bold; 
} 

del { 
    text-decoration: line-through; 
} 

abbr[title], dfn[title] { 
    border-bottom:1px dotted; 
    cursor:help; 
} 

table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 

/* change border colour to suit your needs */ 
hr { 
    display:block; 
    height:1px; 
    border:0; 
    border-top:1px solid #cccccc; 
    margin:1em 0; 
    padding:0; 
} 

input, select { 
    vertical-align:middle; 
} 
body { 
    background:#FFFFFF url(bower_components/todomvc-common/bg.png); 
    margin:0px; 
    font: 400 12px/22px'Open Sans', Verdana, Helvetica, sans-serif; 
    color:#6a6969; 
} 
h1 { 
    font: 400 58px/60px'Bree Serif', Georgia, serif; 
    color:#222222; 
} 
h2 { 
    font: 400 18px/22px'Bree Serif', Georgia, serif; 
    color:#6a6969; 
} 
h3 { 
    font: 400 14px/16px'Bree Serif', Georgia, serif; 
    color:#6a6969; 
} 
a { 
    text-decoration:none; 
    color:#FFFFFF; 
} 
a:hover { 
    color:#18B747; 
} 
/****************************************************/ 

/* HEADER */ 

/****************************************************/ 
#nav_container { 
    position:fixed; 
    width:100%; 
    background-color:#222222; 
    text-align:center; 
} 
#nav_container #navigation { 
    padding-top:45px; 
    padding-bottom:20px; 
} 
#nav_container #navigation li { 
    display:inline-block; 
    padding-right:10px; 
    margin-left:20px; 
    font: 400 16px/20px'Bree Serif', Georgia, serif; 
} 
/****************************************************/ 

/* PAGE CONTAINER */ 

/****************************************************/ 
#container { 
    width:850px; 
    margin:0px auto 300px auto; 
} 
/****************************************************/ 

/* ABOUT SECTION */ 

/****************************************************/ 
#about { 
    padding-top:115px; 
} 
#about #ab_container { 
    float:left; 
} 
#about #ab_container img { 
    float:left; 
} 
/****************************************************/ 

/* EXPERIENCE SECTION */ 

/****************************************************/ 
#experience { 
    padding-top:115px; 
} 
#experience #exp_container { 
    float:left; 
} 
#experience #exp_container img { 
    float:left; 
} 
/****************************************************/ 

/* PROJECTS SECTION */ 

/****************************************************/ 
#projects { 
    padding-top:115px; 
} 
#projects #proj_container { 
    float:left; 
} 
#projects #proj_container img { 
    float:left; 
} 
/****************************************************/ 

/* SKILLS SECTION */ 

/****************************************************/ 
#skills { 
    padding-top:115px; 
} 
#skills #sk_container { 
    float:left; 
} 
/****************************************************/ 

/* EDUCATION SECTION */ 

/****************************************************/ 
#education { 
    padding-top:115px; 
} 
#education #edu_container { 
    float:left; 
} 
#education #edu_container img { 
    float:left; 
} 
/****************************************************/ 

/* CONTACT SECTION */ 

/****************************************************/ 
#contact { 
    padding-top:115px; 
} 
#contact #con_container { 
    float:left; 
} 
/****************************************************/ 

/* FOOTER SECTION */ 

/****************************************************/ 
#footer { 
    position:relative; 
    width:auto; 
    text-align:center; 
    padding-top:20px; 
    bottom:15px; 
} 
#footer li { 
    display:block; 
    padding-right:10px; 
    margin-left:20px; 
    font: 400 16px/20px'Bree Serif', Georgia, serif; 
    color:#FFFFFF; 
} 
footer {background-color:#222222;}

출처

2014-02-09 02:52:43

IMHO,'* {마진 : 0; 패딩 : 0;}'은 좋지 않은 생각이며 많은 부작용을 초래할 수 있습니다. 나는 당신의 나머지 대답을 읽지 않았지만, 그것을 제거하거나 더 구체적인 것을 생각하고 싶을 수도 있습니다 ... – Carpetsmoker

네 *'{margin : 0; 패딩 : 0;} ' 스크롤 바. – tom

에서 #container 오버플로 제거 : 자동; 내가 –

시작하려면 작업 링크입니다 '의 #footer'(라인 140)에 CSS의 해당 바이올린에이 한을 밀어 버린다 bottom: 15px; (라인 146) 바닥 글이 position: relative부터 15px까지 바닥 글로 표시됩니다.

또한 "뒤로 가기"주위의 p 태그에는 브라우저에서 여백 바텀이 적용되어 있습니다. p 태그를 꺼내거나 직접 태그를 지정하고 해당 마진/제로를 제자리에 없앱니다.

마지막 검토 : 당신은뿐만 아니라 포함하는 요소의 배경 검정을 할 경우, 바닥 글에 "변장"격차 ...

출처

2014-02-09 03:00:48 danwarfel

CSS로 꼬리말을 올바르게 배치하는 방법은 무엇입니까?

답변

관련 문제