새도우님 카테고리 tab 질문 드립니다.
1,329
2015.05.11 18:22
첨부파일
-
- 첨부파일: category.jpg (53.5K)0 2015-05-11 18:22:40
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=12a 주소복사
본문
/*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: #e33334;
}
.tab-Cart .nav-tabs > li {
float: none;
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;
display:inline-block;margin:0 8px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none
width: 7.5%;
}
.tab-Cart .nav-tabs > li > a {
border: none;
text-align: center;
}
.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;
}
display부분을 수정해서 저렇게까지 보이게 했는데요
마우스로 카테고리 클릭할때 카테고리 tab 선택 전체부분 색이 선택이 안됩니다.
마우스로 닿아지는 부분이 네모안에 색상이 꽉차지가 않아요
어디를 수정해야 될까요?
요만큼 색상 선택이 덜됩니다.
2
레벨 15
경험치 21,954
Progress Bar 32%
- 가입일 : 2015-02-27 15:26:36
- 서명 :
- 자기소개 :
Total 2,281건 21 페이지
게시판 이용안내
이윰빌더를 이용하시는 모든 회원님들이 서로 궁금한 부분을 질문 또는 답변을 하며 문제점을 서로 해소할 수 있는 공용 질답 게시판입니다.
질문 시 기본적인 예절을 지켜주세요.
- 질문 시 바른말을 이용 해 주세요.
- 질문자의 상황을 다른이가 예측하기 힘듭니다. 오류가 난 상황이나 환경등을 최대한 자세하게 알려주셔야만 원하시는 답을 얻을 확률이 높습니다.
- 질문의 유형에 따라 틀릴 수 있지만 문제가 되는 해당 페이지 주소가 있으면 가장 근접한 해법이 나올 가능성이 큽니다.
- 원하시는 답을 얻으시면 감사의 말씀을 전하는 센스를 발휘 해 주세요.
- 질문 전 한번쯤 읽어볼만한 글 : http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=74
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 |
|---|---|---|---|---|
| 1,881 |
홍인
|
2015.03.08 | 1,236 | |
| 1,880 |
shadow
|
2015.07.09 | 1,235 | |
| 1,879 |
총사달타냥
|
2015.07.20 | 1,235 | |
| 1,878 |
super
|
2015.08.11 | 1,234 | |
| 1,877 |
개나소나
|
2015.02.16 | 1,233 | |
| 1,876 |
이진원
|
2015.03.24 | 1,227 | |
| 1,875 |
봄라피
|
2015.06.11 | 1,227 | |
| 1,874 |
플래닛
|
2017.07.01 | 1,227 | |
| 1,873 |
CHOICHA
|
2016.05.11 | 1,226 | |
| 1,872 |
부자생각
|
2015.02.23 | 1,225 | |
| 1,871 |
oppa
|
2015.04.07 | 1,225 | |
| 1,870 |
불꽃게이
|
2015.05.21 | 1,225 | |
| 1,869 |
red123
|
2015.09.04 | 1,225 | |
| 1,868 |
레아엘
|
2015.03.18 | 1,222 | |
| 1,867 |
큐브
|
2015.02.03 | 1,221 | |
| 1,866 |
서종득
|
2015.06.24 | 1,220 | |
| 1,865 |
웹폼
|
2015.07.23 | 1,220 | |
| 1,864 |
신비
|
2015.03.30 | 1,218 | |
| 1,863 |
칠성
|
2015.08.04 | 1,218 | |
| 1,862 |
보리보리
|
2015.02.12 | 1,217 |
댓글목록
티보리님의 댓글
색상이 없는 저부분이 더 늘어나게 보이는거 같습니다.
shadow님의 댓글
이렇게 해보세요.
.tab-Cart .nav-tabs > li > a { border: none; text-align: center; } .tab-Cart .nav-tabs > li > a:hover { color: #fff; background: #e33334; }위 소스 부분에 각각 width:90px; 을 넣어보면 될 것 같습니다.
올려주신 카테고리 분류 부분을 참조했습니다.^^;
수정 후
border: none; text-align: center; width: 90px; } .tab-Cart .nav-tabs > li > a:hover { color: #fff; background: #e33334; width: 90px; }그런데 픽셀을 지정하게 되면 모바일에서 엉뚱한 결과를 야기할 듯 하네요.
티보리님의 댓글
결과물이 이제야 나왔습니다. 감사합니다. 새도우님
위드값 90픽셀 넣으니까 조금 삐져나와서 88픽셀로 맞추니 딱 맞네요
모바일에서도 잘 나옵니다.
shadow님의 댓글
근데 올리신 소스가 맞는지 확인 좀 해주세요.
테스트를 위해 해보려하니 아래 소스가 적용 안되는 듯 합니다.
.tab-Cart .nav-tabs > li { float: none; 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; display:inline-block;margin:0 8px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none width: 7.5%; }티보리님의 댓글
그누보드에서 사용되어진 소스 display 부분 값이 있길래 그냥 붙여넣었더니 되더라구요
display 값이 두군데 있는거 둘다 붙였습니다.
그누보드 skin/borad/basic/style.css
카테고리소스부분1
cate
#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}카테고리소스부분2
cate
.bo_cate_link {display:inline-block;margin:0 3px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none} /* 글제목줄 분류스타일 */shadow님의 댓글
"티보리"님이 생각해내시고 적용하신 소스이니
"tip" 게시판에 다른 이윰넷 회원님들을 위해 올려주시면 감사하겠습니다.
저 또한 미리 감사...