Working with tabs

HTML & CSS
1

how do I get the currently selected to to have a white border on the bottom, so it looks open?
http://lukesspot.com/indus_links/tabs.html

2

You just need to get the tabs to sit on top of the div

Add position relative here.

.tabs input[type="radio"]:checked + label {
	background: #fff;
	border-bottom:2px solid #fff;
	/*margin-bottom:-1px;*/
        position:relative;
}
1 Like
3

Hi there lurtnowski,

here is a Vanilla CSS exmaple…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
    color: #666;
 }

#container {
    max-width: 60em;
    min-width: 17.5em;
    margin: auto;
 }

#container input {
    position: absolute;
    left:-999em;
 }

#container label {
    float: left;
    padding: 0.25em 0.5em;
    margin-bottom: -1px;
    border: 1px solid #999;
    border-radius: 0.5em 0.5em 0 0;
    background-color: #fff;
 }

label[for="r1"],
label[for="r2"] {
    margin-right: 0.25em;
 }

#container div {
    display: none;
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0 0.5em 0.5em 0.5em;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
    background-color: #fff;
    clear: both;
 }

#r1:checked ~ #content1,
#r2:checked ~ #content2,
#r3:checked ~ #content3 {
    display: block;
 }

#r1:checked ~ label[for="r1"],
#r2:checked ~ label[for="r2"],
#r3:checked ~ label[for="r3"] {
    border-bottom-color: #fff;
 }
</style>

</head>
<body>

<div id="container">
 <input type="radio" id="r1" name="r" checked>
 <input type="radio" id="r2" name="r">
 <input type="radio" id="r3" name="r">

 <label for="r1">Tab one</label>
 <label for="r2">Tab Two</label>
 <label for="r3">Tab Three</label>

 <div id="content1">
  <h2>One</h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
   Curabitur sit amet sem sed libero bibendum tempus faucibus       
   quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
   nibh, posuere ac lorem ut, suscipit tincidunt leo.
 </div>

 <div id="content2"> 
  <h2>Two</h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
   Curabitur sit amet sem sed libero bibendum tempus faucibus       
   quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
   nibh, posuere ac lorem ut, suscipit tincidunt leo.
 </div>

 <div id="content3">
  <h2>Three</h2>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
   Curabitur sit amet sem sed libero bibendum tempus faucibus       
   quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
   nibh, posuere ac lorem ut, suscipit tincidunt leo.
 </div>
<!-- #container --></div>

</body>
</html>

…which may not suit your BootStrap requirements. :wonky:

coothead

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.