좌측서브메뉴 코딩 어떻게 하시나요???
화가마
좌측서브메뉴 코딩 어떻게 하시나요???
저는 짧은 지식으로 아래와 같이 코딩을 했는데 익스플로러 버전에 따라 달리 보이는 현상이 있습니다.
아마도 각 depth에 주었던 스타일이 다음 스타일에도 영향을 미치는 문제 때문인 거 같은데
어떻게 해결해야 할지 모르겠네요;;;; ㅠ.ㅠ
이런 메뉴의 경우 어떻게 코딩하는 것이 가장 효과적일가요??
그리고 지금 저처럼 코딩했을 경우 어떻게 수정해야 제대로 나올까요??
이미지로 약간의 꼼수를 썼는데.. 그것도 익스6,7에서는 수용해주지 않네요;;; 크크
div id=container_left
div class=loginHongKD/div
ul class=depth1
li class=offa href=#1/a/li
li class=offa href=#2/a/li
li class=offa href=#3/a/li
li class=onWeb ERM/li
ul class=depth2
li class=ona href=#1/a/li
li class=on2/li
ul class=depth3
li class=offa href=#-1/a/li
li class=on-2/li
/ul
li class=offa href=#3/a/li
/ul
/ul
/div
********** css ***************************************************
/* left navi */
.depth1 {width:160px;; height:300px; float:left;}
.depth1 li.off {width:140px; height:20px; padding-top:7px; padding-left:20px; background-image:url(../images/left_mdepth1off.gif); background-position:center left; background-repeat:no-repeat; float:left;}
.depth1 li.off a:link{color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth1 li.off a:visited{color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth1 li.off a:hover{color:#f39600; font-size:12px; font-weight:bold; text-decoration:none;}
.depth1 li.on {width:140px; height:20px; padding-top:7px; padding-left:20px; background-image:url(../images/left_mdepth1on.gif); background-position:center left; background-repeat:no-repeat; font-size:12px; color:#777777; font-weight:bold; float:left;}
.depth2 {width:140px; height:92px; margin-left:20px; float:left;}
.depth2 li.off {width:128px; height:18px; padding-top:5px; padding-left:12px; background-image:url(../images/left_mdepth2off.gif); background-position:center left; background-repeat:no-repeat; float:left;}
.depth2 li.off a:link {color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth2 li.off a:visited {color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth2 li.off a:hover {color:#f39600; font-size:12px; font-weight:bold; text-decoration:none;}
.depth2 li.on {width:128px; height:18px; padding-top:5px; padding-left:12px; background-image:url(../images/left_mdepth2on.gif); background-position:center left; background-repeat:no-repeat; font-size:12px; color:#f39600; font-weight:bold; float:left;}
.depth3 {width:120px; height:42px; float:left;}
.depth3 li.off {width:120px; height:17px; padding-top:4px; background-image:url(../images/sp.gif); float:left;}
.depth3 li.off a:link {color:#777777; font-size:12px; font-weight:normal; text-decoration:none;}
.depth3 li.off a:visited {color:#777777; font-size:12px; font-weight:normal; text-decoration:none;}
.depth3 li.off a:hover {color:#f39600; font-size:12px; font-weight:normal; text-decoration:none;}
.depth3 li.on {width:120px; height:17px; padding-top:4px; background-image:url(../images/sp.gif); font-size:12px; font-weight:normal; color:#f39600; float:left;}
흑흑 도와주세요 ㅠ.ㅠ
-
비치나
더블마진때문이에요..
depth2 에 {display: inline;} 을 추가해보세요
float과 같은방향으로 margin을 주면 2배가 되는 버그가잇어요...(더블마진) -
지우개
경수님 감사해요~ ^^ 해결~!!!
-
키클
아~ 용쓰님 감사해요~~ ^^; 실무에서 바로바로 공부하는 터라.. 기본기가 부족했나봐요~
근데 아직도 ie6에서는 2depth부터 너무 밀려나와요~ ㅠ.ㅠ -
겨라
소스 중간에
ul
li/li
li/li
li
ul
li/li
li/li
/ul
/li
/ul
이렇게 사용하셔야 합니다.
li태그 안에 ul이 들어가야 하는거죠.