Loading the content...

질문과 답변

  • Home
  • 이윰빌더
  • 질문과 답변

알림 게시물이 없습니다.
- 

새도우님 tab 을 활용중에 질문드려요

티보리 메일보내기 아이디로 검색 12
1,780 2015.05.07 23:30

짧은주소

본문

그누보드용 tab

 

새도우님용 tab

 

그누보드용 tab처럼 각잡아서 정렬하고 싶어요

어디를 고쳐야 될까요?

효과나 색상은 새도우님용 tab 그대로 쓰고 각만 잡아서 정렬했으면 좋겠습니다.

0
좋아요!
- 티보리 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 15 - 포인트 : 115,118
레벨 15
경험치 21,954

Progress Bar 32%

- 가입일 : 2015-02-27 15:26:36
- 서명 :
- 자기소개 :
댓글목록

shadow님의 댓글

shadow 메일보내기 아이디로 검색 2015.05.08 00:28

기존에 올렸던 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님의 댓글

shadow 메일보내기 아이디로 검색 2015.05.08 00:34

아 탭의 갯수에 맞게 수정하셔야 합니다. 

.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 메일보내기 아이디로 검색 2015.05.08 00:40

한가지 문제점이 탭 셀 자체를 퍼센트로 고정해야하는 문제로 인해 탭 메뉴의 글자수에 따라 세로로 표현될 수 도 있습니다.
참고하시고 작업하셔요..

티보리님의 댓글

티보리 메일보내기 아이디로 검색 2015.05.08 07:48

감사합니다 새도우님 지금내용을 봤네요

티보리님의 댓글

티보리 메일보내기 아이디로 검색 2015.05.08 09:18

순서 맨앞 전체 부분의 크기는 적용이 안되서 정렬이 안되고
보여지는건 똑같게 되네요

shadow님의 댓글

shadow 메일보내기 아이디로 검색 2015.05.08 13:36

"티보리"님의 환경이 아니라서 답변이 올바르지 않을 것 같습니다만 다음과 같이 해보세요.
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>

티보리님의 댓글

티보리 메일보내기 아이디로 검색 2015.05.08 15:37

정말 고맙습니다.  하지만 잘 안되네요 
그누보드에서 사용되는 소스 끌어다가 짜집기 하려고 해도
잘 몰라서 다시 원상복구 하고 있습니다.
감사합니다. 새도우님

shadow님의 댓글

shadow 메일보내기 아이디로 검색 2015.05.08 15:41

bootstrap이 tab의 갯수가 많아지면 따로 정렬할 방법이 없는 것으로 알고 있습니다.
탭 안에 들어가는 문자수와 문자 크기에 따라 탭 자체 크기가 가변적으로 변하게 되구요.

도움이 못되어 드려서 죄송합니다..

티보리님의 댓글

티보리 메일보내기 아이디로 검색 2015.05.08 15:43

감사합니다. 유용한 팁 잘 부탁드려요

티보리님의 댓글

티보리 메일보내기 아이디로 검색 2015.05.08 17:12

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님의 댓글

shadow 메일보내기 아이디로 검색 2015.05.09 15:15

그누보드에서 사용한 css와 함께 list.skin.php을 요모조모 뜯어보시고 적용하시면 될 듯 합니다.
tab-e1은 이미  eyoom/theme/설치된 테마/css/common.css에 정의되어 있습니다.
그런 이유로 새로운 클래스를 만드시는게 좋을 듯 합니다.
"tab-custom" 이런식으로 말이지요.
새로운 클래스를 스킨 폴더에 있는 style.css에 정의하셔도 되지만 최대한 기본 내용은 고치지 않기 위해 eyoom/theme/설치된 테마/css/custom.css 를 활용하는게 좋지 않나 싶습니다.

티보리님의 댓글

티보리 메일보내기 아이디로 검색 2015.05.09 17:55

짜집기는 하겠는데요 뜯어서 맞게 고치는거는 초보라서 힘드네요
신경써주셔서 감사합니다. 새도우님

축하합니다. 행운의 포인트 72포인트를 획득하였습니다.

Total 2,281건 1 페이지
게시판 이용안내

이윰빌더를 이용하시는 모든 회원님들이 서로 궁금한 부분을 질문 또는 답변을 하며 문제점을 서로 해소할 수 있는 공용 질답 게시판입니다.

질문 시 기본적인 예절을 지켜주세요.
  • 질문 시 바른말을 이용 해 주세요.
  • 질문자의 상황을 다른이가 예측하기 힘듭니다. 오류가 난 상황이나 환경등을 최대한 자세하게 알려주셔야만 원하시는 답을 얻을 확률이 높습니다.
  • 질문의 유형에 따라 틀릴 수 있지만 문제가 되는 해당 페이지 주소가 있으면 가장 근접한 해법이 나올 가능성이 큽니다.
  • 원하시는 답을 얻으시면 감사의 말씀을 전하는 센스를 발휘 해 주세요.
  • 질문 전 한번쯤 읽어볼만한 글 : http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=74
제목
댓글+2개 관리자 로그인 화면이 깨집니다.
이상민님 아이디로 검색 2017.07.28 3,072 0
댓글+4개 반응형 커뮤니티 테마 모바일 버전
플레이온 아이디로 검색 2017.07.25 932 0
댓글+1개 Template_ Compiler Error #35 오…
돌맹이 아이디로 검색 2017.07.24 2,032 0
댓글+2개 이미지 업로드 에러
Hubert 아이디로 검색 2017.07.21 1,449 0
댓글+2개 링크 미오픈
Hubert 아이디로 검색 2017.07.18 837 0
댓글+1개 게시판 상단 파일 수정 어디서 해야할까요?
종달 아이디로 검색 2017.07.16 789 0
댓글+2개 메인슬라이드 좌우 방향prev, next 수정방법
종달 아이디로 검색 2017.07.09 1,991 0
댓글+2개 계속 질문을 해서 죄송한데요
잘안되네요 아이디로 검색 2017.07.07 594 0
댓글+2개 메인화면 이미지 출력 문의 드립니다.
잘안되네요 아이디로 검색 2017.07.06 666 0
댓글+2개 뷰페이지에서 회원전화번호 출력하려면 어떻게 해야되요?
m3palma 아이디로 검색 2017.07.05 762 0
댓글+2개 게시판 목록에 댓글 표시 숫자 삭제 방법
드봉 아이디로 검색 2017.07.05 1,536 0
댓글+1개 템플릿언어에서 반복문과 파일인클루드에 관한 질문입니다.…
ㄷㅊㅎ 아이디로 검색 2017.07.04 679 0
댓글+1개 유챗2 연동문의드립니다.
플래닛 아이디로 검색 2017.07.01 1,231 0
댓글+2개 이윰빌더 설치후 어드민 페이지 오류
김기린님 아이디로 검색 2017.06.29 1,494 0
댓글+1개 모바일 전화걸기 링크문제
자유롭게 아이디로 검색 2017.06.29 1,495 0
회사명: 이윰 대표: 김규순, 양진근 서울시 양천구 목동서로 186, 성우네트빌 606 전화: 070-8876-4043 개인정보관리: 김규순 사업자번호: 109-16-47701 통신판매업: 제2015-서울강서-0097호 Email: eyoom@eyoom.net

PC버전 Copyright © 이윰넷. All Rights Reserved.