마지막 탭 선을 없애고 싶은데 어떻게 해야할까요? 채택완료
원래는 아래와 같이 우측에 탭이 4개 입니다.
http://wixfree.kr/bic/consult/counsult_hoju_02_01_01.htm">http://wixfree.kr/bic/consult/counsult_hoju_02_01_01.htm
그런데, 아래 경우는 탭 메뉴 3개를 만들었는데요. 마지막 탭메뉴는 필요없어서 관련 탭메뉴 li 메뉴에서 없애긴햇는데 선이 남네요.
마지막 탭메뉴 선 없애볼려고 first-child . after 명령도 생각해봤지만 쓰면 안될것 같은데.,
답답한 마음으로 어찌할지 몰라 문의글 남겨봅니다.
고수분님들 알려주세요.ㅡㅡ;
http://wixfree.kr/bic/consult/counsult_hoju_02_02_01.htm">http://wixfree.kr/bic/consult/counsult_hoju_02_02_01.htm
답변 5개
</span> </p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <meta charset="UTF-8" /></p><p> <title>submenu</title></p><p> <style type="text/css"></p><p> .landscape { list-style-type: none; }</p><p> .landscape li { float: left; border: 1px solid #000; border-right: none; }</p><p> .landscape li:last-child { border-right: 1px solid #000; }</p><p> .landscape:after { content: ""; display: block; clear: left; }</p><p> .landscape li a {</p><p> display: inline-block;</p><p> width: 10.0em;</p><p> padding: 0.5em 0;</p><p> text-align: center;</p><p> text-decoration: none;</p><p> }</p><p> .landscape li a:hover { background-color: #1d95d4; }</p><p> </style></p><p> </head></p><p> <body></p><p>
</p><p> <ul class="landscape"></p><p> <li><a href="#">123</a></li></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">1234567</a></li></p><p> </ul></p><p>
</p><p> <ul class="landscape"></p><p> <li><a href="#">123</a></li></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">1234567</a></li></p><p> <li><a href="#">123</a></li></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">1234567</a></li></p><p> </ul></p><p>
</p><p> <ul class="landscape"></p><p> <li><a href="#">1</a></li></p><p> </ul></p><p>
</p><p> </body></p><p></html></p><p>
답변에 대한 댓글 4개
마우스 오버시 배경색 #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>
전체가 다 파란색으로 나오는 것이구요
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"] 를 갖도록 만들어 주셔야 합니다.
댓글을 작성하려면 로그인이 필요합니다.
원래 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"> 로 바꾸시면 다른페이지에서도 문제없겠지요
댓글을 작성하려면 로그인이 필요합니다.
제가 해보니 전체 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 로 하면 되지 않을런지?
답변에 대한 댓글 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 로 하면 되지 않을런지?
댓글을 작성하려면 로그인이 필요합니다.
음 확인을 해보니
- list-style: none;
- float: left;
- width: 25%;
- box-sizing: border-box;
- text-align: center;
답변에 대한 댓글 5개
25%로 유지하면서 마지막 선없앨수있으면 좋겠는데 방법이 없을까요?
여기서 사용하는 부분에서 li 에 강제로 style="width:33%;" 와 같은 방식으로 임의로 지정하시는 방법도 있을것 같습니다.
<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%는 구분이 힘듭니다..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인