Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site length even if you resize or maximize?
Any help would be greatly appreciated. Thank you.
Here is what I have done so far:
<div id="table">
<div class="tabs" id="content1">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Home</label>
<div class="content">
<p></p>
<div id="caption">
<p>Title Goes Here</p>
</div>
<div id="nextcontent">
<p>Words go Here</p>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">About Us</label>
<div class="content">
<p>Stuff for Tab Two</p>
<img src="http://placekitten.com/200/100">
</div>
</div>
<!-- Additional tabs content -->
<div class="tab">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">Sign Up</label>
<div class="content">
<p>Content for Tab Six</p>
<img src="http://placedog.com/200/100">
</div>
</div>
</div>
<div id="footer">
© All rights reserved 2013
</div>
Javascript Code:
*
{ margin: 0px; }
#table
{
font-size:100%;
min-height: 80%;
/* height: autopx; */
min-width: 100%;
}
.tabs {
position: relative;
min-height: 80%;
min-width: 80%;
margin: 100px 50px 0px 50px;
}
.tab
{
float: left;
}
.tab label {
background:#202d00;
padding: 10px 40px;
color:#FFF;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
top: -29px;
-webkit-transition: background-color .17s linear;
font-weight:bold;
}
.tab [type=radio]
{
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 0px;
border: 1px solid #ccc;
-webkit-transition: opacity .6s linear;
opacity: 0;
color:#396;
font-weight:bold;
font-size:36px;
background-color:#f8fed2;
}
[type=radio]:checked ~ label {
background: #c5de10;
border-bottom: 0px solid white;
z-index: 2;
color: #202d00;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}
#footer
{
height: 20px;
width:100%;
text-align:center;
}
#content1
{
width:80%;
height:80%;
margin-left:auto;
margin-right:auto;
border: thin outset;
background-color: #f8fed2;
}
#nextcontent
{
color: black;
font-size:16px;
margin-left:20px;
margin-right:20px;
margin0bottom:2px;
margin-top:10px;
}
#caption
{
margin-left:10px;
margin-right:10px;
margin0bottom:0px;
margin-top:10px;
}
You can also try it out on JSFiddle.