CSS challenge: designing a tab interface

I am facing a CSS challenge that has got me stumped. I'm not even sure if it's achievable. Here is what I'm trying to achieve:

There are three buttons/tabs displayed like this . When a tab is clicked, a different div should be shown for each tab, similar to these examples: or .

I know how to use jQuery to show/hide the divs, but the issue arises when the divs increase in height as seen here: . This causes them to push the other tabs and divs down. Is there a workaround for this problem?

I'm not proficient in CSS, so if you have an example or code snippet to share with me, I would greatly appreciate it!

Here is the HTML markup I'm using for my tabs:

<div class="MainContent">Content</div>
<div class="TabsHolder">
    <div id="Tab1">
        <div style="width:200px">
            Content Tab 1
        </div>
    </div>
    <a class="Button1" href="#Tab1"></a>
    <div class="clearer"></div>
    <div id="Tab2">
        <div style="width:200px">
            Content Tab 2
        </div>
    </div>
    <a class="Button2" href="#Tab2"></a>
</div>

CSS:

.MainContent {
    float: left;
}

.TabsHolder 
{
    float: left;
}

.Button1
{
    float: left;
    margin: 100px 0px 20px 0px;
    background: url(images/Button1.png) no-repeat 0 0;
    height: 79px;
    width: 27px;
}

#Tab1
{
    width: 200px;
    margin: 80px 0px 20px 0px; 
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

.Button2
{
    float: left;
    margin: 0px 0px 20px 0px;
    background: url(images/Button2.png) no-repeat 0 0;
    height: 97px;
    width: 27px;
}

#Tab2
{
    width: 200px;
    margin: 0px 0px 20px 0px;
    border: solid 1px #ACCD45;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 20px;
}

div.clearer 
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px; 
height: 0px;
width: 0px;
overflow: hidden;
}

Answer №1

Utilizing only CSS, I have created a design that has been tested in Firefox, IE8, and Chrome (compatibility with other browsers may vary). Feel free to explore the demo here.

Note: I'd like to point out one thing regarding your original HTML - it's not possible to add a background image directly to an <a> tag.

CSS

.MainContent {
 float: left;
 width: 400px;
 height: 400px;
 background: #444;
}

.buttons {
 float: left;
 margin: 10px 0 10px 0;
 width: 27px;
 clear: both;
}

.Button1 {
 background: #555 url(images/Button1.png) no-repeat 0 0;
 height: 79px;
}

.Button2 {
 background: #555 url(images/Button2.png) no-repeat 0 0;
 height: 97px;
}

.Button3 {
 background: #555 url(images/Button3.png) no-repeat 0 0;
 height: 127px;
}

.tabsHolder {
 float: left;
 position: relative;
}

.tabs {
 width: 200px;
 height: 200px;
 margin: 0 0 20px 0;
 border: solid 1px #ACCD45;
 background: #444;
 overflow: hidden;
 padding: 20px;
 display: none;
 position: absolute;
 left: 0;
}

#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }

a:hover .tabs {display: block;}

HTML

<div class="MainContent">Content</div>
 <div class="tabsHolder">

  <a href="#tab1"><div class="buttons Button1">1</div>
   <div id="tab1" class="tabs">
    Content tab 1
   </div>
  </a>

  <a href="#tab2"><div class="buttons Button2">2</div>
   <div id="tab2" class="tabs">
    Content tab 2
   </div>
  </a>

  <a href="#tab3"><div class="buttons Button3">3</div>
   <div id="tab3" class="tabs">
    Content tab 3
   </div>
  </a>

 </div>
</div>

Answer №2

To effectively organize your content, it is important to separate the pages and tabs into two distinct divisions.

These divisions should be positioned next to each other using floating elements, resulting in a structure like this:

<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab"><a href="#tab1">Tab 1</a></div>
<div class="tab"><a href="#tab2">Tab 2</a></div>
</div>

You can then specify a minimum height for the pages (and an explicit height for IE6, if needed), set both the pages and tabs to float left, and assign fixed widths to both elements.

Lastly, when assigning the event handler to $('#tab a'), ensure that you loop through all the pages to hide any irrelevant ones.

Answer №3

When it comes to hiding divs without JavaScript, your options are limited to having a separate HTML page per tab, as shown in examples like this or this.

If you're looking for a more dynamic solution, incorporating JavaScript is the way to go. jQuery offers a tabs system that can be easily implemented (Homepage, live demo).

I hope this information proves helpful to you.

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

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

