jquery - Overlapping issue within gallery website -
i'm having issue image overlapping footer , navbar when inspecting webpage's responsiveness. attempted use jquery haven't been able make work , feel though solution isn't complicated, can't it.
i'm not sure of effective way provide .png file i'm working here's imgur link: http://imgur.com/a/pejrv
css, html, , js here:
function myfunction() { var x = document.getelementbyid("mytopnav"); if (x.classname === "topnav") { x.classname += " responsive"; } else { x.classname = "topnav"; } } *{ margin: 0; } html { position: relative; min-height: 100%; } body { background: #232526; background: -webkit-linear-gradient(to right, #232526 , #414345); background: linear-gradient(to right, #232526 , #414345); margin: 0em; font-family: 'titillium web', sans-serif; font-size: 12px; } img{ width: auto; height: 100%; } footer{ position: fixed; margin: 0; padding: 0; bottom: 0; width: 100%; background-color: rgba(128,128,128,.3); text-align: center; /*centers of cooter */ max-height: 155px; border-top: 1px solid #232526; } .left, .right{ display: inline-block; list-style-type: none; width: auto; font-size: 100%; vertical-align: top; } .left li{ text-align: right; /*aligns right within center */ color: rgb(192,192,192); text-decoration: none; } .right li{ text-align: left; } footer ul.right li a{ text-decoration: none; color: rgb(192,192,192); } .material-icons.md-14{ font-size: 1.167em; } .sliding-middle-out { display: inline-block; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height: 0.167em; width: 0; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-middle-out:hover:after { width: 100%; } ul.topnav { margin: 0; padding: 0; overflow: hidden; background-color: rgba(128,128,128,.3); display: inline-block; text-align: center; width: 100%; position: fixed; border-bottom: 1px solid #232526; } ul.topnav li{ display: inline-block; text-align: center; } ul.topnav li { color: rgb(192,192,192); padding: 1.167em 1.333em; text-decoration: none; } ul.topnav li a:hover {background-color: #232526;} ul.topnav li a.active {background-color: rgba(228,230,229,.3);} ul.topnav li.icon {display: none;} a.navbar-brand{ text-decoration: none; color: #666666; } .imgcont{ height: auto; max-width: 100%; margin: 0; padding: 4.167em 0 0 0; text-align: center; } ul.imgcont li{ display: inline-block; width: auto; } ul.imgcont li a:hover { background-color: rgba(200,200,200,.1); border: 0.083em solid rgba(0,0,0,.5); border-radius: 5px; } .text_box{ display: inline-block; text-align: left; vertical-align: top; font-size: 28px; color: rgb(192,192,192); transform: translatey(150%); } @media screen , (max-width:760px) { ul.topnav li:not(:first-child) {display: none;} /* makes navbar disapearr */ ul.topnav li.icon { /* creates block toggle */ float: right; display: inline-block; } ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li { display: block; text-align: left; } } @media screen , (max-width:1216px) { /* these here fix overlap issue */ ul.imgcont{ margin: 0; padding: 4.167em 0 12.500em 0; } } @media screen , (max-width:1083px) { ul.imgcont{ margin: 0; padding: 8.333em 0 12.500em 0; } } @media screen , (max-width:897px) { .text_box{ transform: translatey(0%); } } @media screen , (max-width:760px) { ul.imgcont{ margin: 0; padding: 4.167em 0 170px 0; } } @media screen , (max-width:755px) { ul.imgcont{ margin: 0; padding: 4.167em 0 12.500em 0; } .hidden-xs { display: none !important; } } #home.sliding-middle-out:hover:after { background-color:grey; } #homer.sliding-middle-out:hover:after { background-color:black; } #warrior.sliding-middle-out:hover:after { background-color:#c79c6e; } #druid.sliding-middle-out:hover:after { background-color:#ff7d0a; } #priest.sliding-middle-out:hover:after { background-color:#ffffff; } #paladin.sliding-middle-out:hover:after { background-color:#f58cba; } #hunter.sliding-middle-out:hover:after { background-color:darkgreen; } #mage.sliding-middle-out:hover:after { background-color:#69ccf0 ; } #shaman.sliding-middle-out:hover:after { background-color:#0070de; } #warlock.sliding-middle-out:hover:after { background-color:#9482c9; } #rogue.sliding-middle-out:hover:after { background-color:#fff569; } #minions.sliding-middle-out:hover:after { background-color:#c41f3b; } #spells.sliding-middle-out:hover:after { background-color:#a330c9; } #home.sliding-middle-out:hover:after { background-color:black; } #warrior.sliding-middle-out:hover:after { background-color:#c79c6e; } #druid.sliding-middle-out:hover:after { background-color:#ff7d0a; } #priest.sliding-middle-out:hover:after { background-color:#ffffff; } #paladin.sliding-middle-out:hover:after { background-color:#f58cba; } #hunter.sliding-middle-out:hover:after { background-color:#abd473 } #mage.sliding-middle-out:hover:after { background-color:#69ccf0 ; } #shaman.sliding-middle-out:hover:after { background-color:#0070de; } #warlock.sliding-middle-out:hover:after { background-color:#9482c9; } #rogue.sliding-middle-out:hover:after { background-color:#fff569; } #minions.sliding-middle-out:hover:after { background-color:#c41f3b; } #spells.sliding-middle-out:hover:after { background-color:#a330c9; } #footer_msog.sliding-middle-out:hover:after { background-color:black; } #footer_onik.sliding-middle-out:hover:after { background-color:black; } #footer_wotog.sliding-middle-out:hover:after { background-color:black; } #footer_tloe.sliding-middle-out:hover:after { background-color:black; } #footer_tgt.sliding-middle-out:hover:after { background-color:black; } #footer_brm.sliding-middle-out:hover:after { background-color:black; } " href="https://fonts.googleapis.com/icon?family=material+icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=titillium+web"> <link rel="stylesheet" type="text/css" href="../../../cardspoiler.css"> <ul class="topnav" id="mytopnav"> <li><a id="homer" class="sliding-middle-out" href="../../navbar/home.html">cardspoiler</a></li> <li><a id="home" class="sliding-middle-out" href="home.html"><i class="material-icons md-14">home</i>home</a></li> <!-- using googleapis.com stylesheet --> <li><a id="warrior" class="sliding-middle-out" href="warrior.html"><i class="material-icons md-14">usb</i>warrior</a></li> <li><a id="druid" class="sliding-middle-out" href="druid.html"><i class="material-icons md-14">brightness_high</i>druid</a></li> <li><a id="priest" class="sliding-middle-out" href="priest.html"><i class="material-icons md-14">add_circle</i>priest</a></li> <li><a id="paladin" class="sliding-middle-out" href="paladin.html"><i class="material-icons md-14">star_half</i>paladin</a></li> <li><a id="hunter" class="sliding-middle-out" href="hunter.html"><i class="material-icons md-14">my_location</i>hunter</a></li> <li><a id="mage" class="sliding-middle-out" href="mage.html"><i class="material-icons md-14">whatshot</i>mage</a></li> <li><a id="shaman" class="sliding-middle-out" href="shaman.html"><i class="material-icons md-14">opacity</i>shaman</a></li> <li><a id="warlock" class="sliding-middle-out" href="warlock.html"><i class="material-icons md-14">person_outline</i>warlock</a></li> <li><a id="rogue" class="sliding-middle-out active" href="rogue.html"><i class="material-icons md-14">visibility_off</i>rogue</a></li> <li><a id="minions" class="sliding-middle-out" href="minions.html"><i class="material-icons md-14">keyboard_arrow_up</i>minions</a></li> <li><a id="spells" class="sliding-middle-out" href="spells.html"><i class="material-icons md-14">keyboard_arrow_down</i>spells</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:30px;" onclick="myfunction()">☰</a> </li> </ul> <div class="imgcont"> <img src="counterfeit_coin_i.png" alt="counterfeit coin"></a> <div class="text_box"> counterfeit coin <br> cost: 0 <br> type: spell <br> text: gain 1 mana crystal turn only. </div> </div> <footer> <ul class="left hidden-xs"> <li>cardspoiler.com <br> freedom know <br> here bring visual, leaked spoilers of <br> cards love within simple gallery setting.</li> <li><a href="mailto:help@cardspoiler.com" style="text-decoration:none;color:#9b764c;font-size: 10px;">contact us</a> <a href="../../privacy_policy.html" style="text-decoration:none;color:#9b764c;font-size: 10px;">privacy policy</a></li> </ul> <ul class="right"> <li><a id="footer_msog" class="sliding-middle-out" href="msog.html">mean streets of gadgetzan</a></li> <li><a id="footer_onik" class="sliding-middle-out" href="onik.html">one night in karazhan</a></li> <li><a id="footer_wotog" class="sliding-middle-out" href="wotog.html">whispers of old gods</a></li> <li><a id="footer_tloe" class="sliding-middle-out" href="tloe.html">the league of explorers</a></li> <li><a id="footer_tgt" class="sliding-middle-out" href="tgt.html">the grand tournament</a></li> <li><a id="footer_brm" class="sliding-middle-out" href="brm.html">blackrock mountain</a></li> </ul> </footer> <script src="../../../cardspoiler.js"></script>
Comments
Post a Comment