Show images on top for html css tab-CodePudding

I am using this css tab element. Current state when a tab is clicked content shows on the bottom. My goal is to get the content to show on the top instead of the bottom but am having trouble with how to do this. I want to show a different image on top instead of the bottom; I followed an earlier tutorial and got this far, but I ideally want to show all the content on top instead of the bottom; any direction would be great.

            @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img{
  width: 100%;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    font-family: sans-serif;
    background: #f6f9fa;
}

h1 {
    color: #ccc;
    text-align: center;
}

a {
  color: #ccc;
  text-decoration: none;
  outline: none;
}

/*Fun begins*/
.tab_container {
    width: 90%;
    margin: 0 auto;
    padding-top: 70px;
    position: relative;
}

input, section {
  clear: both;
  padding-top: 10px;
  display: none;
}

label {
  font-weight: 700;
  font-size: 18px;
  display: block;
  float: left;
  width: 20%;
  padding: 1.5em;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #f0f0f0;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
  padding: 20px;
  background: #fff;
  color: #999;
  border-bottom: 2px solid #f0f0f0;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;
}
.tab_container .tab-content h3  {
  text-align: center;
}

.tab_container [id^="tab"]:checked   label {
  background: #fff;
  box-shadow: inset 0 3px #0CE;
}

.tab_container [id^="tab"]:checked   label .fa {
  color: #0CE;
}

label .fa {
  font-size: 1.3em;
  margin: 0 0.4em 0 0;
}

/*Media query*/
@media only screen and (max-width: 900px) {
  label span {
    display: none;
  }
  
  .tab_container {
    width: 98%;
  }
}

