jquery - Stop CSS From Resizing While Using Percentages -
how can page not resize when im using percentages in css? there other way can this? when page resized divs collide each other , pictures squished. here code:
<!doctype html> <html> <head> <link rel="stylesheet" href="stylesheets/stylesheet.css" /> <title>terashare</title> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript" src="scripts/javascript.js"></script> </head> <body> <div id="container"> <div id="menu"> <div id="logo"><a href=""><img src="pictures/logo.png"></a></div> <div id="buttons"> <a href="login/"><div class="button">login</div></a> <a href="register/"><div class="button">register</div></a> </div> </div> <div id="wrap"> <div id="content"> <div id="slide"> <div><img src="pictures/cloud1.jpg" class="slide"></div> <div><img src="pictures/cloud2.jpg" class="slide"></div> <div><img src="pictures/cloud3.jpg" class="slide"></div> </div> </div> <div id="footer"> <table> <tr><td><h4 class="text">support</h4></td><td class="td"><h4 class="text">legal</h4></td></tr> <tr><td><a href="contact.php" class="link">contact us</a></td><td class="td"><a href="terms.html" class="link">terms of service</a></td></tr> <tr><td></td><td class="td"><a href="privacy.html" class="link">privacy policy</a></td></tr> </table> </div> </div> </div> </body> css:
body { padding:0px; margin:0px; overflow-x:hidden; word-wrap:break-word; } img { border:none; } #menu { position:fixed; top:0px; left:0px; width:100%; height:49px; border-bottom:rgba(82,82,82,1); box-shadow:0 2px 3px rgba(182, 182, 182, 0.75); background-color:rgb(68, 68, 68); z-index:100; } #container { padding:0px; margin:0px; } #content { width:100%; height:auto; background:url(../pictures/grid.gif); } #footer { box-shadow: inset 0 20px 20px -20px #ccc; box-sizing:border-box; border-top:2px solid #666; width:100%; height:auto; padding:20px; } #wrap { position:absolute; top:50px; left:0px; width:100%; height:auto; } #buttons { position:absolute; right:20px; } #logo { position:absolute; top:0px; left:20px; } .slide { width:100%; height:100%; margin:0px; padding:0px; display:block; } .button { margin-left:5px; float:left; line-height:20px; padding:10px; color:#fff; width:auto; height:20px; background-color:#347eba; font-family:arial; font-size:14px; } .button:hover { cursor:pointer; background-color:#347eda; } .link { color:#666; text-decoration:none; font-size:13px; font-family:arial; font-weight:bold; } .link:hover { text-decoration:underline; } .text { font-family:arial; font-weight:bold; color:#333; } .td { padding-left:30px; padding-bottom:5px; } jquery:
$(document).ready(function() { var height = $(document).height(); var width = $(document).width(); var bheight = $('#buttons').height(); $('#container').css({"height" : height, "width" : width}); $('#mwrap').css({"left" : width/2 - 956/2}); $('#buttons').css({"top" : 50/2 - bheight/2}); $('#content').css({"height" : height - 50}); $("#slide > div:gt(0)").hide(); setinterval(function() { $('#slide > div:first') .fadeout(1000) .next() .fadein(1000) .end() .appendto('#slide'); }, 5000); });
a quick prepare might set width of body static width.
body{ width: 1000px; margin: 0 auto; position:relative; } this way percentages based on static values
jquery html css layout space
No comments:
Post a Comment