탭 메뉴 구조에서 li들 위쪽 공간 잡아먹는 문제..
예다움
탭메뉴 구조를
[탭 1] [탭 2] [텝 ]
-------------------
[내 용]이런식으로 만들어진건데 마크업 구조는 아래와 같습니다.
ul
libr /h4탭 버튼/h4br /div각 탭별 컨텐츠 들어갈곳/divbr //libr /br /libr /h4탭 버튼/h4br /div각 탭별 컨텐츠 들어갈곳/divbr //libr //ul
br /이런식으로 마크업을 했습니다. ul에 포지션 relative 주고 h4들을 앱솔루트로 띄워서 정렬시켰고 클릭에 따라 각 li에 있는 DIV를 디스플레이 시키는 방식으로 구현했습니다.li에 포지션을 주지않은 이유는 각 컨텐츠별 높이가 유동적이다 보니 그랬습니다.
다 짜고 나니까 익스 7에서만 display: none이 되어버린 div를 가진 li들이(한마디로 화면에 보여지지 않은 탭들) 어느정도의 공간을 갖게 되더군요. 그래서 가장 우측에있는 탭메뉴를 클릭할시에는 앞쪽에 존재하는 탭을 감싸는 li들의 숫자만큼 중첩되어서 점점 더 공간이 벌어지는 경우가 생기더군요. 보여지지않는 LI들에게 스크립트상에서 font-size:0; line-height:0;으로 줄여봤지만 그공간이 줄긴 줄어도 공간 벌어지는건 마찬가지더군요.
탭구조를 버튼과 내용부분을 분리시키는 마크업을 하는방법밖에 없는지 궁금합니다...
이상 초보 퍼블리셔였습니다~ㅠㅠbr /br /br /br /
-
은새
비알은 사이트에서 글쓰는 과정에서 자동 삽입 됐네요~ ㅋ 감사합니다 ( __)
-
레나
br /은 모두 지우는게 좀 더 좋은 방법인거 같네요^^
-
크심
해결했습니다....
li에 float:left clear:both 주고
그 엄마 ul한테 overflow:hidden. 주니깐 잡히네요.