Disable the DIV border using CSS

I'm having trouble removing the border between the tab header and container when creating an HTML tab. Can someone provide some advice on how to solve this issue?

Thanks1

==============================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>

Don't forget to include JQuery library 1.7.

Answer №1

Adjust the position of all tabs by shifting them 1px downward, while increasing the z-index of the active tab and decreasing the z-index of inactive tabs

.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>

Answer №2

One way to fix the alignment issue caused by shifting tabs is to add bottom: -1px to the current tab and set its position to relative. This adjustment can help align the tabs properly in your design. Check out this helpful answer that demonstrates how to shift all tabs down by 1px and use z-index for managing inactive tabs ()

.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>

Answer №3

To achieve this effect, you can simply utilize the :after pseudo-element with just two minor updates:

ul.tabs li{
position: relative;
}

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

That's all there is to it. Make sure to adjust the height in :after to match the border thickness used at the bottom.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The integration of jQuery Masonry with margin-right for a seamless and

I have a row with two columns, where the first column has a right margin and the second one does not. I would like to use jQuery Masonry to eliminate any empty spaces. However, it seems that the margin right does not interact well with Masonry. Is there a ...

What is the best way to conceal components in a GUI immediately following the execution of the JavaFX container class?

One of the Java Projects involves creating a cash register using JavaFX. To view the GUI image, simply click here. The program presented in the GUI will prompt users to input the number of items purchased, the amount paid, and display the change due in a ...

Navigating dynamic URLs with various URI segments in cPanel

<a href="www.mysite.com/index.php?information/adminpanel/<?php echo $id;?>" name="approve" id="approve" ">Approve >></a> After redirecting to the specified URL, the correct ID is displayed in the address bar but unfortunately, ...

What is the most effective method for integrating Ajax file uploading?

Is it possible to incorporate an "ajax" file upload (is this concept commonly known by this name, or does it involve using an iframe for the file upload process?) specifically for uploading images within a form? For example, let's say a user wants to ...

Fancybox is showcasing all of the gallery images

I am encountering an issue with FancyBox 2 where, upon clicking the link to open the slideshow, all images are displayed at once. In some cases, it even adds a scroll bar. Please refer to the code snippet below: http://jsfiddle.net/Tx3AF/ Unfortunately, ...

Can I use both src and srcset together in an image tag when using picturefill?

For some time now, I've been utilizing the following code: <img src="lowresImage.jpg" srcset="lowresImage.jpg, highresImage.jpg 2x" alt="Lorem Ipsum"> With picturefill (), this setup works flawlessly without any compatibility issues across dif ...

Tips for creating stylish diagonal backgrounds using Bootstrap 5

Is there a way to achieve diagonal styled backgrounds, like the examples shown below, while using Bootstrap 5 and (s)css? It would be ideal if this could be seamlessly integrated with other Bootstrap background utilities as outlined in the documentation h ...

Unleash the power of jQuery to leverage two different input methods

Here is the code I'm working with: $('input[type="text"]').each(function(indx){ Right now, this code targets input elements with type "text". But how can I modify it to target both inputs with type "text" and "password"? Any suggestions o ...

Can local caching in ALL MAJOR browsers (Safari/Firefox/Opera/Chrome/IE) be achieved by an HTML5 web app that bypasses browser permissions?

Exploring the capabilities of the HTML5 offline application cache, I conducted boundary tests to observe how different browsers handle edge cases. Particularly, I focused on understanding the cache quota. To investigate further, I created and served an of ...

Starting up the Angular 2 Bootstrap Datepicker

For my Angular 2 application, I am using the Bootstrap datepicker plugin () but encountering some initialization issues. The code snippet below is currently working for initializing the datepicker in my component, however, it does not look very clean: ng ...

Discrepant functioning of window.location in Internet Explorer versus Chrome

I am encountering an interesting issue with a webpage that has 3 levels in its URL structure, such as example.com/1/2/3. The code snippet I am using is as follows: window.location.replace(""); When running this code in IE11, it navigates to example.com/1 ...

Bootstrap grid. Instead of moving to the next row, scroll horizontally when the content overflows

Here is the code snippet: <div class="row shochatgroup"> <div *ngFor="let message of messages" class="col-auto"> <button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.at ...

Expand the size of the bullets in unordered lists

What is the best way to customize UL list bullets to have a larger width without using custom images? ...

Error callback in jQuery is not triggered when using a cross-domain script

I am facing an issue with my code where I am trying to load the Leaflet library. Setting the crossDomain option to true prevents the error callback from being fired. However, when I set the option to false, the error callback is triggered, but the JavaScri ...

Close BS4 accordion when clicking outside the card-body

Is there a way to collapse or close an accordion in Bootstrap 4 when clicking outside the card-body? Previously in Bootstrap 3, this functionality was straightforward and functional as shown here. The accordion should not close when clicking inside the car ...

Combine several JSON strings into a single string

Looking to consolidate multiple JSON strings into a single string. I have received the following JSON string as a response from AJAX. How can I combine it into one? [ { "name1":"pizza", "count1":8 }, { "name2":"sandwich" ...

a guide on incorporating an input parameter into a form with the help of jQuery

$('form').submit(function(){ this.action="http://www.website.com/post"; return false; }); In the process of adjusting the action attribute of the form, I am considering adding an additional input parameter to it. ...

Problem with JSON parsing in jQuery on Internet Explorer 8

I am struggling to pinpoint where my mistake is in this code snippet: Javascript: $(document).ready(function(){ $.getJSON('ajax/data.json', function(data) { $.each(data.results, function(i,item){ alert ...

Get all the counter values from a Bootstrap table within a function

Suppose I have a table displaying 25 records per page with 10 rows. How can I update the counter values for Entries and Total Entries in my function when I filter by "india"? I already have the showing values but need to retrieve the Entries and Total Ent ...

Encountering difficulties retrieving information from an API using Angular

I am encountering an issue while trying to retrieve data from an API. When I use console.log() to view the data, it shows up in the console without any problem. However, when I attempt to display this data in a table, I keep receiving the error message: ER ...