html - Cross-Screen support for navbar -

-

i have created nav bar page not support multiple screens how can make support them?

htm:

<section id="container">     <section id="header">   <span id="icon">icon</span>          <input type="text" name="search_box" id="search_box">         <nav id="dropdown_menu">             <ul>                 <li>dropdown                     <ul>                         <li>item 1</li>                         <li>item 2</li>                     </ul>                 </li>             </ul>         </nav>         <div class="vertical_bar" style="float: right; margin-right: 3%;"></div>         <div id="notifications">    <span id="num_notifs">4</span> l</div>         <nav id="menu">             <ul>                 <li>home</li>                 <li>office</li>             </ul>         </nav>  <span id="logo">website name</span>      </section> </section>

css:

#container {     width: 100 % ;     height: 100 % ;     font-family: sans-serif !important; }  #header {     height: 5%;     width: 100%;     background-color: black;     color: white; }  #header span, div, input, nav {     display: inline-block;     vertical-align: middle;     box-sizing: border-box;     margin: 1%; }  #header#search_box {     margin: 0.5% 10%;     background-image: url(../img/search_icon.png);     background-repeat: no-repeat;     background-size: 20px 20px;  }  #header#logo {     float: right;     margin-right: 7%;     margin-top: 1%; }  #header#menu {     float: right;     margin-right: 7%;     margin-top: 1%; }  #header#menu ul li {     display: inline;     margin: 5px; }  #notifications {     float: right;     margin-right: 7%;     margin - top: 0.5%;     border: 2px solid white;     border-radius: 50%;     width: 20px;     height: 20px;     font-weight: bold;     text-align: center;     padding: 2px;     position: relative; }  #notifications#num_notifs {     font-size: small;     position: absolute;     top: 0;     left: 80%;     background-color: red;     border-radius: 50%;     width: 15px;     height: 15px; }  #header#dropdown_menu {     float: right;     margin-right: 2%;     margin-top: 1%;     text-align: center; }  #header#dropdown_menu ul li: hover ul {     display: block; }  #header#dropdown_menu ul li ul {     display: none; }  #header#dropdown_menu ul li ul li: first-child {     margin-top: 10px; }  #header#dropdown_menu ul li ul li {     margin-bottom: 10px; }

by multiple screens, mean screen resolutions/dimensions, right? or referring browsers? going want check out media queries, these used target different screen sizes..

these media queries use site, followed twitter bootstrap setup seen here:

css

/* large desktop */ @media (min-width: 1200px) { ... }  /* portrait tablet landscape , desktop */ @media (min-width: 768px) , (max-width: 979px) { ... }  /* landscape phone portrait tablet */ @media (max-width: 767px) { ... }  /* landscape phones , down */ @media (max-width: 480px) { ... }

just place css each query, , should work well..

be sure place in head though, eliminate problems retina display:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

edit: media queries supported mobile devices, reference here.

however, ie 6-8 do not support them.. quick fix problem use following below stylesheet:

<!--[if lt ie 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

this poly-fill allow ie6-8 use media queries..


Comments

Post a Comment

Popular posts from this blog

java - Run a .jar on Heroku -

-
i trying run .jar file on heroku, , can't find instructions anywhere on how this. have read wants me compile uploading heroku. possible, , if is, how this? if helps, trying run minecraft craftbukkit server, , don't have pom.xml file yet. you didn't provide details i'll try give , people reaches question way it. first of all, create heroku account , create heroku application (assumed have done that). second, need generate application jar , upload heroku. so, open terminal , install heroku cli (assuming unix terminal): $ sudo npm install -g heroku-cli you need have npm , nodejs installed, can check link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04 once done that, can use npm update node version acceptable heroku-cli: $ sudo npm install -g n $ sudo n 7.10.0 and run: $ sudo npm install -g heroku-cli in order deploy jars, need install deploy plugin: $ sudo heroku plugins:install heroku-cli-deploy ...
Read more

java - Jtable duplicate Rows -

-
Image
when add new rows in jtable duplicate rows many times this method update jtable public final void tableaucomande(){ ((defaulttablemodel)tabcommande.getmodel()).getdatavector().clear(); session s=hibernateutil.getsessionfactory().opensession(); criteria cr1= s.createcriteria(commande.class); list <commande> lcs=cr1.list() ; criteria cr2= s.createcriteria(lignecommande.class); list <lignecommande> lck=cr2.list() ; if(lcs.size()!=0 && lck.size()!=0) { (commande lc:lcs) { for(lignecommande lig:lck){ ((defaulttablemodel)tabcommande.getmodel()).addrow(new object[]{ lc.getid_cmd(),lc.getnumcmd(),lc.getdate_cmd(),lc.getclient().getnomprenom(), lig.getproduit().getlib_prd(),lig.getquantite(),lig.getproduit().getid_prd() }); } } // tabcommande.setrowselectioninterval(tabcommande.getrowcount()-1,tabcommande.getrowcount()-1); } } this code add add data rows displaye...
Read more

validation - How to pass paramaters like unix into windows batch file -

-
i need pass various parameters .cmd file unix format file.cmd -configuration=value -source=value -flag but, try this: startlocal @echo off cls setlocal set cmdline=%* set configuration= set source= set badargs= set validation= goto main :splitargs echo splitargs(%*) if "%*" neq "" ( /f "tokens=1,2,* delims== " %%i in ("%*") call :assignkeyvalue %%i %%j & call :splitargs %%k ) goto :eof :assignkeyvalue echo assignkeyvalue(%1, %2) if /i %1==-configuration ( set configuration=%2 ) else if /i %1==-source ( set source=%2 ) else ( rem append unrecognised [key,value] badargs echo unknown key %1 set badargs=%badargs%[%1, %2] ) goto :eof :validate echo validating set validation=fail if defined configuration ( echo -configuration ok if defined source ( echo -source ok if not defined badargs ( set validation=success ) ) ) goto :eof :main cl...
Read more