What is the best way to modify the color of the active tab I have chosen?

I've designed a tab menu using Divs and CSS, but I'm facing an issue with changing the color of the selected tab. I tried adjusting the background color of the .tab class, but it seems to only work for part of the tab... You can view the problem here:

Can anyone explain why this is happening? Here's the code snippet:

Features.html

<div class="tabcontent">
<div class="left_lane float">
<div class="tab blu" id="t1">INTERIORS</div><br>
<div class="tab" id="t2">BATHROOMS</div><br>
<div class="tab" id="t3">KITCHEN</div><br>
<div class="tab" id="t4">EXTRAS</div><br>
</div>

.CSS

.tabcontent {
  position: absolute;
  padding-top:35px;
  padding-left:485px;
  width: 600px; !important /*HOLD TABS AND CONTENT*/
  z-index:205;
  height:300px;

}
.left_lane {
  border-right: 2px #ffffff solid; 
  padding-right: 0px;
  width:100px;
  font-family: Trebuchet MS;
  color:#ffffff;
  background-color:#6cc7df;
  height:176px;
  font-size:14px;

}
.right {

  background-color:#0ba8cb;
  width:410;
  height:500;
}
.float {
  float: left;
  padding-left:0px;
padding-top:10px;
}

.tab { 
  height:20px;
  padding-left:8px;
  border-bottom: 2px #FFF solid;

}

.tab #active {

}



.cnt {
  display: none;
  font-family: Trebuchet MS;
  font-size:14px;
  color:#ffffff;
  padding-left: 10px;
  padding-right:10px;
}
#c1 {
  display: block;

}
.clear {
  clear: left;
}
.blu {
  color: #ffffff;
  background-color:#0ba8cb;


} 

Answer №1

The tabs divs have a height of only 20px, causing the darker blue to fill up that space. The lighter blue color seems to be originating from a different element positioned behind it, which becomes visible when the front div changes color. This could be due to padding or margin settings affecting the elements.

One example is the container element's padding impacting the positioning of the first tab by pushing it down with its padding-top value.

I recommend using Chrome devtools or FireFox/IE devtools to inspect your html elements and analyze the styles affecting them, as well as their box dimensions. This will make debugging these issues much more efficient.

Answer №2

Experiment with CSS properties such as:

padding-bottom
margin-left

to style the accordion and right_panel elements.

I achieved somewhat acceptable outcomes, but I prefer avoiding fixed pixel measurements. That decision is now in your hands.

Answer №3

To make the "li" active, apply the "active" class as shown below. Additionally, include a simple CSS for styling.

HTML code

<ul>
  <li><a href="http://sunporchhomes.com">HOME</a></li>
  <li class="active"><a href="/features-3" id="current">FEATURES</a></li>
  <li><a href="/floor-plan-2">FLOORPLAN</a> </li>
  <li><a href="/neighbourhood-3">NEIGHBOURHOOD</a></li>
  <li><a href="/warranty">WARRANTY</a></li>
  <li><a href="/faq-2">ROWHOME FAQ</a> </li>
  <li><a href="/about">ABOUT US</a></li>

CSS code,

ul li.active { bacground: #ff0000; }

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

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

Load media upon the click of an image

I'm currently in the process of designing a team page for our website. Each team member's photo is displayed in a grid layout, with two boxes positioned below containing various content. Box 1: This box consists of basic text information. Box 2: ...

When the *ngFor directive disrupts the CSS Grid Layout, resulting in all items being displayed in a single column

I am a beginner in the world of programming and web development. Currently, I am working on building my own personal website. My goal is to arrange boxes in a grid with 4 columns, similar to the layout you can find at this link: Each box represents an ob ...

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

I need assistance setting up a Facebook page feed using Angular.js. I want to display the posts in a list of cards and include a fullscreen image gallery. Is

Hey there! I'm in the process of developing an app that pulls Facebook page posts and showcases them with custom CSS. The app is functioning smoothly with two controllers, DashCtrl and MainCtrl, each working fine on its own. However, when trying to tr ...

The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownBasic1" n ...

uncovering the precise text match with the help of Beautifulsoup

I am looking to retrieve the precise matching value of text from HTML using Beautiful Soup. However, I am encountering some similar text along with my desired exact match. Here is my code: from bs4 import BeautifulSoup import urllib2enter code here url="h ...

Can basic logic be applied to CSS?

Recently, I have been experimenting with CSS to blur NSFW images in a chatroom until they are hovered over. I have successfully accomplished this task and now my next goal is to implement checkboxes that can toggle the display of these images. I am aware o ...

Ways to repair an element

Can anyone help me troubleshoot the issue with my count text on a div block? It seems to be affected by changes in screen size. Normal https://i.stack.imgur.com/RZkgr.png On screen resize https://i.stack.imgur.com/hTdCG.png The Code: span.right-cor ...

Eliminate list items with a keyboard stroke

I am currently developing a straightforward todo list application using JavaScript. The main functionality I am trying to implement is the ability to add new items from an input field to a list, as well as the option to remove items from the list. While ...

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

Sending a tailored query string through a form

Currently, when I submit a form, it directs me to the URL www.domain.com/search/?maxprice=10000000. However, I want it to redirect me to a custom URL such as www.domain.com/search/maxprice_10000000/ I came across some JavaScript code that was supposed to ...

Exploring the power of colors in Tailwind CSS and Material UI for your CSS/SCSS styling

Discovering unique color palettes like the Tailwind Color for Tailwind CSS and theMaterial UI colors has been inspiring. These collections offer a range of beautifully named colors from 100 to 900 and A100 to A400, reminiscent of font styles. I am intrig ...

Incorporating JavaScript to dynamically load an HTML page into an iframe

I am attempting to have each option load a unique page within a frame <!DOCTYPE html> <html> <head> <script> function selectCountry() { var mylist=document.getElementById("country"); document.getElementById("frame").src=mylist.opti ...

A quick and easy way to locate the object tag along with the param, and insert the embed tag within an HTML document is

Struggling with understanding the simple HTML DOM of PHP? You're not alone. As a newcomer to the programming industry, following instructions can be challenging. I've been searching for how to locate the object tag and embed, but haven't fou ...

Guide on deleting files from WordPress Media Library directly using PHP in the frontend

I have searched various sources while creating my current code, but I have yet to find the answer to this question: Link 1 Link 2 Link 3 Link 4 Creating a file management system where admin access is restricted from WordPress. They will manage files th ...

Validating radio buttons in Ionic framework

I am currently working on implementing a form in my application using Ionic and AngularJS. I have added validation to all the fields, but I am facing an issue with the radio button validation. The error message is being displayed correctly when no radio bu ...

Solving relative paths in NodeJS/Express

My website is calling several scripts, images, styles, etc., from different folders both inside and outside the main folder: File Tree - / - website - scripts - data.js - customJquery.js - styles ...

What is the best way to filter specific data types when using ngFor in Angular?

As I loop through the array named "fruits," which contains objects of type "FruitService" that I created, I want to display each element. However, when I delete them (I know it's strange, no database involved), they turn into type "undefined" and star ...