수다닷컴

안뇽하세요~.

100%로 가득차는 탭메뉴를 만들고 싶어서요. 탭메뉴라고 할 수도 있고, 그냥 메뉴라고 봐도 될거 같에요.

CSS
.tap .chap {width:100%; height:50px; display:inline;}
.tap .chap ul li.left {float:left; top:0; left:0; z-index:;}
.tap .chap ul li.center {float:left; height:50px; width:; background:url(images/bg.png);}
.tap .chap ul li.right {float:left; top:0; right:0; z-index:;}div class=tap
div class=chap
ul
li class=leftimg src=images/left.png //li
li class=center메뉴01/li
li class=rightimg src=images/right.png //li
/ul
/div
div class=chap
ul
li class=leftimg src=images/left.png //li
li class=center메뉴02/li
li class=rightimg src=images/right.png //li
/ul
/div
div class=chap
ul
li class=leftimg src=images/left.png //li
li class=center메뉴03/li
li class=rightimg src=images/right.png //li
/ul
/div
/div

소스는 이와 같구요.
보시면 알겠지만 메뉴가 이미지라고 생각할 때, 좌/가운데/우 이렇게 나눠서 ul,li로 코딩을 한거에요.
의미있는 마크업을 생각한다면 아무래도 ul li 속성을 써서는 안될거 같지만 일단 그렇게 해봤습니당..ㅎ
근데 저렇게 하면... 전체에 width:100%를 주어도 그냥 center에 글자를 써준 만큼만 가운데 bg가 생기더라구요.
저는 브라우저 사이즈에 따라 계속 100%가 유지되어 3개의 탭이 균일한 사이즈로 늘어나고 줄어들길 바라거든요..
center에 100%를 주면 당연히 가로 전체에 꽉차서 좌/우 이미지는 보이지도 않구요... 그 영역까지 가득차서...ㅠㅠ
어떤 방법이 없을까요?

css3.0을 이용하여 그라데이션/라디어스 기능을 넣는다면 해결될 일인듯도 하지만 우선은
고전적인 방법을 알고싶어서요~.
해보신 분이 있다면 답변 좀 부탁드릴께요~~.

신청하기