Fluid active tabs are causing alignment issues with CSS triangles

I have included CSS triangles on the active tabs with fluid width on this page, but they are not aligned properly in each tab.

For example, the About Us tab is correctly and centrally aligned, but the others are too far to the right. The issue lies with the left: 23%; property causing this misalignment. I am unsure how to center-align each one as the tabs vary in width.

Below is the code for the CSS Triangles applied to the active tabs:

#middle .Advert .tabs li.active .up, #middle .Advert .tabs li.active:hover .up {
position: relative;
display: inline-block;
top: 16px;
left: 23%;
width: 0px;
height: 0px;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid #FFF;
margin-left:-10px;
}

And here is the list of Advert tabs:

#middle .Advert .tabs li {
background: #EEE;
padding: 8px 0;
float: left;
cursor: pointer;
width: 19.77%;
text-align: center;
border: 1px solid #C8CBCE;
border-left: 0;
}

Please let me know if you require more CSS code and any assistance would be greatly appreciated.

css

Answer №1

To solve the issue, one possible solution is to use absolute positioning for the ups element like this:

First, add "position:relative;" to the list item with the class .featurestab

Then, define the style for .up as follows:

position: absolute;
display: inline-block;
bottom: -1px;
left: 50%; // ensures the image starts at the center
width: 0px;
height: 0px;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid #FFF;
margin-left: -5px; // moves it half its width to the left, perfectly centering it

This technique guarantees that the .up element remains centered at all times by adjusting its position based on its own width.

Answer №2

Below is a simplified demonstration using the fixed position property:

HTML

<ul>
    <li>Item 1<div class="arrow"></div></li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

.arrow{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    width: 0px;
    height: 0px;
    position: absolute;
    left: 21px;
}

li{
  display: inline-block;
  background: black;
  color: white;
  height: 23px;
  position: relative;
  width: 50px;
  text-align: center;
}

Javascript/Jquery

$("li").click(function(){
  $(".arrow").remove();  
    $(this).append($("<div/>",{"class":"arrow"}));
});

Live Demo

http://jsfiddle.net/abc123/

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

Picture hidden beyond the words

I am trying to achieve a layout where an image is displayed behind an H1 tag, with the width of the image matching the width of the text. Here is my code: <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744. ...

htmlcsscss-position

Modify the Div background color by accessing the HEX value saved in a JSON file

(I made a change to my code and removed the br tag from info2) Currently, I have successfully implemented a feature using jQuery that reads color names and hex values from a JSON file, populates them in a drop-down select menu (which is working fine). Now ...

javascriptjqueryhtmlcssjson

What is the best way to align my navigation bar in the middle of two elements with different

I've been struggling with my code for the past couple of days, but nothing seems to be working. I need the navigation bar to be perfectly centered between two elements (<img> and <form>). Right now, it's almost centered, but it starts ...

htmlcssresponsive-designfluid-layout

The logo emerges from the background color, with the text consistently appearing in black

In my attempt to display a logo and text together in an Outlook page, I encountered an issue. The content from the HTML page appears different when sent to MS Outlook. Despite not using flexbox in my HTML code, Outlook interprets it differently. I am uncer ...

c#htmlcss

Adjust Image Width to Full - Bootstrap

I am having trouble creating a full-width header using Bootstrap v5. Despite searching the site, I have not been able to find a solution that works for me. *{ box-sizing: border-box; font-size: 16px; } .no-padding { padding-l ...

htmlcsstwitter-bootstrap

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

javascripthtmlcss

How to retrieve the image source using jQuery

<img src="../img/arnold.png" alt="Arnold"> Is there a way to retrieve the absolute path of this image using jQuery? Currently, when I use img.attr("src"), it only returns "../img/arnold.png", but I need it to return something like "http://site.com/ ...

javascriptjqueryhtmlcssimage

How can a fixed size block and a responsive block be aligned next to each other?

I am looking to create a centered table that is 900px wide with one row and two cells. The right cell should always be 200px wide, while the left cell should fill up the remaining space. However, I am facing an issue where the right cell jumps below the le ...

htmlcss

Interactive SVG viewport dimension

Check out my "hamburger button" made in SVG, shown below. body { margin: 0; text-align: center; } svg#ham-btn { margin: 2rem; border: 1px solid black; fill: #383838; } <svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" pre ...

htmlcsssvg

Selecting CSS Properties with jQuery

I am trying to make an image change color to blue and also change the background color to blue when it is clicked inside a div. However, my code doesn't seem to be working as expected. Is there a more efficient way to apply CSS to elements? FIDDLE v ...

jquerycss

Heading and paragraph text within the same row

I'm currently facing a challenge while working on the personal portfolio webpage project for freecodecamp. Everything looks good except for one issue. Although I have managed to center align my heading and paragraph text as intended, the paragraph te ...

htmlcss

Is it achievable to animate dynamic height using CSS? Open to JS alternatives as well

I am currently utilizing AngularJS, which enables me to utilize ng-show and ng-hide in order to display or hide elements based on a logical condition. My goal is to animate the size changes of the container when the child objects are shown or hidden, creat ...

javascriptcssangularjscss-animations

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

htmlcss

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascriptjquerycsshtml

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

Unfinished card or cut-off content within a bootstrap accordion

Greetings to the StackOverflow community! I am facing an issue with my accordion and card setup, where the card is not fully displayed within the button at the bottom. The following image illustrates the problem: https://i.sstatic.net/aSFsc.png Here is ...

jquerycssbootstrap-4

In this guide, we will explore the process of designing unique styles for ng

What is the proper way to customize CSS for a specific element? &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { border-color: $ng-select-highlight; box-shadow: $ng-select-box-shadow; } } The offi ...

cssangularsass

As you scroll, the top block in each of the three columns will remain fixed within its

I need assistance with a problem involving three columns and multiple blocks within each column. Specifically, I want the first block in each column to remain fixed at the top when scrolling. However, once you reach the bottom of each column, the first blo ...

javascriptcsssticky

HTML - header banner with missing links

Currently in the process of learning web development and constructing a practice website, I have encountered some challenges. Specifically, I am attempting to add a background/banner behind the section containing links to other websites. I believe that I h ...

htmlcsshyperlinkheaderbanner