We help IT Professionals succeed at work.

New podcast episode! Our very own Community Manager, Rob Jurd, gives his insight on the value of an online community. Listen Now!

x

Allow a tab area under the contents

Jazzy 1012
Jazzy 1012 asked
on
139 Views
Last Modified: 2017-04-08
  			<div class="openthis<?php echo $counter++?>" style="display:none">
  				<div class="selectionOverlay1 fixed flex">
					<div class="cont-cont">
						<article class="relative infoBox OpenSansLight satin">
						<span class="hairline"></span>
						<h1 class="OldStandard textCenter darkRed"> <?php echo $name1;?></h1>
						<hr>
						<br>
						<p class="OldStandardItalic textcenter subtitle"><?php echo $subtitle1;?></p>
						<br><br>
						</article>
					</div>
					<span class="pointer desktop x-btn" style="position:absolute;top:0px;right:5px;z-index:10;margin:10px;">
						<span class='close' menuitem="2"><img src="../assets/images/close.png" height="50px"></span>
					</span>
					<article class="picBox" style="background-image:url('<?php echo $image1 ?>');"></article>
					<div class="fixed escape"></div>
				</div>
  			</div>

Open in new window


I have this and this is my output:
see.png
I want to put these tabs under it but it is not working, how can I fix this?
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
        <li><a data-toggle="tab" href="#menu3">Menu4</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Details here</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Details here</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Details here</p>
    </div>
        <div id="menu4" class="tab-pane fade">
      <h3>Menu 4</h3>
      <p>Details here</p>
    </div>
  </div>

Open in new window


Css:
.selectionOverlay1{
top: 50px;
left:150px;
right:10px;
bottom: 10px;
z-index: 5;
max-width: 2000px !important;
height:100% !important;
width:100% !important;
margin-top:70px;
}
.selectionOverlay1 .cont-cont{
display:flex;
width:450px;
margin-right:20px;
}
.selectionOverlay1 .infoBox{
width:450px;
padding: 2em 0;
background-color: #F1F1F1;
z-index:5;
overflow:scroll;
height: 600px;
}
.selectionOverlay1 .infoBox h1{
width:70%;
margin: 1em auto 0;
font-size: 1.66em;
}
.selectionOverlay1 .infoBox p.subtitle{
margin-bottom: 2em;
padding: 0 2em;
font-size: 1.1em !important;
line-height: 1.4em;
}
.selectionOverlay1 .escape{
top:0;
right: 0;
left:0;
bottom:0;
background: rgba(252,252,255,0.8);
position: fixed !important;
height: 100% !important;
}
.selectionOverlay1 .infoBox *{
z-index:1;
}
.selectionOverlay1 img.mobile{
width:90%;
max-width: 750px;
margin: 0 auto;
}
.selectionOverlay1 #tabContent .details{
text-align:justify;
}
.selectionOverlay1 .infoBox .hairline{
width: auto;
height: auto;
position: absolute;
padding: 0;
left: 10px;
right:10px;
top:10px;
bottom:10px;
border: 1px solid #d7d6d0;
z-index:0;
display:none;
}
.selectionOverlay1 .picBox{
flex: 1.8 0 auto;
background-color:white;
background-size:cover;
background-position:center center;
z-index:5;
height:550px
}
.selectionOverlay1 .infoBox .option-select{
margin-top:40px;
height:40px;
}
.selectionOverlay1 .infoBox .option-select .select-header{
font-size: 1.2em;
padding-bottom: 0.5em;
}
.selectionOverlay1 .infoBox .option-select .select-header .select-label{
padding-right: 0.66em;
}
.selectionOverlay1 .infoBox .option-select .dialog{
left:50%;
top:45%;
transform: translate(-50%,-50%);
background-color:white;
padding:1em;
border-radius:5px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.15);
z-index:3;
line-height:1.33em;
}
.selectionOverlay1 .infoBox .option-select .dialog .option{
padding: 0 0.5em;
margin: 0 0.33em;
}

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.