What could be causing the issue with object-fit not functioning properly within a container with a max

My goal is to insert a video into a container that has a width of 100% and automatically adjusts its height while maintaining the aspect ratio, but with a maximum height set. I want the video to completely fill the container even if some parts are cropped ...

utilizing javascript once form elements are dynamically inserted

While dynamically constructing form elements, I encountered an issue with generating unique IDs when the form is submitted. Everything works fine except for the JavaScript function responsible for populating the year in a dropdown selection. The issue ari ...

The app constantly requests permission for geolocation services

While experimenting with the geolocation API, I encountered an issue where my page kept repeatedly asking for permission upon refresh. To work around this problem, I attempted to save my coordinate data to local storage but encountered difficulties in ma ...

Choose an image and save the selection information for the following page (Tarot card)

I'm in the process of creating a website that showcases multiple tarot cards. The goal is for users to select the cards they're interested in and have their chosen card displayed on the next page. I've implemented some code for selecting the ...

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

I am looking to implement a unique grid image slider that accommodates images of varying heights and widths. I envision something similar to the example shown below. The image showcases a pattern where the sliders alternate between square images and two r ...

Create a regular expression that permits a sequence of numbers (either integer or decimal) arranged in groups of up to five, with each

Is it possible to create a regular expression that allows integers and decimals? var reg = /^((\s*)|([0-9]\d{0,9}(\.\d{1,3})?%?$))$/.; How can users input 0 to 5 groups of integers and decimals separated by |? Updated: This regex sh ...

Managing elements within another element in Angular

I am currently exploring the use of Component Based Architecture (CBA) within Angular. Here is the situation I am dealing with: I have implemented three components each with unique selectors. Now, in a 4th component, I am attempting to import these compon ...

Leverage object properties as data table field values in VueJS

In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...

Is there a way to design a table that is responsive and automatically converts to a list when viewed on a mobile device

I am trying to design a responsive table showcasing artists' names. The goal is to have it look similar to this example: After finding and customizing code for the table, I encountered an issue when the table collapses on mobile view. The invisible e ...

encountering issues while attempting to create personalized profile pages with dynamic content

I'm currently working on creating a dynamic profile page that can be accessed by everyone using the link www.example.com/user/$id. Currently, the profile pages are not public and cannot be viewed by other users. I attempted to add the following code ...

Pop-up message on card selection using JavaScript, CSS, and PHP

I have a total of 6 cards displayed in my HTML. Each card, when clicked, should trigger a modal window to pop up (with additional information corresponding to that specific card). After spending a day searching for a solution online, I've come here s ...

Utilizing JavaScript and its scope to include text within an HTML document

I am currently working on a program that receives input from the user twice, specifically a risk carrier and a sum (although it is just a placeholder for now), groups these two values together, and then repeats the contents in a loop. You can see the progr ...

Align Bootstrap 4 dropdowns with their parent element

Is there a way to match the width of a bootstrap dropdown menu with its parent input group? <div id="ddl_1" class="input-group"> <input type="text" class="form-control "> <div class="input ...

The Kendo Dropdownlist mysteriously disappears behind the PDFViewer when using Safari

Currently, I am immersed in a project based on the MVC framework and utilizing the Kendo DropDownList. An problem has arisen, which is visualized in the image below. Specifically, the items of the Kendo DropDownList are becoming obscured by the PDFViewer ...

Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Using a searchbox, you can enter words to find pages with the searched-for word in the page description. If the word is found in the description, a link to the page along with the highlighted word will be displayed. However, I am encountering an issue wher ...

Make the div stretch across the entire width of the page, excluding the width of a fixed div located on the right side, without needing to set a margin-right property

I've been struggling to find a solution for my wiki development project. My challenge involves designing a page layout with a fixed-width sidebar on the right, while ensuring that content to the left of the sidebar adjusts its width accordingly. I wan ...

The ability to rate the product in Livewire:Laravel is exclusively reserved for buyers

I have integrated the Livewire rating system into my Laravel e-commerce platform. Currently, all users can rate and comment on any product. However, I want to restrict this privilege to only buyers. ProductRatings.php class ProductRatings extends Componen ...

What is the best way to place a transparent navbar on top of a hero image while also adding a functional button to the hero image?

My navigation bar is set to be transparent on top of my hero image, but the buttons on the hero image are not clickable. The nav-bar has a z-index of 1, while my hero image, text, and button have a z-index of -1. This setup causes the button to be unclick ...