마지막 탭 선을 없애고 싶은데 어떻게 해야할까요?
본문
원래는 아래와 같이 우측에 탭이 4개 입니다.
http://wixfree.kr/bic/consult/counsult_hoju_02_01_01.htm
그런데, 아래 경우는 탭 메뉴 3개를 만들었는데요. 마지막 탭메뉴는 필요없어서 관련 탭메뉴 li 메뉴에서 없애긴햇는데 선이 남네요.
마지막 탭메뉴 선 없애볼려고 first-child . after 명령도 생각해봤지만 쓰면 안될것 같은데.,
답답한 마음으로 어찌할지 몰라 문의글 남겨봅니다.
고수분님들 알려주세요.ㅡㅡ;
답변 5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>submenu</title>
<style type="text/css">
.landscape { list-style-type: none; }
.landscape li { float: left; border: 1px solid #000; border-right: none; }
.landscape li:last-child { border-right: 1px solid #000; }
.landscape:after { content: ""; display: block; clear: left; }
.landscape li a {
display: inline-block;
width: 10.0em;
padding: 0.5em 0;
text-align: center;
text-decoration: none;
}
.landscape li a:hover { background-color: #1d95d4; }
</style>
</head>
<body>
<ul class="landscape">
<li><a href="#">123</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1234567</a></li>
</ul>
<ul class="landscape">
<li><a href="#">123</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1234567</a></li>
<li><a href="#">123</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1234567</a></li>
</ul>
<ul class="landscape">
<li><a href="#">1</a></li>
</ul>
</body>
</html>
제가 쓰는 탭소스보다 좋긴하네요..감사합니다. 근데 선택된 탭은 알려드린 탭 주소처럼 가만히 있는것으로 혹시 바꿔주시면 안될까요?^^; 제이쿼리에 대해서는 무지해서요.ㅜㅜ;;
선택된 탭에 대해서 처리해놓은 부분이 없습니다.
마우스 오버시 배경색 #1d95d4 으로 하는 부분밖에 없습니다.
제이쿼리 또한 사용된 부분이 없습니다.
---------------------------------------------------------------------------------
아하 무슨말씀인지 알았습니다.
.landscape li a:hover { background-color: #1d95d4; } 를
.landscape li a:hover, .landscape li a.select { background-color: #1d95d4; } 로 해주면 될것 같네요.
그리고 선택된 탭에 대해선 class="select" 가 추가 되면 되겠네요.
<li><a href="#" class="select">1</a></li>
흠..근데 알려주신것 대로 다시 하니.. 롤오버가 아닌 표 전체가 파란색 입니다.ㅡㅡ;;;
제가 님 소스 알려준 그대로해서 수정한 것인데 맞나요?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>submenu</title>
<style type="text/css">
.landscape { list-style-type: none; }
.landscape li { float: left; border: 1px solid #000; border-right: none; }
.landscape li:last-child { border-right: 1px solid #000; }
.landscape:after { content: ""; display: block; clear: left; }
.landscape li a {
display: inline-block;
width: 10.0em;
padding: 0.5em 0;
text-align: center;
text-decoration: none;
}
.landscape li a:hover, .landscape li a.select { background-color: #1d95d4; }
</style>
</head>
<body>
<ul class="landscape">
<li><a href="#"class="select">123</a></li>
<li><a href="#"class="select">1</a></li>
<li><a href="#"class="select">1234567</a></li>
</ul>
<ul class="landscape">
<li><a href="#" class="select">123</a></li>
<li><a href="#" class="select">1</a></li>
<li><a href="#" class="select">1234567</a></li>
<li><a href="#" class="select">123</a></li>
<li><a href="#" class="select">1</a></li>
<li><a href="#" class="select" >1234567</a></li>
</ul>
<ul class="landscape">
<li><a href="#"class="select">1</a></li>
</ul>
</body>
</html>
전체를 다 [ class="select"] 추가해 주니
전체가 다 파란색으로 나오는 것이구요
1 페이지
<li><a href="#" class="select">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
2 페이지
<li><a href="#">1</a></li>
<li><a href="#" class="select">2</a></li>
<li><a href="#">3</a></li>
3 페이지
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#" class="select">3</a></li>
이런식으로 페이지 별로 해당 링크 위치에 [ class="select"] 를 갖도록 만들어 주셔야 합니다.
음 확인을 해보니
- list-style: none;
- float: left;
- width: 25%;
- box-sizing: border-box;
- text-align: center;
해당 탭소스를 2개로 분류해야할까요? 현재 코딩된 탭관련 css를 조정해버리면 다른 페이지들도 바뀌어 밀릴 것 같네요..
25%로 유지하면서 마지막 선없앨수있으면 좋겠는데 방법이 없을까요?
http://wixfree.kr/bic/consult/counsult_hoju_02_02_01.htm
여기서 사용하는 부분에서 li 에 강제로 style="width:33%;" 와 같은 방식으로 임의로 지정하시는 방법도 있을것 같습니다.
제가 사용하는 PC에 있는 counsult_hoju_02_02_01.htm 페이지에 있는 것처럼 <li style="width:33.3%;" > 이렇게 줬는데 확인하니 이번에는 우측에 선이 약간 남네요.. .33.4%로 하면 칸이 밑으로 내려가네요.;;;25%로는 유지하면서 3칸은 안되나봐요?
알겠습니다. 근데 누구를 택해야할지 모르겠네요.ㅡㅡ;;
어차피 해당 부분이 pc에서만 비율대로 보여야 할 부분이라면 %가 아니라 px로 나누어도 될겁니다.
<li style="width:200px;">일밭투자이민소개</li>
<li style="width:200px;">자격요건</li>
<li style="width:200px;">진행절차</li>
%라는게 가로 전체를 100%로 볼때 25%로 당연히 75% 비율밖에 안되니 한칸이 비게 되잖아요~
그럼으로 퍼센트로 하려면 33.3 이나 하면 될겁니다.
<li style="width:33.3%;">일밭투자이민소개</li>
<li style="width:33.3%;">자격요건</li>
<li style="width:33.2%;">진행절차</li>
머 이런식으로 해버리세요~
눈으로는 0.1 0.2%는 구분이 힘듭니다..
꼭 width를 % 로 조정하셔야 하나요?
그냥 사이즈를 지정하시면 될텐데
#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox { position:relative; width:905px; margin:10px auto 0; }
width:905px <- 4개 기준으로 필요했던 사이즈라면 3개 기준으로 width:690px 정도로 바꾸고..#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox .tab li { list-style:none; float:left; width:25%; border-right:1px solid #313131; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center; }
width:25% <- 비율로는 무조건 100% 기준인거니 , width:230px 로 하면 되지 않을런지?
제가 해보니 전체 690px 로 잡고 각각탭li 를 230px 로 잡으면 틀어지네요.
전체사이즈를 691px 로 잡고 탭 li 를 230px 로 잡으면 괜찮습니다.
#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox { position:relative; width:905px; margin:10px auto 0; }
width:905px <- 4개 기준으로 필요했던 사이즈라면 3개 기준으로 width:691px 정도로 바꾸고..#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox .tab li { list-style:none; float:left; width:25%; border-right:1px solid #313131; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center; }
width:25% <- 비율로는 무조건 100% 기준인거니 , width:230px 로 하면 되지 않을런지? 그렇군요..감사합니다. . 근데 누구를 택해야할지 모르겠네요.ㅡㅡ;;
네..근데 님처럼 하게되면 905 픽셀로 css 코딩한것을 복사해서 따로 붙여넣긴한 후 작업해야하지 않을까요? 1개는 905픽셀 탭용, 또 1개는 690픽셀 탭용으로요..현재 905픽셀을 690 해버리면 다른 페이지에 있는 4개짜리가 변경될것 같네요;;
원래 css 인 아래 내용은 유지하고,
#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox { position:relative; width:905px; margin:10px auto 0; }
#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox .tab li { list-style:none; float:left; width:25%; border-right:1px solid #313131; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center; }
요 아래 내용을 추가하고,
#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox_new { position:relative; width:691px; margin:10px auto 0; }
#container .container_cnt_area .area .contens_box .right_cnt .subcontens .tabox_new .tab li { list-style:none; float:left; width:230px; border-right:1px solid #313131; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center; }해당 페이지에서 <div class="tabox"> 를 <div class="tabox_new"> 로 바꾸시면 다른페이지에서도 문제없겠지요
