CODEWITHSUNDEEP
htmlcss
user4907354
user4907354

Reputation: 83

Tabs navigation bar below the content

I found this code on the internet which is fine but I want the section tags first then the inputs, I tried so many times to move the tabs navigation below the content without success.

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

input:checked+label {
  color: #ff0000;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
  display: block;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">home</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2">about</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3">FAQ</label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4">contact</label>

<section id="content1">
  <p>home</p>
</section>

<section id="content2">
  <p>about</p>
</section>

<section id="content3">
  <p>FAQ</p>
</section>

<section id="content4">
  <p>contact</p>
</section>

Any ideas how to move the navigation bar below the content

Thank you

Upvotes: 0

Views: 1364

Answers (4)

Seltix
Seltix

Reputation: 79

you just need to use CSS display flex for reorder the content :

https://codepen.io/seltix/pen/XaLVaY

<dix id="blockcontainer" >

  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">home</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">about</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">FAQ</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">contact</label>

  <div class="divider"></div>

  <section id="content1">
    <p>home</p>
  </section>

  <section id="content2">
    <p>about</p>
  </section>

  <section id="content3">
    <p>FAQ</p>
  </section>

  <section id="content4">
    <p>contact</p>
  </section>

  </div>

CSS :

section {
  display: none;
  padding: 20px;
  border-bottom: 1px solid #AAA;
  background :#EEE;
}

div.divider {
  width:100%;
}

input {
  display: none;
}

label {
  padding: 10px;
}

input:checked + label {
  color: #ff0000;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}


#blockcontainer {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

section {
    -ms-flex-order: 1;
    order: 1;
}

div.divider {
    -ms-flex-order: 6;
    order: 6;
}

input, label {
    -ms-flex-order: 12;
    order: 12;
}

Upvotes: 0

frnt
frnt

Reputation: 8795

You could try that as below, wrap the section tags by a div and then you could change the positioning of label using position:absolute,

section {
  display: none;
  padding: 0px 0 0;
  border-bottom: 1px solid #ddd;
}
input {
  display: none;
}
input:checked+label {
  color: #ff0000;
}
#tab1:checked~.wr #content1{
  display:block;
}
#tab2:checked~.wr #content2{
  display:block;
}
#tab3:checked~.wr #content3{
  display:block;
}
#tab4:checked~.wr #content4{
  display:block;
}
.wr{
  position:relative;
  top:0;
  display:block;
}
.tb1{
   position:absolute;
   top:80px;
   display:inline-block;
}
.tb2{
   position:absolute;
   top:80px;
   display:inline-block;
   left:60px;
}
.tb3{
   position:absolute;
   top:80px;
   display:inline-block;
   left:120px;
}
.tb4{
   position:absolute;
   top:80px;
   display:inline-block;
   left:180px;
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" class="tb1">home</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2" class="tb2">about</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3" class="tb3">FAQ</label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4" class="tb4">contact</label>


<div class="wr">
<section id="content1">
  <p>home</p>
</section>

<section id="content2">
  <p>about</p>
</section>

<section id="content3">
  <p>FAQ</p>
</section>

<section id="content4">
  <p>contact</p>
</section>
</div>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

I have changed your code. Please try this code.

a:focus {
  outline: none!important; 
}
.content-wrap {
  background:#eee;
  padding:20px;
  margin-bottom:10px;
}
.tabs-bottom > .nav-tabs{
  border-bottom: 0;
}
.tabs-below > .nav-tabs {
  border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}
.tabs-bottom > .nav-tabs {
  border-top: 1px solid #ddd;
}
.tabs-bottom > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}
.tabs-bottom > .nav-tabs > li > a { 
  border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-bottom > .nav-tabs > .active > a,
.tabs-bottom > .nav-tabs > .active > a:hover,
.tabs-bottom > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">		 
      <!-- tabs -->
      <div class="tabbable tabs-bottom">
        <div class="tab-content">
          <div class="tab-pane active" id="home">                
            <div class="content-wrap">
              <h2>Home Tab</h2>
              <p>test</p>                 
            </div>
          </div> 
          <div class="tab-pane" id="about"> 
            <div class="content-wrap">
              <h2>About Tab</h2>
              <p>test</p>                 
            </div>
          </div>

          <div class="tab-pane" id="services"> 
            <div class="content-wrap">
              <h2>Services Tab</h2>
              <p>test</p>                 
            </div>
          </div>

          <div class="tab-pane" id="contact"> 
             <div class="content-wrap">
              <h2>Contact Tab</h2>
              <p>test</p>                 
             </div>
          </div>
        </div>
        <!-- tab content -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
          <li><a href="#about" data-toggle="tab">About</a></li>
          <li><a href="#services" data-toggle="tab">Services</a></li>
          <li><a href="#contact" data-toggle="tab">Contact</a></li>
        </ul>				
      </div>
      <!-- /tabs -->
    </div>
  </div>
</div>

Upvotes: 0

NewBee
NewBee

Reputation: 394

Use Navbar technique with <div id="home">.

It will be easy.

Or you can use javascript to make it look more refined.

body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.main {
  padding: 16px;
  margin-bottom: 30px;
  height: 1500px; /* Used to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
</div>

<div id="home"class="main">
  <h1>Home</h1>
</div>

<div id="about"class="main">
  <h1>About</h1>
</div>

</body>
</html>

Upvotes: 0

Related Questions