새도우님 tab 을 활용중에 질문드려요
1,774
2015.05.07 23:30
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1d4 주소복사
본문
그누보드용 tab
새도우님용 tab
그누보드용 tab처럼 각잡아서 정렬하고 싶어요
어디를 고쳐야 될까요?
효과나 색상은 새도우님용 tab 그대로 쓰고 각만 잡아서 정렬했으면 좋겠습니다.
2
레벨 15
경험치 21,954
Progress Bar 32%
- 가입일 : 2015-02-27 15:26:36
- 서명 :
- 자기소개 :
Total 2,281건 7 페이지
게시판 이용안내
이윰빌더를 이용하시는 모든 회원님들이 서로 궁금한 부분을 질문 또는 답변을 하며 문제점을 서로 해소할 수 있는 공용 질답 게시판입니다.
질문 시 기본적인 예절을 지켜주세요.
- 질문 시 바른말을 이용 해 주세요.
- 질문자의 상황을 다른이가 예측하기 힘듭니다. 오류가 난 상황이나 환경등을 최대한 자세하게 알려주셔야만 원하시는 답을 얻을 확률이 높습니다.
- 질문의 유형에 따라 틀릴 수 있지만 문제가 되는 해당 페이지 주소가 있으면 가장 근접한 해법이 나올 가능성이 큽니다.
- 원하시는 답을 얻으시면 감사의 말씀을 전하는 센스를 발휘 해 주세요.
- 질문 전 한번쯤 읽어볼만한 글 : http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=74
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 |
|---|---|---|---|---|
| 2,161 |
김나리
|
2015.03.28 | 1,824 | |
| 2,160 |
엉주
|
2015.05.21 | 1,816 | |
| 2,159 |
총사달타냥
|
2015.08.04 | 1,813 | |
| 2,158 |
joosam
|
2015.05.01 | 1,810 | |
| 2,157 |
guide
|
2016.05.07 | 1,810 | |
| 2,156 |
풀림
|
2016.02.22 | 1,808 | |
| 2,155 |
꼬마별
|
2015.03.08 | 1,806 | |
| 2,154 |
oppa
|
2015.03.24 | 1,800 | |
| 2,153 |
불꽃게이
|
2015.03.08 | 1,797 | |
| 2,152 |
shadow
|
2015.03.07 | 1,788 | |
| 2,151 |
카풀
|
2015.03.02 | 1,782 | |
| 열람 |
티보리
|
2015.05.07 | 1,775 | |
| 2,149 |
총사달타냥
|
2015.05.29 | 1,770 | |
| 2,148 |
shadow
|
2015.04.18 | 1,769 | |
| 2,147 |
maxform
|
2015.05.20 | 1,769 | |
| 2,146 |
shadow
|
2015.05.21 | 1,769 | |
| 2,145 |
개구쟁이케빈
|
2015.02.05 | 1,761 | |
| 2,144 |
김민상
|
2015.07.21 | 1,754 | |
| 2,143 |
오켕
|
2015.05.19 | 1,731 | |
| 2,142 |
알로하
|
2015.03.09 | 1,717 |
댓글목록
shadow님의 댓글
기존에 올렸던 eyoom/theme/설치된 테마/css/custom.css에 추가했던 소스를 아래와 같이 수정해보시기 바랍니다.
수정 전
/*Tabs Cart*/ .tab-cart .nav-tabs { border: none; background: none; } .tab-cart .nav-tabs a { font-size: 14px; padding: 5px 13px; } .tab-cart .nav-tabs > .active > a, .tab-cart .nav-tabs > .active > a:hover, .tab-cart .nav-tabs > .active > a:focus { color: #fff; border: none; background: #e33334; } .tab-cart .nav-tabs > li > a { border: none; } .tab-cart .nav-tabs > li > a:hover { color: #fff; background: #e33334; } .tab-cart .tab-content { padding: 10px 0; } .tab-cart .tab-content img { margin-top: 4px; margin-bottom: 15px; } .tab-cart .tab-content img.img-tab-space { margin-top: 7px; }수정 후
/*Tabs Cart*/ .tab-cart .nav-tabs { border: none; background: none; } .tab-cart .nav-tabs a { font-size: 13px; padding: 5px 5px; } .tab-cart .nav-tabs > .active > a, .tab-cart .nav-tabs > .active > a:hover, .tab-cart .nav-tabs > .active > a:focus { color: #fff; border: none; background: #87b822; } .tab-cart .nav-tabs > li { float: none; display: table-cell; width: 6.25%; } .tab-cart .nav-tabs > li > a { border: none; text-align: center; } .tab-cart .nav-tabs > li > a:hover { color: #fff; background: #87b822; } .tab-cart .tab-content { padding: 10px 0; } .tab-cart .tab-content img { margin-top: 4px; margin-bottom: 15px; } .tab-cart .tab-content img.img-tab-space { margin-top: 7px; }축하합니다. 첫댓글 포인트 33포인트를 획득하였습니다.
축하합니다. 행운의 포인트 65포인트를 획득하였습니다.
shadow님의 댓글
아 탭의 갯수에 맞게 수정하셔야 합니다.
.tab-cart .nav-tabs > li { float: none; display: table-cell; width: 6.25%; }위 소스 width: 퍼센트; 는 가로 갯수 나누기 1의 배율로 하셔야 합니다.
수정 후
.tab-cart .nav-tabs > li { float: none; display: table-cell; width: 9.09%; }shadow님의 댓글
한가지 문제점이 탭 셀 자체를 퍼센트로 고정해야하는 문제로 인해 탭 메뉴의 글자수에 따라 세로로 표현될 수 도 있습니다.
참고하시고 작업하셔요..
티보리님의 댓글
감사합니다 새도우님 지금내용을 봤네요
티보리님의 댓글
순서 맨앞 전체 부분의 크기는 적용이 안되서 정렬이 안되고
보여지는건 똑같게 되네요
shadow님의 댓글
"티보리"님의 환경이 아니라서 답변이 올바르지 않을 것 같습니다만 다음과 같이 해보세요.
eyoom/theme/설치된 테마/css/custom.css에 아래 소스를 첨부하세요
.tab-cart .nav-tabs > li > a { padding-left: 0 !important; padding-right: 0 !important; width:100%; text-align: center;사용하시는 게시판 스킨 list.skin.html 을 여시고 <!--{* 게시판 목록 시작 *}--> 을 찾아 바로 윗쪽에 jQuery code 를 첨부해서 테스트 해보세요.
<script type="text/javascript"> // <![CDATA[ (function($) { $(document).ready( function() { $(".tab-cart .nav-tabs").each(function(index) { var tabs = $(this).children("li"); var width = 100/tabs.length; tabs.each(function(index) { $(this).css('width',width+"%"); }); }); }); })(jQuery); // ]]> </script>티보리님의 댓글
정말 고맙습니다. 하지만 잘 안되네요
그누보드에서 사용되는 소스 끌어다가 짜집기 하려고 해도
잘 몰라서 다시 원상복구 하고 있습니다.
감사합니다. 새도우님
shadow님의 댓글
bootstrap이 tab의 갯수가 많아지면 따로 정렬할 방법이 없는 것으로 알고 있습니다.
탭 안에 들어가는 문자수와 문자 크기에 따라 탭 자체 크기가 가변적으로 변하게 되구요.
도움이 못되어 드려서 죄송합니다..
티보리님의 댓글
감사합니다. 유용한 팁 잘 부탁드려요
티보리님의 댓글
tab-cart 적용시에는 계속 글자가 세로로 일렬로 나열 되어서
tab-e1 으로 적용할경우에는 기본style.css 에 내용이 있는거 같습니다.
거기에 그누보드에서 사용한 css 내용이 이것인거 같은데요
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_cate ul {margin-bottom:10px;padding-left:1px;zoom:1} #bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""} #bo_cate li {float:left;margin-bottom:-1px} #bo_cate a {display:block;position:relative;margin-left:-1px;padding:6px 0 5px;width:90px;border:1px solid #ddd;background:#f7f7f7;color:#888;text-align:center;letter-spacing:-0.1em;line-height:1.2em;cursor:pointer} #bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none} #bo_cate #bo_cate_on {z-index:2;border:1px solid #565e60;background:#fff;color:#565e60;font-weight:bold}이소스를 이윰 베이직에 맞게 변경해서 style.css에 넣으면 되지 않을까요?
tab-e1으로 사용하려면 custom.css 안쓰고 style.css 사용해도 되나요?
shadow님의 댓글
그누보드에서 사용한 css와 함께 list.skin.php을 요모조모 뜯어보시고 적용하시면 될 듯 합니다.
tab-e1은 이미 eyoom/theme/설치된 테마/css/common.css에 정의되어 있습니다.
그런 이유로 새로운 클래스를 만드시는게 좋을 듯 합니다.
"tab-custom" 이런식으로 말이지요.
새로운 클래스를 스킨 폴더에 있는 style.css에 정의하셔도 되지만 최대한 기본 내용은 고치지 않기 위해 eyoom/theme/설치된 테마/css/custom.css 를 활용하는게 좋지 않나 싶습니다.
티보리님의 댓글
짜집기는 하겠는데요 뜯어서 맞게 고치는거는 초보라서 힘드네요
신경써주셔서 감사합니다. 새도우님
축하합니다. 행운의 포인트 72포인트를 획득하였습니다.