on website have whitespace between 2 google doodle iframes , can't rid of it. want space large space between pacman , soccer, way large.
tags aren't causing , not sure whether problem in css or html. in advance. website at: http://blogs.ggs.wa.edu.au/strive/ryan/imemory/googledoodles.html
<html lang=en> <div class="webcontainer"> <div class="articles"> <div class="heading"> <head> <title> imemory - games </title> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png"> <link rel="manifest" href="images/manifest.json"> <meta name="msapplication-tilecolor" content="#ffffff"> <meta name="msapplication-tileimage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> <meta name="description" content="free web app designed organise , memorise content input own account can access anywhere , anytime"/> <meta name="keywords" content="organise, customize, memorise"/> <meta name="author" content="ryan bradley"/> <link rel="stylesheet" href="styles/style.css" type="text/css"/> <script src="//load.sumome.com/" data-sumo-site-id="159e737b29bca598fa43ac7c7405dc459eac8999f385fc0254a2ca7043489618" async="async"> </script> </head> </div> <body> <div class="center"> <div class="topbar"> </div> <div class="socialmedia"> <script type="text/javascript"> function newpopup(url) { popupwindow = window.open( url,'popupwindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a class="fb" href="javascript:newpopup('https://www.facebook.com/imemorywebapp');"><img src="images/facebook_logo_sml.png" alt="https://www.facebook.com/imemorywebapp" title="click here visit our facebook page..."/></a> <script type="text/javascript"> function newpopup(url) { popupwindow = window.open( url,'popupwindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a class="g" href="javascript:newpopup('https://plus.google.com/117832833332750535434/posts');"><img src="images/gedit.png" alt="https://plus.google.com/117832833332750535434/posts" title="click here visit our google plus page..."/></a> <script type="text/javascript"> function newpopup(url) { popupwindow = window.open( url,'popupwindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a class="twitter" href="javascript:newpopup('https://twitter.com/imemorywebapp');"><img src="images/twitteredit.png" alt="https://twitter.com/imemorywebapp" title="click here visit our twitter page..."/></a> <script type="text/javascript"> function newpopup(url) { popupwindow = window.open( url,'popupwindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a class="pinterest" href="javascript:newpopup('https://www.pinterest.com/imemorywebapp/');"><img src="images/pinterestedit.png" alt="https://www.pinterest.com/imemorywebapp/" title="click here visit our pinterest page..."/></a> </div> <br/> <div class="nav"> <ul class="nav nav-pills2"> <li class="#"><a href="index.html">home</a></li> <li class="#"><a href="about.html">about</a></li> <li class="#"><a href="contact_us.html">contact</a></li> <li class="#"><a href="sign_up.html">sign up</a></li> <li class="#"><a href="store.html">store</a></li> <li class="active"><a href="#" onclick="return false;">games</a> <ul class="subnav"> <li class="ready"><a href="googledoodles.html" onclick="return false;">google doodles</a></li> <li><a href="scratchgames.html">scratch games</a></li> <li><a href="yourgames.html">your games</a></li> <li><a href="javascript:newpopup('https://scratch.mit.edu/scratch2download/');">download scratch</a> <script type="text/javascript"> function newpopup(url) { popupwindow = window.open( url,'popupwindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> </li> </ul> </li> <li class="#"><a href="sign_in.html">sign in</a></li> </ul> </div> <br> <div class="main"> <br> <br> <div class="googledoodles"> <iframe class="pacman" src="https://www.google.com/logos/2010/pacman10-hp.html" frameborder="0"></iframe> <br/> <br/> <br/> <iframe class="doodle" src="https://www.google.com/logos/2012/football-2012-hp.html" frameborder="0"></iframe> <br/> <br/> <br/> <iframe class="doodle" src="http://www.google.com/logos/2012/basketball-2012-hp.html" frameborder="0"></iframe> <br/> </div> <br/> <div class= "footer"> <hr class="footerline"/> <p class="italic"> © 2015, imemory | rights reserved <br/> created ryan bradley <br/> special etip 2015, jackie hildebrand , shane crosby <br/> <br/> </p> <!-- start: ©2015 tracemyip.org service code (100902-07172015)- not modify //--> <div> <script type="text/javascript" src="//s3.tracemyip.org/tracker/lgurl.php?stlvar2=1301&rgtype=4684nr-ipib&pidnvar2=32777&prtvar2=6&scvvar2=12"> </script><div style="line-height:0px;"><a href="http://www.tracemyip.org/"><img src="//log.tracemyip.org/tracker/script.gif" alt="track ip" style="border:0px;"> </a></div><noscript><img src="//s3.tracemyip.org/tracker/1301/4684nr-ipib/32777/6/12/ans/" alt="track ip" style="border:0px;"></noscript></div> <!-- end: tracemyip.org service code //--> <br/> </div> </div> </body> </div> </div> </div> </html> css
.doodle { position: relative; height: 61%; width: 83%; transition: .2s ease-in-out; } .doodle:hover { transform: scale(1.2) ; } .pacman { position: relative; height: 41%; width: 65%; transition: .2s ease-in-out; } .pacman:hover { transform: scale(1.2) ; }
this has height of .doodle class , lot of <br> tags. changed:
.doodle { position: relative; height: 61%; width: 83%; transition: .2s ease-in-out; } to
.doodle { position: relative; height: 225px; width: 83%; transition: .2s ease-in-out; } and removed of <br> between iframes , fixed issue experiencing.
Comments
Post a Comment