스프라이트 기법 문의있어요~ 급해요
갤쓰리
스프라이트 기법으로 하단 페이지 네비게이션을 제작중입니다.
배경색이 메뉴별로 틀려서 백그라운드로 원형 이미지를 만들어서 할 요량으로 이 기법을 사용하려는데 어렵네요
마우스를 올리면 원이 하얗게 변하면서 글씨도 검은색으로 바뀌는 디자인입니다
효과는 잘 되는데 글씨들이 원 안으로 안들어오네요~ 어떻게 해야 되나요??
소스는
#pageNav1 {clear:both; width:320px; height:25px; margin:25px auto; text-align:center; }#pageNav1 #Nav1 {float:left; width:180px; height:25px; margin:0; padding:0; background:url(../images/sub/leader/page_bg.gif) no-repeat left top; }#pageNav1 #Nav1 li {display:inline; letter-spacing:-.1em; font:bold 100% 돋움,Dotum,굴림,Gulim,Helvetica,AppleGothic,Sans-serif;}#pageNav1 #Nav1 li a {float:left; outline:none; width:25px; height:0; margin-right:11px; padding-top:25px;}#pageNav1 #Nav1 li a {background-image:url(../images/sub/leader/page_bg.gif); background-repeat:no-repeat }#pageNav1 #Nav1 li a:first-child {margin-left:0;}#pageNav1 button#navL, #navR {float:left; width:13px; height:15px; display:block; overflow:hidden; cursor:pointer; text-indent:-1000em; margin:4px 0; }#pageNav1 button#navL {background:url(../images/sub/leader/page_l.gif) no-repeat left 50%; margin-right:20px; }#pageNav1 button#navR {background:url(../images/sub/leader/page_r.gif) no-repeat left 50%; margin-left:9px; }/* nav a */#nav01 a { background-position: 0 0; color:#FFF }#nav02 a { background-position: -36px 0; color:#FFF }#nav03 a { background-position: -72px 0; color:#FFF }#nav04 a { background-position: -108px 0; color:#FFF }#nav05 a { background-position: -144px 0; color:#FFF}/* nav a:hover */#nav01 a:hover { background-position: 0 -25px; color:#151414; }#nav02 a:hover { background-position: -36px -25px; color:#151414; }#nav03 a:hover { background-position: -72px -25px; color:#151414; }#nav04 a:hover { background-position: -108px -25px; color:#151414; }#nav05 a:hover { background-position: -144px -25px; color:#151414; }
div id=pageNav1
button type=button id=navL이전페이지/button
ul id=Nav1
li id=nav01a href=#11/a/li
li id=nav02a href=#22/a/li
li id=nav03a href=#33/a/li
li id=nav04a href=#44/a/li
li id=nav05a href=#55/a/li
/ul
button type=button id=navR다음페이지/button
/div
-
적송
동시 실시간 답변 ㅋㅋ
-
리카
#nav01 a { background-position: 0 0; color:#FFF ; padding-top:25px; }
#pageNav1 #Nav1 li a {float:left; outline:none; width:25px; height:0; margin-right:11px; padding-top:25px;}
2군대 있어요~ -
맨삶이
overflow속성이 hidden이 아니라면 패딩만 없어지면 될건데 말이죠. 이게 브라우저마다 기본값이 틀렸던가?
-
상큼한캔디
이미지가 없어서 확실히 잘모르게써요 -ㅅ -/ 그리고 패딩25만 지우니 잘나오던데;;
-
돌삥
엇 시간차 답글 ㅋㅋ 제가 코멘달기 전엔 없었는데
-
사과
#pageNav1 #Nav1 li a {float:left; outline:none; width:25px; height:0; margin-right:11px; padding-top:25px;} -- 마지막에 padding-top: 25px 있는데 이놈인가요?
-
누림
padding-top:25px; 부분 다 지우세요~
-
눈
그래도 페이지숫자가 원안에 들어가지는 않아요
-
하예
a {display:block; padding:0;} 패딩이 ㄷ르어가있네요
-
호시
수다님의 말이 맞아요, #nav01 a 에 패딩값은 제가 이것저것 해보느라 넣어본건데 안지웠어요~
저도 지금 다른 방법으로 해결책을 찾고 있어요
보니 height:0으로 준게 또 다른 원인인듯해요. 암튼 해보고 있습니다
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2701285 | 아이폰이나 안드로이드 폰 인터넷으로 볼때 | 배꽃 | 2025-07-12 |
2701230 | 테마 설정하면 밑에 뜨는 글 삭제 (1) | 창의적 | 2025-07-12 |
2701177 | css적용이 안되요~ (6) | 다니엘 | 2025-07-11 |
2701151 | 사이트작업시 inputbox 가 readonly 형태표시 어떻게 하시나요? (1) | 찬내 | 2025-07-11 |
2701123 | 간단한 select 질문입니다 (3) | 천사의눈물 | 2025-07-11 |
2701061 | 비베질문.. | 똘끼 | 2025-07-10 |
2701034 | 메일폼 내 script 삽입가능한 방법 없을까요.. (2) | 마음새 | 2025-07-10 |
2701008 | 분명히 버튼을 만들었는데 액션이 안걸립니다. (3) | 재찬 | 2025-07-10 |
2700923 | 전체중앙정렬&독타입&쿼크모드 ㅜㅠ (8) | 푸른들 | 2025-07-09 |
2700893 | 질문드리겠습니다. | 도도한 | 2025-07-09 |
2700793 | 무비클립에 마우스 오버시 랜덤으로 효과음 나기는 어떻게 ;; (1) | 바닐라 | 2025-07-08 |
2700741 | 웹전송? (2) | 연와인 | 2025-07-07 |
2700686 | 카테고리 호버시 세부카테고리 보이게하는 것, css로만 가능할까요?? (3) | 다힘 | 2025-07-07 |
2700658 | 메타태그 질문드립니다..ㅠㅠ;;; | 모해 | 2025-07-07 |
2700632 | 외부에서 이미지 파일을 불러와야 합니다. 도와주세요. (4) | 에일린 | 2025-07-06 |
2700579 | (air + as3) smtp 이용해서 첨부파일 포함해서 메일 보내기 | 물보라 | 2025-07-06 |
2700524 | 클릭시 밑에 메뉴 나오게 (4) | 새솔 | 2025-07-05 |
2700505 | activex를 비쥬얼6.0으로 만들었는데요 비스타 배포시에 안되서 질문드립니다 (3) | 참이 | 2025-07-05 |
2700452 | c언어에서... 자료형 구분.... (3) | 시내 | 2025-07-05 |
2700422 | 버전에 관해 질문 | 라온제나 | 2025-07-04 |