CODEWITHSUNDEEP
jqueryhtmlcss
ieQsan
ieQsan

Reputation: 133

Remive DIV border in CSS

I am creating html tab and I very difficult to remove border between tab header and container. Please give me some advice.

Thanks![enter image description here]1

==============================This is CSS====================================

.container{
            width: 100%;
            margin: 0 auto;
        }

        ul.tabs{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul.tabs li{
            background: none;
            color: #222;
            display: inline-block;
            padding: 10px 15px;
            cursor: pointer;
        }

        .tab-content{
            display: none;
            background: #f2f2f2;
            border-left: thin solid black;
            border-top: thin solid black;
            border-right: thin solid black;
            border-bottom: thin solid black;
            padding: 15px;
        }

        ul.tabs li.current{         
            background: #f2f2f2;
            border-left: thin solid black;
            border-top: thin solid black;
            border-right: thin solid black;
            color: #222;
        }

        .tab-content.current{
            display: inherit;
        }

========================This is HTML===============================

<div class="container">
        <ul class="tabs">
                <li class="tab-link current" data-tab="tab-1">Tab1</li>
                <li class="tab-link" data-tab="tab-2">Tab2</li>
                <li class="tab-link" data-tab="tab-3">Tab3</li>
        </ul>
    <div id="tab-1" class="tab-content current">
                            Tab 1
    </div>
    <div id="tab-2" class="tab-content">
                                Tab 2
    </div>
    <div id="tab-3" class="tab-content">
        Tab 3
    </div>
 </div>

And also use JQuery library 1.7.

Upvotes: 0

Views: 71

Answers (3)

Mukesh Kumar
Mukesh Kumar

Reputation: 65

Simply use :after for it . just small 2 updates

ul.tabs li{
position: relative;
}

ul.tabs li.current:after{
content: "";
position: absolute;
background: #f2f2f2;
bottom:-1px;
width:100%;
height:1px; 
}

that's it. use height in :after as much border you used at bottom

Upvotes: 1

Ken
Ken

Reputation: 795

Just add bottom: -1px to current tab (& set position relative). Since the tabs have shifted, there could be an alignment issue visible (depending on your css). See this answer that shifts all tabs down by 1px & uses z-index for hiding inactive tabs behind (https://stackoverflow.com/a/37851119/6463237)

.container{
            width: 100%;
            margin: 0 auto;
        }

        ul.tabs{
            margin: 0px;
            padding: 0px;
            list-style: none;

            position: relative; 
            bottom: -1px;
        }
        ul.tabs li{
            background: none;
            color: #222;
            display: inline-block;
            padding: 10px 15px;
            cursor: pointer;
        }

        .tab-content{
            display: none;
            background: #f2f2f2;
            border-left: thin solid black;
            border-top: thin solid black;
            border-right: thin solid black;
            border-bottom: thin solid black;
            padding: 15px;
        }

        ul.tabs li.current{         
            background: #f2f2f2;
            border-left: thin solid black;
            border-top: thin solid black;
            border-right: thin solid black;
            color: #222;
        }

        .tab-content.current{
            display: inherit;
        }
<div class="container">
        <ul class="tabs">
                <li class="tab-link current" data-tab="tab-1">Tab1</li>
                <li class="tab-link" data-tab="tab-2">Tab2</li>
                <li class="tab-link" data-tab="tab-3">Tab3</li>
        </ul>
    <div id="tab-1" class="tab-content current">
                            Tab 1
    </div>
    <div id="tab-2" class="tab-content">
                                Tab 2
    </div>
    <div id="tab-3" class="tab-content">
        Tab 3
    </div>
 </div>

Upvotes: 1

Ken
Ken

Reputation: 795

Shift all tabs by 1px down, & increase the z-index of active tab, lower the z-index of inactive tab

.tab {
  display: inline-block;
  background-color: #aaa;
  border: 1px solid #444;
  border-bottom: none;
  
  position: relative;
  bottom:-1px;
  z-index: 1;
}

.tab-body {
  position: relative;
  height: 100px;
  width: 200px;
  background-color: #aaa;
  border: 1px solid #444;
  z-index: 2;
}

.tab.active {
  z-index: 3;
}
<div class="tab tab1">Tab1</div>
<div class="tab tab2 active">Tab2</div>
<div class="tab tab3">Tab3</div>

<div class="tab-body">
Tab content
</div>

Upvotes: 2

Related Questions