0

been using some CSS tabs from CSS tricks. They work great, only problem is I need the tabs themselves to be in the center of the page, three in a row, like this site:

http://lewishowes.com/ (3 tabs right under the sponsors)

Here's a jsfiddle:

http://jsfiddle.net/4zrsD/

And here's the code:

CSS

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}  

HTML

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>

       <div class="content">
           stuff
       </div> 
    </div>

   <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>

        <div class="content">
           stuff
       </div> 
   </div>

    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab Three</label>

       <div class="content">
           stuff
       </div> 
    </div>

   </div>

Thanks!

3 Answers 3

1
.tab:nth-child(1) { margin-left: 30%; }

http://jsfiddle.net/4zrsD/1/

This won't obviously center it perfectly, but you can use media-queries to get it more centered depending on the screen width.

3
  • @ZachSaucier Well, it would require a lot of reworking with the html set-up to get it exact. And well, I'm not going to do all that work when the OP is showing us code that she didn't write herself in the first place.
    – CRABOLO
    Feb 14, 2014 at 1:31
  • He* ;) Thanks for the answer, about the HTML reworking... can you point me in the right direction? Thanks! Feb 14, 2014 at 1:37
  • @user3299495 I really can't, since even reworking the html , might actually ruin the tab functionality. To do tabs in css it has to be set up pretty exact. I would recommend using jquery for something like this to be honest.
    – CRABOLO
    Feb 14, 2014 at 1:40
1

Here is the solution that works for me:

<div class="centered">

   <ul ... >
      <li class="centered_tab" ...>
        <a ... >My First Tab</a>
      </li>
      <li class="centered_tab" ...>
        <a ... >My Second Tab</a>
      </li>
      <li class="centered_tab" ...>
        <a ... >My Third Tab</a>
      </li>
   </ul>

</div>

With the css:

.centered {
    text-align: center;
    width: 100%;
}

.centered_tab {
    float:none /*to make sure there is no active float*/
    display: inline-block
}

The div takes care of centering its children (the tabs). Make sure to remove any floating that would prevent the tabs from centering. Display:inline-block allow them to go nicely on the same line

Your example fiddle with my solution applied: http://jsfiddle.net/ufqduw6n/1/

0

add this (may be help full)

.tab label{display:block;padding:3px;}/reduce padding/ .tab{width:33.33%;}/same width for tabs/

set another things according to content

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.