CSS: How to remove white space

<p>I am designing a responsive web page. Actually what's happening is though i am setting the width of my header and wrapper with the screen size still I guess it is taking more space due to which a horizontal scroll bar appears down the screen and also the position of buttons are varying from display to display though i am taking the screen size px Here is the code</p><pre><br /><code>$(document).ready(function(){<br /> var a=window.screen.availWidth;<br /> var b=(0.20 * window.screen.availHeight);<br /> var c=(0.60 * window.screen.availHeight);<br /> $("#header").css("background-color","#009acd");<br /> $("#header").css("height",b);<br /> $("#header").css("width",a);<br /> $("#header").css("position","relative");<br /><br /> $("#wrapper").css("background-color","#FFFFFF");<br /> $("#wrapper").css("width",a);<br /> $("#wrapper").css("height",c);<br /> $("#wrapper").css("position","relative");<br /><br /> $("#logo1").css("position", "absolute");<br /> $('#logo1').css("top","5%");<br /><br /> $('#d11').css("position","absolute");<br /> $('#d11').css("top","75px");<br /> $('#d11').css("left","310px");<br /> $('#d11').css("color","#FFFFFF");<br /><br /> $('#marquee').css("position","absolute");<br /> $('#marquee').css("top","-15px");<br /> $('#marquee').css("left","300px");<br /> $('#marquee').css("color","#FFFFFF");<br /><br /> $('h1').css("color","#FFFFFF");<br /> $('h3').css("position","absolute");<br /> $('h3').css("top","90px");<br /> $('h3').css("left","1000px");<br /> $('h3').css("color","#FFFFFF");<br /> $('h2').css("position","absolute");<br /> $('h2').css("top","60px");<br /> $('h2').css("left","1075px");<br /> $('h2').css("color","#FFFFFF");<br /><br />/* $('#d12').css("position","absolute");<br /> $('#d12').css("top","65px");<br /> $('#d12').css("left","950px");<br /> $('#d12').css("color","#FFFFFF");*/<br /><br /> $('#css3menu1').css("position", "absolute");<br /> $('#css3menu1').css("bottom","17px");<br /> $('#css3menu1').css("left","310px");<br /><br /> $('#videos').css("position", "absolute");<br /> $('#videos').css("top","0px");<br /> $('#videos').css("left","22px");<br /><br /> $('#studymaterial1').css("position", "absolute");<br /> $('#studymaterial1').css("top","148px");<br /> $('#studymaterial1').css("left","32px");<br /><br /> $('#downloads').css("position", "absolute");<br /> $('#downloads').css("top","315px");<br /> $('#downloads').css("left","22px");<br /><br /> $('#wowslider-container1').css("left","233px");<br /> $('#wowslider-container1').css("top","1000px");<br /><br /> $('.formoid-solid-blue').css("position","absolute");<br /> $('.formoid-solid-blue').css("left","912px");<br /> $('.formoid-solid-blue').css("top","12px");<br /><br /><br />});<br />HTML code<br /><body><br /> <div id="header"><br /><br /> <div id="logo1"><br /> <img src="images/logo.jpg" alt="logo"></img><br /> </div><br /> <div><br /> <ul id="css3menu1" class="topmenu"><br /> <li class="topfirst"><a href="#"<br /> style="height: 18px; line-height: 18px;">Home</a></li><br /> <li class="topfirst"><a href="#"<br /> style="height: 18px; line-height: 18px;"><span>FAQs </span></a></li><br /> <li class="topfirst"><a href="#"<br /> style="height: 18px; line-height: 18px;"><span>Videos </span></a></li><br /> <li class="topfirst"><a href="#"<br /> style="height: 18px; line-height: 18px;"><span>Study<br /> Materials</span></a></li><br /> <li class="topfirst"><a href="#"<br /> style="height: 18px; line-height: 18px;"><span>Downloads</span></a></li><br /><br /> </ul><br /> </div><br /><br /> <div id="marquee"><br /> <marquee><br /> <a href="#" ><h1>I have a QUERY?????&nbsp;I have a QUERY?????&nbsp;I have a QUERY?????</h1></a><br /> </marquee><br /> </div><br /><br /> <div id="d11"><br /> <h1>WELCOME TO ULLASUCHIL.COM</h1><br /> </div><br /> <div id="d12"><br /> <h2 align="right"><br /> ULLAS UCHIL</h2><h3 align="right">DEVELOPMENT OFFICER<br>+91 98195 63458<br>ullasuchil@licindia.com</h3><br /><br /> </div><br /> </div><br /> <div id="wrapper"><br /> <div id="videos"><br /> <img src="images/videos.png" alt="videos"></img><br /> </div><br /> <div id="studymaterial1"><br /> <img src="images/studymaterial1.png" alt="studymaterials"></img><br /> </div><br /> <div id="downloads"><br /> <img src="images/downloads.png" alt="downloads"></img><br /> </div><br /><br /> <div id="wowslider-container1"><br /> <div class="ws_images"><br /> <ul><br /> <li><img src="data1/images/photo_20160218_183940.jpg"<br /> alt="photo_2016-02-18_18-39-40" title="photo_2016-02-18_18-39-40"<br /> id="wows1_0" /></li><br /> <li><img src="data1/images/photo_20160218_183950.jpg"<br /> alt="photo_2016-02-18_18-39-50" title="photo_2016-02-18_18-39-50"<br /> id="wows1_1" /></li><br /> <li><img src="data1/images/photo_20160218_183956.jpg"<br /> alt="photo_2016-02-18_18-39-56" title="photo_2016-02-18_18-39-56"<br /> id="wows1_2" /></li><br /> <li><img src="data1/images/photo_20160218_184006.jpg"<br /> alt="photo_2016-02-18_18-40-06" title="photo_2016-02-18_18-40-06"<br /> id="wows1_3" /></li><br /> <li><img src="data1/images/photo_20160218_184014.jpg"<br /> alt="photo_2016-02-18_18-40-14" title="photo_2016-02-18_18-40-14"<br /> id="wows1_4" /></li><br /> <li><img src="data1/images/photo_20160218_184020.jpg"<br /> alt="photo_2016-02-18_18-40-20" title="photo_2016-02-18_18-40-20"<br /> id="wows1_5" /></li><br /> <li><img src="data1/images/photo_20160218_184028.jpg"<br /> alt="photo_2016-02-18_18-40-28" title="photo_2016-02-18_18-40-28"<br /> id="wows1_6" /></li><br /> <li><img src="data1/images/photo_20160218_184035.jpg"<br /> alt="photo_2016-02-18_18-40-35" title="photo_2016-02-18_18-40-35"<br /> id="wows1_7" /></li><br /> <li><img src="data1/images/photo_20160218_184045.jpg"<br /> alt="photo_2016-02-18_18-40-45" title="photo_2016-02-18_18-40-45"<br /> id="wows1_8" /></li><br /> <li><img src="data1/images/photo_20160218_184054.jpg"<br /> alt="photo_2016-02-18_18-40-54" title="photo_2016-02-18_18-40-54"<br /> id="wows1_9" /></li><br /> <li><img src="data1/images/photo_20160218_184059.jpg"<br /> alt="photo_2016-02-18_18-40-59" title="photo_2016-02-18_18-40-59"<br /> id="wows1_10" /></li><br /> <li><img src="data1/images/photo_20160218_184113.jpg"<br /> alt="photo_2016-02-18_18-41-13" title="photo_2016-02-18_18-41-13"<br /> id="wows1_11" /></li><br /> <li><img src="data1/images/photo_20160218_184121.jpg"<br /> alt="photo_2016-02-18_18-41-21" title="photo_2016-02-18_18-41-21"<br /> id="wows1_12" /></li><br /> <li><a href="http://wowslider.com/vf"><img<br /> src="data1/images/photo_20160218_184129.jpg"<br /> alt="full screen slider" title="photo_2016-02-18_18-41-29"<br /> id="wows1_13" /></a></li><br /> <li><img src="data1/images/photo_20160218_184140.jpg"<br /> alt="photo_2016-02-18_18-41-40" title="photo_2016-02-18_18-41-40"<br /> id="wows1_14" /></li><br /> </ul><br /> </div><br /> <div class="ws_bullets"><br /> <div><br /> <a href="#" title="photo_2016-02-18_18-39-40"><img<br /> src="data1/tooltips/photo_20160218_183940.jpg"<br /> alt="photo_2016-02-18_18-39-40" />1</a> <a href="#"<br /> title="photo_2016-02-18_18-39-50"><img<br /> src="data1/tooltips/photo_20160218_183950.jpg"<br /> alt="photo_2016-02-18_18-39-50" />2</a> <a href="#"<br /> title="photo_2016-02-18_18-39-56"><img<br /> src="data1/tooltips/photo_20160218_183956.jpg"<br /> alt="photo_2016-02-18_18-39-56" />3</a> <a href="#"<br /> title="photo_2016-02-18_18-40-06"><img<br /> src="data1/tooltips/photo_20160218_184006.jpg"<br /> alt="photo_2016-02-18_18-40-06" />4</a> <a href="#"<br /> title="photo_2016-02-18_18-40-14"><img<br /> src="data1/tooltips/photo_20160218_184014.jpg"<br /> alt="photo_2016-02-18_18-40-14" />5</a> <a href="#"<br /> title="photo_2016-02-18_18-40-20"><img<br /> src="data1/tooltips/photo_20160218_184020.jpg"<br /> alt="photo_2016-02-18_18-40-20" />6</a> <a href="#"<br /> title="photo_2016-02-18_18-40-28"><img<br /> src="data1/tooltips/photo_20160218_184028.jpg"<br /> alt="photo_2016-02-18_18-40-28" />7</a> <a href="#"<br /> title="photo_2016-02-18_18-40-35"><img<br /> src="data1/tooltips/photo_20160218_184035.jpg"<br /> alt="photo_2016-02-18_18-40-35" />8</a> <a href="#"<br /> title="photo_2016-02-18_18-40-45"><img<br /> src="data1/tooltips/photo_20160218_184045.jpg"<br /> alt="photo_2016-02-18_18-40-45" />9</a> <a href="#"<br /> title="photo_2016-02-18_18-40-54"><img<br /> src="data1/tooltips/photo_20160218_184054.jpg"<br /> alt="photo_2016-02-18_18-40-54" />10</a> <a href="#"<br /> title="photo_2016-02-18_18-40-59"><img<br /> src="data1/tooltips/photo_20160218_184059.jpg"<br /> alt="photo_2016-02-18_18-40-59" />11</a> <a href="#"<br /> title="photo_2016-02-18_18-41-13"><img<br /> src="data1/tooltips/photo_20160218_184113.jpg"<br /> alt="photo_2016-02-18_18-41-13" />12</a> <a href="#"<br /> title="photo_2016-02-18_18-41-21"><img<br /> src="data1/tooltips/photo_20160218_184121.jpg"<br /> alt="photo_2016-02-18_18-41-21" />13</a> <a href="#"<br /> title="photo_2016-02-18_18-41-29"><img<br /> src="data1/tooltips/photo_20160218_184129.jpg"<br /> alt="photo_2016-02-18_18-41-29" />14</a> <a href="#"<br /> title="photo_2016-02-18_18-41-40"><img<br /> src="data1/tooltips/photo_20160218_184140.jpg"<br /> alt="photo_2016-02-18_18-41-40" />15</a><br /> </div><br /> </div><br /> <div class="ws_shadow"></div><br /> <script type="text/javascript" src="engine1/wowslider.js"></script><br /> <script type="text/javascript" src="engine1/script.js"></script><br /> </div><br /><br /> <div><br /><br /> <script type="text/javascript"<br /> src="formoid_files/formoid1/jquery.min.js"></script><br /> <form class="formoid-solid-blue"<br /> style="background-color: #FFFFFF; font-size: 14px; font-family: 'Roboto', Arial, Helvetica, sans- serif; color: #34495E; max-width: 980px; min-width: 335px; max-height: 600px; min-height: 440px"<br /> method="post"><br /> <div class="title"><br /> <h2>Register</h2><br /> </div><br /> <div class="element-input"><br /> <label class="title"><span class="required"></span></label><br /> <div class=""><br /> <b><font color="black">Name</font></b><input class="large"<br /> type="text" name="input" required="required" placeholder="Name" /><span<br /> class=""></span><br /> </div><br /> </div><br /><br /><br /> <div class=""><br /> <label class="title"><span class="required"></span></label><br /> <div class=""><br /> <b><font color="black">Contact</font></b><input class="large"<br /> type="text" name="input1" required="required"<br /> placeholder="Contact" /><span class="icon-place"></span><br /> </div><br /> </div><br /> <div class=""><br /> <label class="title"><span class="required"></span></label><br /> <div class="item-cont"><br /> <b><font color="black">Email</font></b><input class="large"<br /> type="text" name="input2" required="required" placeholder="Email" /><span<br /> class=""></span><br /> </div><br /> </div><br /> <div class="element-select"><br /> <label class="title"><span class="required"></span></label><br /> <div class="item-cont"><br /> <div class="large"><br /> <b><font color="black">Location</font></b><span><select<br /> name="select" required="required"><br /><br /> <option value="Mumbai">Mumbai</option><br /> <option value="Navi Mumbai">Navi Mumbai</option><br /> <option value="Thane">Thane</option><br /> <option value="Kalyan">Kalyan-Dombivali</option><br /> <option value="Dahisar">Mira Road-Virar</option><br /> <option value="Rest of India">Rest of India</option><br /> </select><i></i><span class="icon-place"></span></span><br /> </div><br /> </div><br /> </div><br /> <div class="submit"><br /> <input type="submit" value="Submit" /><br /> </div><br /> </form><br /> <script type="text/javascript"<br /> src="formoid_files/formoid1/formoid-solid-blue.js"></script><br /> </div><br /> </div><br /></code><br /></pre><br /><h2>Click here view more answers <a href="http://ift.tt/20RXBEd">http://ift.tt/20RXBEd</a></h2>

Nhận xét

Bài đăng phổ biến từ blog này

Align div to bottom of the page in bootstrap

Align elements inside an tag vertically

Javascript is unable to stop page loading