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>
중첩 UL로 사이트맵 표현 방법??
-
- Posts: 37
- Joined: 2005 10 24 18:45 46
- Location: 이세상의 가장 구석진 곳 ...
- Contact:
-
- 해커
- Posts: 691
- Joined: 2004 08 11 22:14 59
- Contact:
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등으로 표현은 해냈습니다만... 이게 의미를 살린 마크업이라 할 수 있는건지...
될듯될듯 하면서 쉽지 않네요.
한번 더 부탁드립니다.
-
- Posts: 37
- Joined: 2005 10 24 18:45 46
- Location: 이세상의 가장 구석진 곳 ...
- Contact:
파폭에서만 되는 겁니다만..
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;
}
float를 clear 한걸 모르는 모양입니다.
덧. category에 고정폭 width: 800px; 을 주면 일단은 보이긴 하는군요.
결국 모든 것을 해야 하는 것은 나 자신이다...
-
- Posts: 24
- Joined: 2005 03 12 10:28 29
- Location: 광주
- Contact:
Who is online
Users browsing this forum: No registered users and 3 guests