CSS2만으로 탭 만들기

-1

탭 안의 텍스트의 글꼴 크기와 상관없이 CSS2 만 사용하여 선택한 탭 아래에 선이 없도록 탭 인터페이스를 만들려고합니다. 아래쪽 테두리를 추가했지만 선택한 탭 아래쪽 테두리를 제거하는 방법을 모르겠습니다. 음수 여백을 입력하면 하단 테두리와 탭 사이에 공백이 추가됩니다. 하단 테두리 CSS 기능을 사용하는 대신 이미지를 사용하여 하단 테두리를 만들 수 있습니다. 그러나 나는 이것을 피하려고 노력하고있다. 어떤 아이디어?CSS2만으로 탭 만들기

http://jsfiddle.net/yet5uehy/

HTML :

<body> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#1"><span>Tab1</span></a></li> 
      <li id="selected"><a href="#2"><span>Tab2</span></a></li> 
      <li><a href="#3"><span>Tab3</span></a></li> 
     </ul> 
    </div> 
</body>

CSS :

body { 
    /* Centers and adjusts length of the line that is 
    separating the tabs from the rest of the page */ 
    margin-left: auto; 
    margin-right: auto; 
    width: 98%; 

} 

#tabs { 
    float: left; 
    width:100%; 
    font: 12px Arial; 

    /* Adds line separating tabs from rest of page */ 
    border-bottom-style: solid; 
    border-bottom-color: #cccccc; 
    border-bottom-width: 1px; 
} 

#tabs ul { 
    list-style: none; 
    margin: 0; 

    /* Adds padding on sides of the entire tabbed bar */ 
    padding:5px 5px; 
} 

#tabs ul li { 
    float:left; 

    background-image: url('righttab.jpg'); 
    background-repeat: no-repeat; 
    background-position: right top; 

    /* Adds space between each tab */ 
    margin:0px 3px; 
    padding:0; 
} 

#tabs ul li a { 
    display: block; 
    float:left; 
    text-decoration: none; 
    color: #000000; 

    background-image: url('lefttab.jpg'); 
    background-repeat: no-repeat; 
    background-position: left top; 

    /* Adds padding on sides of hyperlink area 
    to reveal curved edges of tab */ 
    padding:0px 3px; 
    margin:0px; 
} 

#tabs ul li a span { 
    float: left; 

    background-image: url('midtab.jpg'); 
    background-repeat: repeat-x; 
    background-position: center top; 

    /* Adds padding between the tab text 
     and the edges of the tab */ 
    padding:3px 5px; 
    margin:0px; 
} 


/* Formatting for selected tab */ 
#tabs li#selected { 
    background-image: url('right-selected.jpg'); 
    background-repeat: no-repeat; 
    background-position: right top; 
} 

#tabs li#selected a { 
    display:block; 
    font-weight: bold; 

    background-image: url('left-selected.jpg'); 
    background-repeat: no-repeat; 
    background-position: left top; 
} 

#tabs li#selected a span { 
    background-image: url('mid-selected.jpg'); 
    background-repeat: repeat-x; 
    background-position: center top; 

}

출처

2015-01-05 scryingwell

네거티브 하단 여백과 하단 동일 테두리를 결합 할 수 있습니다. 색상을 선택한 탭 이미지의 아래쪽 픽셀로 표시하지만 이미지 모양에 따라 다릅니다. 테두리를 제거하려면 탭 배경이 페이지 배경과 섞여 있다고 가정합니다. – BoltClock

처음에는 정확히 이해하지 못했습니다. –

이 중 하나에 대한 여러 가지 해결책이 있습니다.이 http://jsfiddle.net/6dhdcLm1/1/ –

당신이 이동 : http://jsfiddle.net/th8bucda/

내가 선택한 항목에 대한 CSS의 최종 수정 :

#tabs li#selected a { 
    display:block; 
    font-weight: bold; 

    background-image: url('http://s10.postimg.org/kberhjcr9/left_selected.gif'); 
    background-repeat: no-repeat; 
    background-position: left top; 

    **border-bottom-style: solid; 
    border-bottom-color: #fff; 
    border-bottom-width: 5px; 
    margin-bottom:-5px;**

을

출처

2015-01-06 06:45:41

1 px를 사용할 수 있습니다. 테스트하기 쉽도록 5 픽셀을 넣었습니다. –

정말 고마워요 !! – scryingwell

-1

은 내가 올바른 방향으로 당신을 도울 수 어떻게 됐을까와 바이올린을 만들었습니다. 나는 당신의 심상이 어떻게 보는지 아무 단서도 없기 때문에,이 바이올린은 없이 심상이다.

유일한 수정 CSS는 다음과 같습니다

#tabs li#selected { 
    background-image: url('right-selected.jpg'); 
    background-repeat: no-repeat; 
    background-position: right top; 
    /* added: */ 
    background-color: #ffffff; 
    height:21px; // one pixel more then original tab 
    position: relative; 
    margin-top:-1px; 
    top:1px; // position tab over bottom border 
}

참조 바이올린 : 여기 http://jsfiddle.net/hf5th1wz/

출처

2015-01-05 10:19:57

CSS2만으로 탭 만들기

답변

관련 문제