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????? I have a QUERY????? 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
Đăng nhận xét