상품명 짤리는 문제(반응형)입니다. 채택완료
이제 대부분의 문제는 다 잡았네요. (2주동안 개 노가다 ㅠㅠ)
http://theme.sir.kr/youngcart5/demo/kidstore">http://theme.sir.kr/youngcart5/demo/kidstore
아리아나벤티님의 위 테마를 사용중입니다.
main.10.skin.php (베스트,신상품에 적용)
list.10.skin.php (카테고리 리스트 적용)
두 스킨 모두 상품명이 길어지면 특정 width에서 그냥 짤립니다.
... 따위 없이 바로 짤립니다.
상품명이 노출되는 skin.php 내용입니다.(내용이 공통됩니다.)
</p><p>if ($this->view_it_id) {</p><p> echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";</p><p> }</p><p> </p><p> if ($this->href) {</p><p> echo "<div class=\"sct_txt\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n"; // 이 부분에서 sct_txt 클래스를 스타일로 적용하라는데... ㅠㅠ</p><p> }</p><p> </p><p> if ($this->view_it_name) {</p><p> echo stripslashes($row['it_name'])."\n"; // 이 부분이 상품명을 불러오겠죠.</p><p> }</p><p> </p><p> if ($this->href) {</p><p> echo "</a></div>\n";</p><p> }</p><p> </p><p> if ($this->view_it_price) {</p><p> echo "<div class=\"sct_cost\">\n";</p><p> echo display_price(get_price($row), $row['it_tel_inq'])."\n";</p><p> echo "</div>\n";</p><p> }</p><p>
근데... 스타일시트 화일을 들여다보면 sct_txt 클래스에 별다른 내용은 없습니다.
css 내용입니다. 메인20번스킨까지 함께 올려봅니다.
</p><p>/* 메인(베스트) 상품목록 스킨 10 */</p><p>.sct_10 li{text-align:center;margin-bottom:5px;}</p><p>.sct_10 .sct_img{display:block;padding:10px}</p><p>.sct_10 .sct_img:hover img{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background:url(img/zoom.png);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background:#000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>opacity:0.7;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-box-shadow: 0 0 10px #000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-box-shadow: 0 0 10px #000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>box-shadow: 0 0 10px #000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> /* sct_txt 클래스 가출 ㄷㄷㄷㄷ 안보임 ㅠㅠ */</p><p>.sct_10 .sct_img img{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>width:100%;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height:auto;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-transition: all 0.5s ease;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-moz-transition: all 0.5s ease;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-ms-transition: all 0.5s ease;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>transition: all 0.5s ease;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p>.sct_10 .sct_cost {color:#ff405e;font-weight:bold;}</p><p>.sct_10 .sct_cost .cust_price{display:block;color:#696969;font-size:11px;font-weight:normal;text-decoration:line-through}</p><p> </p><p>.li_more{text-align:center;display:block;}</p><p>.li_more img{width:30px;margin:5px 0}</p><p>.li_more p{color:#aaa;margin-top:5px;display:none;}</p><p>.li_more .li_more_btn{clear:both;width:100%;display:block;}</p><p>.li_more button{background:#63a1b8;width:205px;padding:8px 0 ;font-size:0.917em;color:#fff;margin-top:45px;border:none;text-align:center;border-radius:5px}</p><p> </p><p>/* 메인(최신) 상품목록 스킨 20 */</p><p>.sct_20 li{text-align:center;margin-bottom:20px;}</p><p>.sct_20 .sct_img{display:block;padding:10px} /* 혹시나해서 20번스킨 적용해봐도 똑같습니다. */</p><p>.sct_20 .sct_img img{width:100%;height:auto;}</p><p>.sct_20 .sct_txt{text-align:center} /* 얘는 여기 있는데 중앙정렬빼곤 특이점은 없습니다. ㅠㅠ */</p><p>.sct_20 .sct_cost {color:#ff405e;font-weight:bold;text-align:center}</p><p>.sct_20 .sct_cost .cust_price{display:block;color:#696969;font-size:11px;font-weight:normal;text-decoration:line-through}</p><p>
http://sir.kr/qa/120560?stx=ellipsis&sst=wr_num&unanswered=0&s_tag=%EC%98%81%EC%B9%B4%ED%8A%B85">http://sir.kr/qa/120560?stx=ellipsis&sst=wr_num&unanswered=0&s_tag=%EC%98%81%EC%B9%B4%ED%8A%B85
비슷한 상황의 글이 보여서 해봣는데 소용없습니다. ㅎㅎ ㅠ
일반적으로 상품명 길이가 width값을 오버하면 두줄로 표기해야 하는게 보편적일텐데
그걸 어떻게 할지 모르겠네요 ^^;
=========== 내용추가 ===========
어찌저찌해서 상품명 두줄을 만들었습니다. 하하하하하
근데... 줴길슨 금액 위치가 고정입니다. 귀한 상품명께서 두줄로 내려오셨으면
냉큼 눈치보고 아랫줄로 내려가야할것이 안내려가고 버팁니다. ㅠㅠ
그래서 두번째줄 상품명과 금액이 겹치네요 ㄷㄷㄷㄷ
css 는 항상 저의 인내심을 시험하네요 ㅎㅎㅠ
답변 1개
#sct_wrap .sct_txt a 스타일에 height값이 20px으로 지정되어 있어서
둘째줄로 내려가는 내용부터는 안보이고 있네요.
height:auto로 하면 제목이 얼마나 길어지던지 다 보여지기는 하는데
그러면 상품글마다 높이가 일정치 않아 정렬이 꼬일거예요.
height:40px(2줄이니 기존의 2배)로 css를 수정하시고 특정 글자수 이상부터는
상품명이 말줄임표로 나오게 소스를 수정하시는게 좋을거 같아요!
말줄임 소스는 아래 링크를 참고해보세요!
http://sir.kr/qa/102790?stx=%EB%A7%90%EC%A4%84%EC%9E%84&sst=wr_num&unanswered=0&s_tag=" target="_self">http://sir.kr/qa/102790?stx=%EB%A7%90%EC%A4%84%EC%9E%84&sst=wr_num&unanswered=0&s_tag=
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
슬리님 덕분에 쉽게 해결했습니다.
오늘은 꿀잠 잘 수 있을것 같네요. ㅎㅎ