Tabbed Banner bit

options
Tabbed Banner bit written Nov 10, 2019 4:39:07 GMT
pronounsThey/Them
32written posts
Pepsiearned bits
offlinecurrently
Pepsi
New Member
Pepsi Avatar
Alrighty, I'm attempting a tabbed banner for the first time and am having a really strange issue if anyone here can come up with ideas for how to fix it it's be great msadfaksj site is here

My issue is that for some reason, only the last tab in the row of tabs is doing anything, I tried adding a fifth tab to verify, and it does carry over to a newly added tab, but I cannot for the life of me figure out why it would be doing this. Excuse how unbelievably messy this is :'D

Relevant css:

SPOILER: Click to show

.stafftabs {
   width:450px;
   height:350px;
   float:left
   background: #fff;
   position:absolute;
}
.stafftabs label {
background: #000;
   height:20px;
width:50px;
   z-index:100px !important;
   opacity:1!important;
  position: inherit;
   cursor:pointer;
   
}
.stafftab [type=radio]{
display: none;
   
}
.staffcontent {
position: absolute;
top: 28px;
   z-index:0;
   left: 0;
   background: white;
   right: 0;
   bottom: 0;
   padding: 20px;
   opacity:0;
}
[type=radio]:checked ~ label {
 background: #aa9ba2!important;
}
[type=radio]:checked ~ label ~ .staffcontent {
   opacity:1;
   position:absolute;
   z-index:100;
}





Relevant Html
SPOILER: Click to show



 

<div class="stafftab">
                       
                       
                       <div class="stafftabs">
                       <input type="radio" id="stafftabs-1" name="stafftabs-group-1"checked>
                       <label for="stafftabs-1" title="STAFF"></label>
                       <div class="staffcontent">
                           
                  Pepsi
                   
                           </div></div>
                               
                       <div class="stafftabs">
                       <input type="radio" id="stafftabs-2" name="stafftabs-group-1" >
                       <label for="stafftabs-2" title="JUICECLAN" style="left:70px";></label>
                       <div class="staffcontent">
                           
                           Coke
                           
                  </div></div>
                   
                       <div class="stafftabs">
                       <input type="radio" id="stafftabs-3" name="stafftabs-group-1" >
                       <label for="stafftabs-3" title="JUICECLAN" style="left:140px";></label>
                       <div class="staffcontent">
                           
                           APPLE
                           
                           </div></div>
                       
                       <div class="stafftabs">
                       <input type="radio" id="stafftabs-4" name="stafftabs-group-1" >
                       <label for="stafftabs-4" title="JUICECLAN2" style="left:200px";></label>
                       <div class="staffcontent">
                           
                           ORANGE
                           
                           </div></div>

last edit on Nov 10, 2019 4:39:31 GMT by Pepsi
options
Tabbed Banner bit written Nov 10, 2019 6:46:38 GMT
frog on the floor
aliasfreiheit, microwaved burrito
pronounsany
1,544written posts
pharaoh leapearned bits
offlinecurrently
pharaoh leap
Administrator
pharaoh leap Avatar
i've been having some pretty dark thoughts.
It looks like you've got your z-index listed as '100px !important' instead of just '100!important' for the labels. I'd try changing that first, and if you're still having issues, lemme know!
options
Tabbed Banner bit written Nov 10, 2019 20:52:24 GMT
frog on the floor
aliasfreiheit, microwaved burrito
pronounsany
1,544written posts
pharaoh leapearned bits
offlinecurrently
pharaoh leap
Administrator
pharaoh leap Avatar
i've been having some pretty dark thoughts.
, your 'staffcontent' class has the same z-index as your labels and is overlapping the clickable portion of the tab. Bump up your label z-index/decrease the 'staffcontent' z-index, and you should be good!

I dunno if this helps at all, but sometimes with wonky stuff like things being unresponsive, if you inspect the element (on a browser that allows it) you can see what might be overlapping or interfering with what. That's what I used to try to sleuth out this one! o> Might be helpful in the future??? Might not be???? Figured I'd let you know what I usually do, either way, sdkfljhdsfkjsdh.
options
Tabbed Banner bit written Nov 25, 2019 0:14:57 GMT
3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.