새도우님 카테고리 tab 질문 드립니다.
1,331
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 선택 전체부분 색이 선택이 안됩니다.
마우스로 닿아지는 부분이 네모안에 색상이 꽉차지가 않아요
어디를 수정해야 될까요?
요만큼 색상 선택이 덜됩니다.
0
좋아요!
레벨 15
경험치 21,954
Progress Bar 32%
- 가입일 : 2015-02-27 15:26:36
- 서명 :
- 자기소개 :
댓글목록
티보리님의 댓글
색상이 없는 저부분이 더 늘어나게 보이는거 같습니다.
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" 게시판에 다른 이윰넷 회원님들을 위해 올려주시면 감사하겠습니다.
저 또한 미리 감사...