2012-05-30 5 views
2

저는 CSS가 없으므로 CSS를 사용하여 처음부터 처음으로 사이트를 디자인하고 있습니다. (최근에 나는 에서 하나님의 사랑을 위해 웹 사이트 스타일을 html로 중지했습니다. 생활 방식).100 % 너비의 머리글과 바닥 글

머리글과 바닥 글이 본문의 너비를 넘어서서 페이지의 왼쪽에서 오른쪽으로 완성되는 페이지를 만들고 싶습니다. 코드를 시작했지만 멈추었습니다. 헤더에는 로고와 내비게이션이 있습니다 (아직 내비게이션을 코딩하지 않았지만 그렇게 어렵지는 않습니다). 꼬리말에는 한 줄의 내용 만 있습니다.

나는 다른 질문에서 예제를 찾아 보았고 답변은 모두 정말로 복잡하며 스크롤 막대와 같은 것들을 포함하고있다.

이 작업을 수행하는 방법에 대한 제안은 크게 감사하겠습니다. 이것이 바보 같은 질문이라면 미안합니다. 감사.

HTML

<body> 

<!-- begin wrapper --> 
<div id="wrapper"> 

<!-- begin header --> 
    <div id="header"> 
    <p>Content</p> 
    </div> 

<!-- begin navigation --> 
    <div id="navigation"> 
    <ol> 
    <li>Home</li> 
    <li>Page 1</li> 
    <li>Page 2</li> 
    <li>Page 3</li> 
    <li>Contact</li> 
    </ol> 
    </div> 

<!-- begin content --> 
    <div id="content"> 
    <h1>Heading</h1> 
    <p>Content</p> 
    </div> 

<!-- begin footer --> 
    <div id="footer"> 
    <p>Content</p> 
    </div> 

</div> 

</body> 

당신이 #header#footer 전체 페이지에 걸쳐하려면 CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); 

#header { 
    background: #636769; 
} 

#navigation { 
} 

body { 
    font-family: 'PT Sans Narrow', sans-serif; 
    font-size: 16pt; 
    background: url(../images/texture.png); 
} 

#wrapper { 
    width: 938px; 
    margin: 0 auto; 
    padding: 20px 20px; 
    background: white; 
} 

#footer { 
    background: #636769; 
} 

답변

3

, 당신은 또한 #wrapper에서 그들을 이동해야합니다. 높이를 지정할 수도 있습니다 (예 : height: 40px.

스크롤하는 동안 머리말과 꼬리말을 제자리에 유지 하시겠습니까? 그렇다면 position: fixed;을 모두 사용하십시오. 그런 다음 #header에 넣어 top: 0px; left: 0px; right: 0px;; #footer에 넣고 bottom: 0px; left: 0px; right: 0px;을 입력하십시오.

내가 원하는 것을 알고 싶습니다. 기꺼이 도와 드리겠습니다.

+0

감사합니다. – stephenie

+0

기본적으로 원하는 섹션에 대해 div를 설정해야합니다. 따라서 페이지의 본문 섹션에 세 개의 열이 있으면 각 div가 필요합니다. – stephenie

+0

네, 맞습니다. – woz

2

#wrapper 클래스가 전체 페이지를 포함하므로 모든 후속 태그는 동일한 값을 상속합니다. #header 또는 #footer가이를 무시하도록하려면 해당 클래스에 대해 다른 값을 지정해야합니다. 이러한 클래스를 변경하여 자체 너비 값 (즉, width: 938px;)을 지정하고 어떤 결과가 발생하는지 확인하십시오.

+0

고마워요! 나는

을 머리말 다음, 내용 앞에 그리고 꼬리말 앞에 옮겼습니다. – stephenie

+0

좋아요! 다행이 당신을 위해 일 했어. – McArthey

0

footer divs를 wrapper 외부로 당겨 페이지 너비에 맞게 조정하십시오.

<body> 

<!-- begin header --> 
    <div id="header"> 
    <p>Content</p> 
    </div> 

<!-- begin wrapper --> 
<div id="wrapper"> 

<!-- begin navigation --> 
    <div id="navigation"> 
    <ol> 
    <li>Home</li> 
    <li>Page 1</li> 
    <li>Page 2</li> 
    <li>Page 3</li> 
    <li>Contact</li> 
    </ol> 
    </div> 

<!-- begin content --> 
    <div id="content"> 
    <h1>Heading</h1> 
    <p>Content</p> 
    </div> 

</div> 

<!-- begin footer --> 
    <div id="footer"> 
    <p>Content</p> 
    </div> 

</body> 
+0

감사합니다. 그것은 나에게 일어나지 않았다. – stephenie

관련 문제