html - Resizing window issues -
i stuck 1 of school project having trouble solving it. whenever resize window menus collapsed. sharing screenshot , script.
this during maximize window view:
this happen when minimize menu options goes down when resize window:
i sharing script of page, happening on pages. please check script below:
#topnav { height:50px; width:100%; position: relative; display:inline-block; font-size: 14pt; background-color:black; font-family:'times new roman', times, serif; overflow: hidden; } #menu1 { margin-left: 120px; margin-top: 10px; display: block; float: left; color:highlight; overflow: hidden; } #menu1 { color: highlight; text-decoration: none; } #menu2 { margin-top: 10px; margin-right: 120px; display: block; float:right; color: white; position:relative; } #menu2 { color: white; text-decoration: none; } #menu2 a:hover { color: highlight; } .main { min-height: 850px; height:auto; width: 100%; margin: 0 auto -142px; display:inline-block; position:relative; } .clear { height: 100px; } .footer { height: 50px; width: 100%; color: white; text-align: left; display: block; bottom: -1px !important; left: 0; background-color: black; z-index: -1; position:page; } .footer { color: cornflowerblue; text-decoration: none; } #wrapper{ margin-left:auto; margin-right:auto; width:100%; }
<body style="height: 631px"> <div id="wrapper"> <div id="topnav" > <span id="menu1"> <a href="login.aspx" runat ="server">apply audience</a> <a href="~/groups.aspx" runat="server">apply groups</a> </span> <span id="menu2"> <a href="home.aspx" runat="server">home</a> <a href="~/about us.aspx" runat="server">about us</a> <a href="~/contact.aspx" runat="server">contact</a></span> </div> <div class="main"> <asp:contentplaceholder id="maincontent" runat="server"> </asp:contentplaceholder> </div> <div class="clear"> </div> <br /><br /> <div class = "footer"> <a href="privacy.aspx">privacy policy</a> <a href="terms.aspx">terms of use</a> <br /> copyright @ 2017 rights reserved. </div > </div> </body>
set topnav height auto
or whatever suits you. setting @ 50px issue.
#topnav { height:auto; width:100%; position: relative; display:inline-block; font-size: 14pt; background-color:black; font-family:'times new roman', times, serif; overflow: hidden; }
Comments
Post a Comment