css 축소판 벽 종이로 격자 벽?

정말 2560x1440 픽셀의 화면 해상도에 맞게 미리보기 이미지 벽을 만들고 싶습니다.css 축소판 벽 종이로 격자 벽?

사이트의 배경으로 사용되는 내 페이지 뒤에 그리드를 배치하고 싶습니다.

그러나 페이지가 스크롤 될 때 그리드는 그대로 유지됩니다. 내가 약간의 CSS와 HTML을 만들어 firefox4와 잘 작동하는 것 같다 크롬에서 테스트

그러나 IE8에서 작동하지 않는, 페이지 DIV 그리드 벽을 겹쳐하지만 아래 앉아하지 않습니다 .

브라우저 간 호환성을위한 쉬운 방법을 알려주십시오. 사전에

감사합니다,

존

############################### UPDATE

IE에서 CSS/HTML을 테스트 할 때 올바른 형식을 사용하십시오. 그냥 페이지에 CSS와 HTML을 던지는 대신.

Guffa의 답변에 감사드립니다.

또한 Z-index에 대한 Sam Bowler의 답변도 좋습니다.

나는 havent 그것없이 IE에서 그것을 시도하지만, 그래서 지금은 그것에 시간을 보내지 않을거야 작동합니다. HTML 문서를 가지고 있지 않기 때문이다

감사합니다 Guffa 샘

출처

2011-05-07 jonnypixel

왜 큰 타일 파일을 만들어서 배경으로 사용하지 않으시겠습니까? 또한로드하는 것이 훨씬 빠릅니다. 두 번째 생각에 .. 그냥 배경을 사용하지 마십시오, 귀하의 사이트가 훨씬 더 아름답습니다. – ariel

이미지는 회원이 생성 한 PHP의 활성 벽입니다. 각각은 자신의 사진에 대한 링크입니다. Topp 페이지는 allpxp 40x40px를 사용하고 있습니다. 그리드 div 위에 페이지 div를 겹쳐 써야합니다. 그게 내 질문. – jonnypixel

. 브라우저에 던지고있는 HTML 태그가 몇 개 있습니다. 브라우저는이 태그를 사용하기 위해 최선을 다하고 놀랍도록 잘합니다.

doctype 태그가 없으므로 IE는 페이지를 단조 모드로 렌더링합니다. 기본적으로 모든 것을 수행하는 가장 오래된 가능한 방법을 에뮬레이트하려고합니다. 최근에 추가 된 position:fixed이므로이 모드에서는 지원되지 않습니다.

유효한 HTML 문서는 html, head, title 및 body 태그를 필요로하고 당신은 쿼크 모드에서 페이지를 렌더링에서 브라우저를 유지하기 위해 doctype 태그가 필요합니다. 따라서, 표준 준수 모드로 렌더링하는 최소한의 HTML 문서는 다음과 같습니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
</body> 
</html>

귀하의 style 태그는 head 태그 내부에 가고, 내용이 body 태그 안에 간다.

사용하려는 HTML 버전에 따라 doctype 태그를 사용할 수 있습니다 (W3C's Recommended list of Doctype declarations 참조).

출처

2011-05-07 08:29:47 Guffa

감사합니다. :-). 그러한 간단한 테스트를 위해 얻은 가치있는 교훈. 나는 FF 크롬을 너무 많이 사용하는 것을 망쳤다 고 생각한다. IE에서 마지막으로 테스트했다. 어쩌면 내가 먼저 IE에서 테스트해야합니다. – jonnypixel

@jonnypixel : IE에서 테스트하지만 다른 브라우저에는없는 렌더링 버그가 있기 때문에 IE에서 먼저 테스트하지 마십시오. IE 용으로 개발한다면 레이아웃에서 이러한 렌더링 버그를 * 사용하고있을 가능성이 높습니다. 그런 다음 다른 브라우저에서 작동하게하려면 처음부터 다시 시작해야합니다. – Guffa

매우 현명한 피드백에 다시 한 번 감사드립니다. 그것은 좋은 의미가 있습니다. – jonnypixel

썸네일을 하나의 png/jpg 파일로 병합하는 것은 어떻습니까? 그러면 다음을 수행 할 수 있습니다.

body 
{ 
    background: url('thumbnails.jpg'); 
}

z- 인덱스를 더 이상 사용하지 않아도됩니다.

출처

2011-05-07 08:31:44 rickchristie

body 태그 CSS가 좋지만 그리드 div가 PHP로 축소판을 생성하고 있으며 각 축소판을 클릭 할 수 있습니다. 내 페이지 div에 오버레이가 필요합니다. 이 효과는 더 많은 해상도의 스크린에 적합하며 더 많은 회원 사진이 페이지 주위에 격자 벽으로 표시됩니다. – jonnypixel

배경 이미지를 병합 할 수없는 경우 z- 색인을 사용해야합니다. #grid에 #wrap보다 낮은 z- 색인을 지정하면 정렬됩니다 (두 요소가 모두있는 한 분당).

#grid { position: fixed; z-index: -1; } 
#wrap { position: relative; z-index: 1; }

출처

2011-05-07 08:36:06

샘, 고맙습니다. 내가 필요한 해결책에 가까워지고 있습니다. 나는 CSS에 귀하의 조언을 적용하지만 IE8 여전히 바보 같은 이유로 그것을 좋아하지 않아. – jonnypixel

css 축소판 벽 종이로 격자 벽?

답변

관련 문제