/*Content Animation*/
@keyframes fadeInScale {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.no_wrap {
  text-align:center;
  color: #0ce;
}
.link {
  text-align:center;
}

  <div >
            
            <input id="tab1" type="radio" name="tabs" >
            <label for="tab1"><i ></i><span>Code</span></label>
        
            <input id="tab2" type="radio" name="tabs">
            <label for="tab2"><i ></i><span>About</span></label>
        
            <input id="tab3" type="radio" name="tabs">
            <label for="tab3"><i ></i><span>Services</span></label>
        
            <input id="tab4" type="radio" name="tabs">
            <label for="tab4"><i ></i><span>Portfolio</span></label>
        
            <input id="tab5" type="radio" name="tabs">
            <label for="tab5"><i ></i><span>Contact</span></label>
        
            <section id="content1" >
                <h3>Headline 1</h3>
              
        
            </section>
        
            <section id="content2" >
              <h3>Headline 1</h3>
                
        
            </section>
        
            <section id="content3" >
                <h3>Headline 3</h3>
               
        
            </section>
        
            <section id="content4" >
                <h3>Headline 4</h3>
        
            </section>
        
            <section id="content5" >
                <h3>Headline 5</h3>
        
            </section>
        </div>

CodePudding user response：

Since your content sections depend on being after the radio buttons, rearranging the DOM elements without breaking things is difficult. One thing you can do is translate the content sections up the y-axis while pushing down your tab container a bit more. Translation is cool because it won't disturb the position of other DOM elements, instead working harmlessly in its own layer.

Here, I'm translating all elements with an id beginning with "content".

[id^="content"] {
   transform: translateY(-11.25rem);
}

.tab_container {
  padding-block-start: 6.25rem; /* logical property */
}

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

body {
  font-family: sans-serif;
  background: #f6f9fa;
}

h1 {
  color: #ccc;
  text-align: center;
}

a {
  color: #ccc;
  text-decoration: none;
  outline: none;
}


/*Fun begins*/

.tab_container {
  width: 90%;
  margin: 0 auto;
  padding-top: 70px;
  position: relative;
}

input,
section {
  clear: both;
  padding-top: 10px;
  display: none;
}

label {
  font-weight: 700;
  font-size: 18px;
  display: block;
  float: left;
  width: 20%;
  padding: 1.5em;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #f0f0f0;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5 {
  display: block;
  padding: 20px;
  background: #fff;
  color: #999;
  border-bottom: 2px solid #f0f0f0;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;
}

.tab_container .tab-content h3 {
  text-align: center;
}

.tab_container [id^="tab"]:checked label {
  background: #fff;
  box-shadow: inset 0 3px #0CE;
}

.tab_container [id^="tab"]:checked label .fa {
  color: #0CE;
}

label .fa {
  font-size: 1.3em;
  margin: 0 0.4em 0 0;
}


/*Media query*/

@media only screen and (max-width: 900px) {
  label span {
    display: none;
  }
  .tab_container {
    width: 98%;
  }
}


/*Content Animation*/

@keyframes fadeInScale {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.no_wrap {
  text-align: center;
  color: #0ce;
}

.link {
  text-align: center;
}

[id^="content"] {
  transform: translateY(-11.25rem);
}

.tab_container {
  padding-block-start: 6.25rem;
}

<div >

  <input id="tab1" type="radio" name="tabs">
  <label for="tab1"><i ></i><span>Code</span></label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><i ></i><span>About</span></label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><i ></i><span>Services</span></label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><i ></i><span>Portfolio</span></label>

  <input id="tab5" type="radio" name="tabs">
  <label for="tab5"><i ></i><span>Contact</span></label>

  <section id="content1" >
    <h3>Headline 1</h3>


  </section>

  <section id="content2" >
    <h3>Headline 1</h3>


  </section>

  <section id="content3" >
    <h3>Headline 3</h3>


  </section>

  <section id="content4" >
    <h3>Headline 4</h3>

  </section>

  <section id="content5" >
    <h3>Headline 5</h3>

  </section>
</div>

CodePudding user response：

You can redo the layout using CSS grid and keep your HTML code unchanged.

.tab_container {
  display: grid;
  grid-template-columns: repeat(5,1fr);
}
section {
  grid-row-end: -2;
  grid-column: 1/-1;
}

Then you remove the use of float and the width defined for the label elements. I also inverted the border/box-shadow defined

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
*,
*:after,
*:before {
  box-sizing: border-box;
}

img {
  width: 100%;
}


body {
  font-family: sans-serif;
  background: #f6f9fa;
}

h1 {
  color: #ccc;
  text-align: center;
}

a {
  color: #ccc;
  text-decoration: none;
  outline: none;
}


/*Fun begins*/

.tab_container {
  width: 90%;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5,1fr);
}
section {
  grid-row-end: -2;
  grid-column: 1/-1;
}

input,
section {
  padding-top: 10px;
  display: none;
}

label {
  font-weight: 700;
  font-size: 18px;
  padding: 1.5em;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #f0f0f0;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5 {
  display: block;
  padding: 20px;
  background: #fff;
  color: #999;
  border-top: 2px solid #f0f0f0;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
  animation: fadeInScale 0.7s ease-in-out;
}

.tab_container .tab-content h3 {
  text-align: center;
}

.tab_container [id^="tab"]:checked label {
  background: #fff;
  box-shadow: inset 0 -3px #0CE;
}

.tab_container [id^="tab"]:checked label .fa {
  color: #0CE;
}

label .fa {
  font-size: 1.3em;
  margin: 0 0.4em 0 0;
}


/*Media query*/

@media only screen and (max-width: 900px) {
  label span {
    display: none;
  }
  .tab_container {
    width: 98%;
  }
}


/*Content Animation*/

@keyframes fadeInScale {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.no_wrap {
  text-align: center;
  color: #0ce;
}

.link {
  text-align: center;
}

<div >

  <input id="tab1" type="radio" name="tabs">
  <label for="tab1"><i ></i><span>Code</span></label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><i ></i><span>About</span></label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><i ></i><span>Services</span></label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><i ></i><span>Portfolio</span></label>

  <input id="tab5" type="radio" name="tabs">
  <label for="tab5"><i ></i><span>Contact</span></label>

  <section id="content1" >
    <h3>Headline 1</h3>


  </section>

  <section id="content2" >
    <h3>Headline 1</h3>


  </section>

  <section id="content3" >
    <h3>Headline 3</h3>


  </section>

  <section id="content4" >
    <h3>Headline 4</h3>

  </section>

  <section id="content5" >
    <h3>Headline 5</h3>

  </section>
</div>