javascript - How do you prevent CSS div from dislocating or collapsing when resizing the browser? -
how prevent whole website resizing whenever minimize browser or maximize, webiste size adjust directly proportional resize. how prevent happening? without re-organizing everything? need site length still if resize or maximize
please help. thank you.
here's i've done far: markup:
<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="contentheader"></div> --> <div id="caption"> <p> title goes here</p> </div> <div id="nextcontent"> <p>words go here</p> </div> </div> <!--end of content tag --> </div><!--end of content tab tag tab1 --> <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 tab two</p> <img src="http://placekitten.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">forum</label> <div class="content"> <p>stuff tab three</p> </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">gallery</label> <div class="content"> <p>stuff tab four</p> <img src="http://placedog.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-5" name="tab-group-1"> <label for="tab-5">forum</label> <div class="content"> <p>stuff tab five</p> <img src="http://placedog.com/200/100"> </div> </div> <div class="tab"> <input type="radio" id="tab-6" name="tab-group-1"> <label for="tab-6">sign up</label> <div class="content"> <p>stuff tab six</p> <img src="http://placedog.com/200/100"> </div> </div> </div><!--*end of table tag --> <div id="footer"> © rights reserved 2013 </div> javascript-code:
* { margin: 0px; } #table { font-size:100%; min-height: 80%; /* height: autopx; */ min-width: 100%; /*background: #aac6e9; */ /*background color of whole layout*/ } .tabs { position: relative; min-height: 80%; /* adjust height of body */ min-width: 80%; margin: 100px 50px 0px 50px; /* top, right, bottom, left */ } .tab { float: left; /* responsible tabs align left */ } .tab label { background:#202d00; /*bg color of menu bar item */ padding: 10px 40px; /* menu bar item height width */ 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; /* former 20 space between menu bar , content text */ border: 1px solid #ccc; -webkit-transition: opacity .6s linear; opacity: 0; color:#396; /*text color of title goes here*/ font-weight:bold; font-size:36px; background-color:#f8fed2; /*bg color of content body holder text */ /*width:100%; height:92%; */ } [type=radio]:checked ~ label { background: #c5de10; /*bg color of active menu bar item */ border-bottom: 0px solid white; z-index: 2; color: #202d00; } [type=radio]:checked ~ label ~ .content { z-index: 1; opacity: 1; } #footer { /*margin-top:10%;*/ height: 20px; width:100%; text-align:center; } /*#contentheader { background-image:url('1.jpg'); width:100%; height: 18%; } */ #content1 { width:80%; /*adust width of content body*/ height:80%; /*border: 3px solid red; */ 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 try out in fiddle:
you can achieve using media queries in css. can read on them via mdn: https://developer.mozilla.org/en-us/docs/web/guide/css/media_queries
alternatively, responsive web development techniques. once again, mozilla has useful articles , reading material on subject:
https://developer.mozilla.org/en-us/docs/web_development/responsive_web_design
Comments
Post a Comment