CSS - 바둑판 식 자동 크기 이미지로 덮여있는 스크롤 막대 해결

Question

이 고정 된 머리글의 양쪽에 이미지를 바르는 데 도움이되는이 사이트에서 큰 도움을 얻었습니다. 내가 가지고있는 한 가지 문제는 오른쪽에있는 스크롤 막대가 바둑판 모양의 이미지로 덮여있어 액세스 할 수 없게된다는 것입니다. 나는 그것이 단순한 무언가이다라고 확신한다. 그러나 나는 순간에 손실에있다. 다음에서 예를 볼 수 있습니다. http://www.jzandecki.com/example

Answer 1

헤더를 처음부터 다시 만들어야합니다. 먼저 div (헤더 컨테이너)를 만들고 id로 이름을 짓고 "header"라고 말하십시오. 타일로 된 검은 색 이미지를 배경으로 추가하십시오. 해당 div의 위치는 고정되어 있어야하며 절대가 아니어야합니다.

position: fixed; 
background: url("../images/example_top.jpg") repeat scroll 0 0 transparent; 
background-repeat: repeat-x; 
height: 178px; 
width: 100%; 

헤더 div에는 너비 크기와 발전소 이미지 너비가 다른 div를 추가하십시오. 이 div의 CSS를 margin : auto (화면 중앙에 배치)로 설정하십시오.

margin: auto; 

이 작업을 수행해야합니다. 이 방법을 사용하면 이전과 같은 화면을 볼 수 있지만 스크롤 막대는 머리글 위에 표시되고 숨겨지지 않습니다.

편집 : 나는 당신의 몸은 화면의 왼쪽에 900 픽셀 및 스틱입니다 보았다 그런데

. 몸에 다음과 같은 속성을 사용하는 것이 좋습니다.

margin: 0; 
padding: 0; 

본문이 전체 페이지를 차지해야합니다. 내용에 900px 래퍼 블록을 사용하려면 헤더 div (위에서 설명한 내용) 뒤에 div를 추가하십시오. 이 새 div에는 다음과 같은 CSS 속성이 있어야합니다.

width: 900px; 
margin: auto; //this centers your div in the middle of your screen 
//Other styles that have nothing to do with positioning 

행운을 빕니다.