Mozilla 한국 커뮤니티

ul테그로 카테고리를 표현 하고 싶은데 쉽지 않아 도움을 구합니다.

<code>
여성상의/자켓 블라우스/셔츠 | 티셔츠 (라운드,브이넥,카라) | 원피스 | 정장
자켓/점퍼 | 니트 | 스웨터 | 코트 | 가디건

여성하의 스커트(A라인,H라인,플래어...) | 바지(일자,카고,나팔,정장)...

</code>

이렇게 표현 하고 싶은데 밤을 꼬박 새도 답이 안나오네요.
사이즈는 유동적이고 여성상의/자켓,여성하의만 같은 폭을 가지게 되면 됩니다.괄호나 콤마 바등은 없어도 무관합니다.
혹시 이런 레이아웃으로 구현하신분 있으시면 조언 부탁드립니다.
<code>

<ul id="category">
<li><h2><a href="#">여성상의/자켓</a></h2>
<ul>
<li><a href="#">블라우스/셔츠</a></li>
<li><a href="#">티셔츠</a>
<ul>
<li><a href="#">라운드</a></li>
<li><a href="#">브이넥</a></li>
<li><a href="#">카라</a></li>
</ul>
</li>
<li><a href="#">원피스</a></li>
<li><a href="#">정장</a></li>
<li><a href="#">자켓/점퍼</a></li>
<li><a href="#">니트</a></li>
<li><a href="#">스웨터</a></li>
<li><a href="#">코트</a></li>
<li><a href="#">가디건</a></li>
</ul>
</li>
<li><h2><a href="#">여성하의</a></h2>
<ul>
<li><a href="#">스커트</a>
<ul>
<li><a href="#">A라인</a></li>
<li><a href="#">H라인</a></li>
<li><a href="#">플레어</a></li>
<li><a href="#">미니</a></li>
<li><a href="#">청/데님</a></li>
<li><a href="#">롱스커트</a></li>
</ul>
</li>
<li><a href="#">바지</a>
<ul>
<li><a href="#">일자</a></li>
<li><a href="#">카고</a></li>
<li><a href="#">나팔</a></li>
<li><a href="#">정장</a></li>
</ul>
</li>
<li><a href="#">반바지</a></li>
</ul>
</li>
</ul>
</code>

http://css.macple.com/forum/showthread.php?t=455

http://css.macple.com/forum/showthread.php?t=471

http://www.xs4all.nl/~peterned/examples/cssmenu.html

Code: Select all

<style type="text/css">
h2 {
	margin: 0;
	display: inline;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#category li {
	display: block;
}
#category li ul, 
#category li li {
	display: inline;
}
</style>

혹시 이게 원하시는 건가요?

hyeonseok wrote:혹시 이게 원하시는 건가요?

비슷한 레이아웃인데.....

http://www.timemail.co.kr/goods/maincategory.asp

정확히는 위 유알엘에서 보는 것 같은 레이아웃입니다.
일단 폭이 가변인것(좁아 졌을때 여성상의/자켓 밑으로 하위 분류가 감싸지 않을것)과 최 상위분류는 분류명에 상관없이 같은 폭을가질것(%든 px이든..)

위 두가지를 ul로 동시에 지키기기에는 내공이 한참 부족해 몇시간전에 dl태그와 em등으로 표현은 해냈습니다만... 이게 의미를 살린 마크업이라 할 수 있는건지...

될듯될듯 하면서 쉽지 않네요.
한번 더 부탁드립니다.

Code: Select all

  #category { border: 1px solid rgb(0, 0, 0);
    margin: 0pt;
    padding: 0pt;
    overflow: auto;
    }

  #category li, #category li ul { margin: 0pt;
    padding: 0pt;
    display: inline;
    }

  #category li li li { color: rgb(255, 204, 255);
    }

  #category h2 { margin: 0pt;
    padding: 0pt;
    font-size: 1em;
    width: 150px;
    float: left;
    clear: left;
    }

  #category ul { margin: 0pt;
    padding: 0pt;
    float: left;
    clear: none;
    }

  #category ul ul { float: none;
    }

파폭에서는 되는데 ie에서는 안되는군요.
float를 clear 한걸 모르는 모양입니다.

덧. category에 고정폭 width: 800px; 을 주면 일단은 보이긴 하는군요.

두분 올려주신 css로 이것저것 해보았는데 정확히 제가 원하는 레이아웃이 나오질 않네요.
해서 일단 dl태그로 마무리하고 시간 나는대로 다시 도전해볼 생각입니다.
두분 도와주셔서 감사합니다.

d2icid2 wrote:두분 올려주신 css로 이것저것 해보았는데 정확히 제가 원하는 레이아웃이 나오질 않네요.
해서 일단 dl태그로 마무리하고 시간 나는대로 다시 도전해볼 생각입니다.
두분 도와주셔서 감사합니다.

Mozilla 한국 커뮤니티

중첩 UL로 사이트맵 표현 방법??

중첩 UL로 사이트맵 표현 방법??

파폭에서만 되는 겁니다만..