웹표준 초보입니다. 도와주세요
Addicted
웹표준 초보입니다.. ㅠ.ㅠ
가로로 3개가 나란히 있는 배너를 코딩하려고 하는데요..
#main01 #e_banner ul {overflow:hidden;}
#main01 #e_banner li {text-indent:-10000px; float:left;}
#main01 #e_banner li a {display:block; width:192px; height:70px;}
#main01 #e_banner li a:hover {background-position:0px 70px;}
#main01 #e_banner li.eBanner03 a {display:block; width:190px; height:70px;}
#main01 #e_banner li.eBanner01 {background:url(../img/main/eBanner01.gif) no-repeat;}
#main01 #e_banner li.eBanner02 {background:url(../img/main/eBanner02.gif) no-repeat;}
#main01 #e_banner li.eBanner03 {background:url(../img/main/eBanner03.gif) no-repeat;}
div id=main01div id=e_banner
ulli class=eBanner01a href=암전용보험/a/lili class=eBanner02a href=의료실비보험/a/lili class=eBanner03a href=재테크서비스/a/li/ul/div/div
가로로 나란히 되기는 하는데 a:hover 효과가 나오질 않네요;;;
도움 좀 부탁드립니다.. ㅠ.ㅠ
추가질문 : li display를 inline으로 바꾸면 배너가 가로정렬이 되는데요.. 그 안에 a를 block으로 잡으니 다시 세로로 바뀌던데요.. 왜 그런가요???
-
볼매
감사합니다, 해결했어요~~~ ^^
-
영글
a:hover 일때 배경 변화 효과를 주시려면 li가 아닌 a태그에 background가 적용이 되어있어야 합니다.
추가질문 답변 : inline 안에 자식요소가 block 이 되는 것은 맞지 않습니다. a가 block 이 되면서 width 값이 100% 먹어 세로로 바뀌는 것 같네요~ 파이어버그로 영역 체크 해보세용