우선 제작자님께 이렇게 멋지고 이쁜 스킨을 공개해주신것에 대해 감사하단 말씀 먼저 드립니다.
전 공개해주신 이쁜 스킨으로 사이트를 좀 바꿔보려하는 초보입니다. ^^
헌데 제가 IE6을 사용하는데 레이아웃 스킨 상단메뉴와 WTA로고, 그리고 최하단 이미지 등 일부 PNG이미지가 깨져서 보이더라고요~ 해서 여기저기 알아보던중에 소뒷걸음질로 해결은 된거 같은데. 제 실력보다 제작자님께서 직접 봐주시면 더 좋은 방법을 찾으실 것 같아서 글남깁니다.^^
상단메뉴는.. css/default.css 파일의 59번째 줄 즈음에..gnb로 시작되는 부분을..아래와 같이 변경했습니다.
#gnb { position:absolute; top:-35px; left:20px; overflow:hidden; white-space:nowrap; margin-bottom:10px; }
#gnb li { float:left; list-style:none; position:relative; font:11px Arial; font-weight:bold; white-space:nowrap; }
#gnb li a { cursor:hand; display:block; float:left; padding:10px 0 0 0; width:98px; height:50px; color:#636363; white-space:nowrap; text-decoration:none; text-align:center;}
#gnb li a:hover {
font-weight:bold; color:#636363; background:url(../images/default/menu_on.png) no-repeat left center;_background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/zbxe/layouts/WG_Layout_20081021/images/default/menu_on.png", sizingMethod="crop");cursor:hand; }#gnb li a:focus { color:#000000; background:url(../images/default/menu_on.png) no-repeat left center;
behavior:url(/zbxe/common/js/iePngFix.htc);cursor:hand;}
#gnb li.on a { font-weight:bold; color:#636363;background:url(../images/default/menu_on.png) no-repeat left center;
behavior:url(/zbxe/common/js/iePngFix.htc);cursor:hand;}기본적으로 png이미지는
제로보드상에서 iePngFix.htc를 이용해 처리하지만
png이미지를
마우스 오버할때 직접 필터를 줘서 투명하게 처리해야 하는 것 같습니다.
(*헌데 직접 필터처리를 할때는 전체경로를 적어줘야 되는것 같습니다.)
위 내용의 기술적인 부분은 아래 블로그(나라디자인)에서 참고했습니다.
http://naradesign.net/wp/2008/09/22/157/모쪼록 제작자님께서 이 글 읽어보시고 더 손쉽게 처리되는 방법으로~
더더욱 멋지고 이쁜 스킨으로 발전시켜주시길 바랍니다~^^
** 참. 하단 footer 스타일도..131번째줄..즈음에..
#footer { margin:0 auto 40px auto; padding:0; width:952px; height:52px; overflow:hidden; clear:both; background:url(../images/default/footer.png) no-repeat left center;
behavior:url(/zbxe/common/js/iePngFix.htc);} /* position:relative; */
이렇게 변경하니 IE6에서도 매끄럽게 마무리 되더라구요~^^
(position:relative을 적으면 alert창 뜨면서 링크속성이 지워지더군요..)