Hammer
현재메뉴 메뉴보기
PXE 상품에 대한 기술지원 코너 총 1714 건
  • 놀쇠
  • 조회 수 5349
  • 댓글 수 3
  • 추천 수 0
2008년 10월 26일 20시 44분 등록
테스트 URL  
XE 코어 버전  
웹브라우저  
상태  
우선 제작자님께 이렇게 멋지고 이쁜 스킨을 공개해주신것에 대해 감사하단 말씀 먼저 드립니다.
전 공개해주신 이쁜 스킨으로 사이트를 좀 바꿔보려하는 초보입니다. ^^

헌데 제가 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창 뜨면서 링크속성이 지워지더군요..)


IP *.138.200.1
프로필 이미지
WTA
October 27, 2008 *.232.10.166
자기가 알아낸 노하우를 남과 나눈다는게 쉽지 않은데 이렇게 좋은 팁도 주시고 정말 감사합니다^^ 오늘 낮에 한번 해보고 다시 댓글 남기겠습니다~
프로필 이미지
WTA
October 27, 2008 *.232.10.166
항상 저 비헤이비어의 경로가 문제인데, 상대경로가 안되면 스킨에 적용을 시킬수가 없어서 곤욕입니다. 일단은 IE6까지 대응하고자 하는 분들께는 놀쇠님의 방법을 링크시켜서 참고하도록 하는 수밖에는 현재 큰 해결책이 없을 것 같네요. 아마 제로보드 웹표준 담당하시는 분들도 이쪽 문제로 골머리 좀 썪으셨을텐데 방법은 찾았어도 항상 모든 조건을 만족시키지 못하는 문제가 있어서 아마 가장 이로운 쪽으로 사용한게 iePngFix.htc 핵이 아닌가 생각합니다.

이 게시물은 제 레이아웃 다운로드 게시물에 직접 링크를 걸겠습니다^^ 놀쇠님 정말 감사합니다~
프로필 이미지
October 28, 2008 *.35.5.109
에고 별말씀을요~스킨 제작에 많은 시간과 노력을 투자하셨을텐데 이렇게 아낌없이 배포까지 해주시는 제작자님께 다시한번 감사드릴뿐입니다~ 날씨가 갑자기 추워졌는데 감기도 조심하세요~~^^
덧글 입력박스
유동형 덧글모듈