스프라이트 기법을 썼는데 잘 아시는분 도움좀 부탁드립니다!
핫블랙
아래의 이미지를 이용해서 소셜아이콘에 마우스를 오버하면 이미지가 위로 올라오게하려고 합니다.
스프라이트 기법을 써서 제작을 했는데 마우스를 오버했을때 이미지 상단이 잘려서 나오고, 그 부분이 아래쪽으로
이어져서 나옵니다.
어디서 잘못을 한걸까요? ㅠ_ㅠhttp://ania.co.kr/link/html/test.html
html
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title질문용 코딩/title
head
style type=text/css
.social_section { float:right; position:relative; top:200px; right:550px; }
.social_networks { list-style:none; width:218px; height:24px; background: transparent url(../img/social_networks.png) no-repeat; ; }
.social_networks li { float:left; overflow:hidden; }
.social_networks li a { display:block; text-indent:-1000em; }
.social_networks li.email a { width:56px; height:24px; background:url(../img/social_networks.png) no-repeat 0 0; }
.social_networks li.rss a { width:56px; height:24px; background:url(../img/social_networks.png) no-repeat 56px 0; }
.social_networks li.twitter a { width:56px; height:24px; background:url(../img/social_networks.png) no-repeat 112px 0; }
.social_networks li.facebook a { width:50px; height:24px; background:url(../img/social_networks.png) no-repeat 168px 0; }
.social_networks li.email a:hover { width:56px; height:37px; background:url(../img/social_networks.png) no-repeat 0 -37px; }
.social_networks li.rss a:hover { width:56px; height:37px; background:url(../img/social_networks.png) no-repeat -56px -37px; }
.social_networks li.twitter a:hover{ width:56px; height:37px; background:url(../img/social_networks.png) no-repeat -112px -37px;}
.social_networks li.facebook a:hover { width:50px; height:37px; background:url(../img/social_networks.png) no-repeat -168px -37px;}
/style
/head
body
div class=social_section
ul class=social_networks
li class=emaila href=#emailemail/a/li
li class=rssa href=#rssrss/a/li
li class=twittera href=#twittertwitter/a/li
li class=facebook a href=#facebookfacebook/a/li
/ul
/div!-- social_section 끝 --
/body
/html
-
예린
높이를 늘리지 마시고, 평소 높이를 37px로 하고, 배경이미지를 움직이는 건 어떤가요?
.social_networks li.email a {
background:url(\../img/social_networks.png\) no-repeat scroll 0 13px transparent;
height:37px;
width:56px;
}
.social_networks li.email a:hover {
background:url(\../img/social_ -
Sonya
네!! 맞습니다.^^ 아주 잘되네요!
.social_networks 부분에서
배경이미지를 반드시 넣어야 되는줄 알고 높이값을 37px로 주지를 못하고 있었거든요.
그런데 그게 필요없는거구나;;
{ float:right; list-style:none; width:218px; height:37px; }로 고치면서 플로트를 오른쪽으로 배치시켰습니다.
너무너무 감사드립니다. ^^ -
다솜
답변 감사합니다. ^^
말씀해주신대로 했는데 처음의 코딩과 똑같이 나타나고 있어요 ㅠㅠ -
머슴밥
처음부터 높이를 37px로 잡고 백그라운드 포지션을 이동하셨으면 문제가 없었을것 같네요. 수다님이 말씀하신것처럼 margin-top을 주면 해결되겠네요!!
-
눈내리던날
:hover 되면 높이를 24px에서 37px로 변경을 하면서 배경이미지의 위치를 변경 해주었는데요.
li의 높이를 늘리면 높이가 위로 늘어나면 좋겠지만 아래로 늘어나서
이미지 위치변경은 위로 올렸는데 li의 높이가 아래로 늘어나서 윗부분의 이미지는 짤리고
아래부분의 이미지는 보이는거 같습니다^^ -
당나귀
쓸데없는 태클이지만.. 16비트 아니고, 32비트거나.. 64비트이겠지요.. -0-;;
16비트 운영체제는 10여년전에나... -
다솜
음..전 지금 제 노트북이 아닌 다른 사람 컴퓨터인데 여긴 window7 16비트 운영체제에
IE8이거든요. 그런데 아무런 변화가 없네요.
혹시나해서 .social_section 하고 .social_networks 둘다 margin과 padding 0을 주워봤지만
달라지지 않고 있어요.
흐음; 뭐가 문제인지를 잘 못찾겠네요..ㅠ -
나빛
난독증은 조금 있네요...-0-;; 아니라면 죄송합니다..꾸벅..
근데..왜 전 잘될까요? chrome 에서 잘보입니다.
파폭에서도 잘보이구요.
ie6 에서는 아예 안보이네요.. -
참없다
닭흙님 말씀 어이가 없네요. \잘아시는분 도움좀 부탁드립니다!\ 라고 말했거든요.
제가 언제 그렇게 말했습니까? 난독증 있으신지요.
모르면 질문올리고 배우는거죠. 진짜 웃긴 사람이네요.
답변은 감사합니다만, 이미 해봤던 방법이구요. 마진과 패딩을 리셋하는거랑 상관 없어요, 안되는 방법입니다. -
목소리
잘 모르면 대답하지 말란소리로 들립니다..-0-;;;
* { margin:0; padding:0; }
잘 되네요. (자잘한 디버깅은 알아서 좀...-0-;;)