신규게시물 올라왔을때, new아이콘 li에서

[sharin62]

css초짜입니다. 웹표준으로 한번 짜보려고, table태그 다 없애고, 한번 해보는 중입니다. css는 이렇게 줬구요.

Code: Select all

ul.villiage
{  
    clear:left;
    list-style-image: none;
    margin:0;
    line-height:1.6;
    padding:0;
    
    }
li 
{
    text-align:left;
    background: url(image/01-icon.gif) no-repeat 0 50%;padding-left: 34px;
    display:inline-block;
  
}
    

첫번째.
실제 리스트 페이지에서는, asp로 구현했거든요.

Code: Select all

<ul class="villiage" id="k01">
<li>메뉴1</li>
<if>
<img src="/image/icon-new.gif" alt="new">
<end>
</ul>

이렇게 되는건데, 이 new아이콘이 list에서 한줄 밀려서 나오는겁니다.


두번ㅤㅉㅒㅤ.
이거 관련해서 구분선을 도트 이미지로 넣는것도 여쭤봅니다.
예를들면,

Code: Select all

<ul class="villiage" id="k01">
<li>메뉴1
<li>메뉴2
<img> ------ <- 이미지
<li>메뉴3
<li>메뉴4
</ul>

이럴경우에도 문제가 li의 코드를 그대로 먹어서, 정렬자체가 list메뉴처럼 정렬되는데요. 이걸 해제하는 방법이 없을까 궁금합니다. 메뉴1,2와 메뉴3,4는 같은 ul안에 있어야 디스플레이에서 함께 보여지거나 사라지거든요.
그런데 img인 도트선까지 함께 사라져야하니까 ul에 넣어야되는데,
정렬에서 li와 같이 정렬되어버려서요.

그래서 자문을 구합니다. 혹, 이문제를 해결할수 있는 방법 부탁드려요.

[sharin62]

아무답글 없으신것은, 기초질문이였기때문이라고 생각하고,
나름 반성하고 있습니다.

백그라운드의 유용성을 다시한번 절감하게되었습니다..

[nowhere0]

CSS design 에 관해서라면,
css.macple.com 에 물어보시는 것이 더 나을 것 같습니다.

[평양선봉]

리스트가 시작되었기때문에, 별 다른 방법이 없을듯 합니다.

Code: Select all

<ul style="margin:0px;">
  <li>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
    </ul>
  </li>
  --------------
  <li>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
    </ul>
  </li>
</ul>

이런 방법도 있긴 합니다.
리스트를 나누고, 영역을 div 태그로 묶으 시는게 좋을거 같습니다.

[d2icid2]

[quote="sharin62"]css초짜입니다. 웹표준으로 한번 짜보려고, table태그 다 없애고, 한번 해보는 중입니다. css는 이렇게 줬구요.

Code: Select all

ul.villiage
{  
    clear:left;
    list-style-image: none;
    margin:0;
    line-height:1.6;
    padding:0;
    
    }
li 
{
    text-align:left;
    background: url(image/01-icon.gif) no-repeat 0 50%;padding-left: 34px;
    display:inline-block;
  
}

이렇게

Code: Select all

ul{list-style:none;}
li.tline{padding-bottom:20px;background: url(test_line.gif) repeat-x 0 100%;}
li a.tnew{padding-right:30px;background: url(test_new.gif) no-repeat 100% 50%;}

Code: Select all

<ul class="villiage" id="k01">
<li>메뉴1</li>
<if>
<img src="/image/icon-new.gif" alt="new">
<end>
</ul>

Code: Select all

<ul>
<li><a href="#" <if>>메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li class="tline"><a href="#" <if>>메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>

http://nawayo.com/test/test.asp

사실 예제를 보면 점선이 부라우져 끝까지 가는데 ul이나 ul을 감싸고 있는테그에 width를 주시면 해결될거 같고 피치 못할경우는 지금은 라인이미지가 3 * 20 인데 100 * 20으로 만들어주시고 no-repeat하시면 될꺼 같습니다.

질문 요지를 정확히 파악한건지 모르겠네요 쩌비...

[sharin62]

해결했습니다.
감사합니다.

역시, css를 좀 더 파집어봐야겠군요.