html - How To Make A Responsive Sidemenu In CSS -

-

i've finished coding website 1024x768 resolution , want add @media queries code sidebar disappears when screen @ width of 980px , stays way down there. have tried adding @media max-width 980 myself not seem working @ all. i've tried in various places on page again, no luck. it's frustrating! code below (sorry if it's long, i'm gonna leave in there avoid questions regarding code).

html:

<head lang="en">     <meta charset="utf-8">     <meta name="viewport" content="width=device-width" />     <title>lakeside books</title>     <link rel="stylesheet" type="text/css" href="masterstyle.css">     <meta name="viewsize" content="width-device-width,initial-scale=1.0">      <!--[if ie]>     <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>     <![endif]-->  </head>  <body> <div id="wrapper">     <div id="sidebar">         <nav id="nav">             <h3 id="welcometext">welcome to<br>lakeside books</h3>             <div id="searchbar">                 <form action="http://www.example.com/search.php">                     <input type="text" name="search" placeholder=" ...search book title" class="searchstyle"/>                 </form>             </div>             <ul>                 <li style="background-color: #333">                     <a href="1index.html" class="link">                         <span style="color: #ed786a">home</span>                     </a>                 </li>                 <li>                     <a href="2catgeories.html" class="link">                         categories                     </a>                 </li>                 <li>                     <a href="http://example.com" class="link">                         bestsellers                     </a>                 </li>                 <li>                     <a href="http://example.com" class="link">                         find                     </a>                 </li>                 <li>                     <a href="http://example.com" class="link">                         contact                     </a>                 </li>             </ul>         </nav>     </div>

css:

html, body { /* ### */     margin:0;     padding:0;     height:100%;     width:100%; } body {     background-color: #fdfdfd;     font-family: arial, "open sans", sans-serif-light, sans-serif, "segoe ui"; } #wrapper {     width: 100%;     height: 100%;     margin:0 0 0 20%; /* ### */ } #sidebar {     background-color: #212528;     position: fixed;     width: 20%;     height: 100%;     top: 0;     left: 0;     overflow: hidden;     text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1); } #nav {     color: #dadada;     display: block;     max-width: 100%; } #nav ul {     padding-left: 0; } #nav li {     list-style-type: none;     margin: 0;     padding: 0.75em 0 0.75em 0;     text-align: center;     max-width: 100%; } #nav li:hover {     background:#333; } #nav li {     display: block;     padding: 0.5em 0; } .link {     text-align: right;     margin-right: 25%;     letter-spacing: 1px;     display: block; } #nav li a:link{     color: #dadada;     text-decoration: none; } #nav li a:visited{     color: #dadada;     text-decoration: none; } #nav li a:hover{     color: #dadada;     text-decoration: none; } #nav li a:active{     color: #dadada;     text-decoration: none; } #welcometext {     text-align: center;     /*font-style: italic;*/     text-transform: uppercase;     font-size: 1em;     margin-top: 2em; } #searchbar {     width: 70%;     margin-left: auto;     margin-right: auto;     padding: 1em 1em 0.5em 1em;     text-align: right; } #searchbar .searchstyle{     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px; } #searchbar input {     max-width: 95%; }  /*-------media styles-------*/  @media , (max-width: 980px){     #sidebar{         float: none;     } }


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more