li안에서 img와 ul분리 구조 질문입니다
솔길
급기야 소스를 올리는 날이 오고야 말았습니다...ㅜㅡㅜ
참고로 제 생애 첫 웹표준 작업중입니다..
li구조로 탭을 만들었습니다
첨엔 잘됐는데...
본문을 너으면서 소스를 좀 수정했더니
어느순간 헤어져버렸습니다...
헤어진다는건 어느때고 사람을 참 힘들게 합니다;;제가 바라는 사람은
기본 ol li로 왼쪽에 이미지탭으로 타이틀이 있고그안에 ul li로 오른쪽에 그에 해당하는 내용이 li로 다시 오는것입니다
나머지 탭 내용은 표면상 가려지고 on의 내용만 같은 위치에 노출되는 구조를 꿈꾸고 있습니다...
헌데 tab01을 on으로 하면 아래가 확 내려가고헌데 tab02를 on으로 하면 아래가 확 내려가고머 대충 이런식입니다...
저를 정신차리게 해주실수 있는 커다란지적 부탁드립니다~
아래는 급기야 그 소스입니다,.....
감사합니다^^html------------------------div class=contents
ol
li class=stepa href=#img class=ttimg src=../images/perfsale/btn_st01on.gif alt=step01 //a
ul class=view off
li사과/li
li포도/li
li딸기/li
li자두/li
/ul
/li
li class=stepa href=#img class=ttimg src=../images/perfsale/btn_st02.gif alt=step02 //a
ul class=view on
li사과/li
li포도/li
li딸기/li
li자두/li
/ul
/li
li class=stepa href=#img class=ttimg src=../images/perfsale/btn_st03.gif alt=step03 //a
ul class=view off
li사과/li
li포도/li
li딸기/li
li자두/li
/ul
/li
/ol
/div
css------------------------
.contents{float:left;width:670px;margin-top:7px; height:418px;margin-left:20px;margin-right:7px;position:relative;background:url(../../images/perfsale/img_stepbg1.gif) no-repeat 100px 0px;}
.on{width:670px;}
.off{position：absolute; width:0;height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden;}
.step {}
.step .view{width:561px;height:416px;float:right;background-color:#2f2f2f;border-bottom:#e1b79e 1px solid;border-top:#e1b79e 1px solid;border-right:#e1b79e 1px solid;padding-top::18px;}
.step .ttimg{float:left;margin-bottom:5px;clear:both;width:108px;clear:both;}
-
들꿈
아~ 청개구수다님 감사합니다 구조자체를 저렇게 짜면 참 편할것 같습니다
헌데 제가 준비하는것은 tab구조이고 이동도 가능하지만 결론은 결제단계까지 이르는 스텝 구조라서 바디내용 또한 li안에 순차적으로 나열되야 한다고 생각을 하고 있었습니다.
구조적인 마크업면에서 생각해도 주신 네비게이션 예제처럼(div로 순차정렬)도 되는걸까요? +_+
(정말 몰라서 묻고있습니다....;; ) -
훌걸이
굿샷!
-
남은
div style=\width:500px;\
ol style=\position:relative; width:500px;\
li style=\width:100px;\sdfdsfsdf
ul style=\display:none;position:absolute; right:0; top:0; width:400px; height:400px; background:blue;\
lidsfsdfdsf/li
/ul
/li
li style=\width:100px;\sdfsa -
계획자
네 ㅎㅎ 감사합니다 자리는 잡히네요^^
-
모이
핫.. 이런류가 맞았습니다 딱 제가 생각하고 있는 구조에요...
position:absolute만 계속 줘봤지 right:0; top:0; 으로 자리를 잡을 줄은 몰랐네요
생각이 마니 짧았던것 같습니다 덕분에 해결보고 나머지 작업 이어갈 수 있게 되었습니다~
고맙습니다~^__________^