상단에 항상 남아있는 헤더를 만드는 방법은 무엇입니까? 내가 <a href="http://www.chacha.com" rel="nofollow">http://www.chacha.com</a> 같은 헤더를 만들고 싶어

Question

는

(움직이지 않는, 그 폭이 높이, 그리고 그 안에있는 div에 맞게 수에 관한 것입니다 또한 이미지이어야한다) 나는 빈으로 떨어져 시작하고

을 html 문서와 빈 CSS 페이지가 있으므로 현재 코드를 작성하지 않았습니다.

저는 지금이 일을하기 위해 이틀 동안 노력했습니다. 그래서 아무도 도움을 줄 수있는 도움에 정말 감사 할 것입니다.

나는 김프를 가지고 있으므로 누구나 나에게 완벽한 헤더와 완벽한 배경 크기의 이미지 치수를 줄 수 있다면 더욱 감사하겠습니다.

Answer 1

CSS : 당신에게 출발점을 제공한다

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 10px; 
    background: url(yourimage.png) repeat-x; 
} 

<!--html --> 
<div id="header"></div> 

, 나는 더 레이아웃의 가정이 될 정확히 보지 않고 말할 수 없습니다.

Answer 2

찾는 CSS 속성은 position: fixed이며 뷰포트를 기준으로 요소의 위치를 ​​지정합니다. 이 위치의 좋은 고장입니다 : https://developer.mozilla.org/en-US/docs/CSS/position

이 특정한 경우에, 당신이있어하는 것은 대략 다음 행과 함께 스타일 요소입니다 :

#header_id { 
    position: fixed; 
    width: 100%; 
    height: 35px; 
} 

당신은 높이를 설정할 필요가 없습니다,하지만 고정 요소에 콘텐츠가 없으면 지정된 높이가없는 경우 축소됩니다. 그들은 또한 drop-shadow을 깔끔한 플로팅 효과를 제공하는 요소에 넣은 것처럼 보입니다.

당신이 내 이미지를 원한다면, 당신은 단지 헤더 요소 내부의 <img>를 넣을 수 있습니다, 또는도 (참조 CSS의 background-image URL로 사용하고 background-position으로 위치를 다음 호환성 테이블 비록 https://developer.mozilla.org/en-US/docs/CSS/background-position을에 아래쪽은이 속성과 관련하여 너무 구체적인 것을하고 싶다면 중요합니다.)

블록 수준 요소 (또는 display:block이 설정된 요소)를 사용하여이 작업을 수행 할 수 있습니다. 귀하의 예에서는 HTML5 <header> 태그를 사용하고 있습니다. <header>이 귀하의 페이지에 적합하지 않은 경우 <div>도 작동합니다.

Firefox (또는 다른 최신 브라우저와 유사한 개발자 콘솔)와 함께 Firebug 애드온을 사용하는 것이 좋습니다. 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 드롭 다운 메뉴에서 '요소 검사'를 선택하여 마크 업 및 스타일링을 통해 다른 웹 사이트 구축 방법을 확인할 수 있습니다. 인터넷을 탐색 할 때 매우 유용하며 무언가를보고 생각해보십시오. '그것은 깔끔한 트릭입니다. 어떻게 작동합니까?"FULL WIDTH 고정 헤더 FOR

Answer 3

헤더 { 폭 : 100 %; 배경 : 녹색; 신장 : 60px; 여백 : -8px; 위치 : 고정; 꽉 차지 폭 }

는 사업부를 만들기 HEADER
을 고정 폭과 높이 (당신은 또한 왼쪽 또는 오른쪽으로 float:left, float:right으로 설정할 수 있습니다) 다음이에서 가 margin:-8px;없이 위와 같지만, 코드를 삽입 DIV를 설정하고 변경 너비가 너비에있는 너비. 여기에있는 테스트는