javascript - HTML CSS using fixed elements and resize -

-

i html/css/javascript beginner.

i working on project. using nodejs + websockets. haveing problem styling.

i have 3 fixed elements. need them resize on resize in browser window.

i working on styling in scratchpad.io.

this code have included styling part.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link href="http://fonts.googleapis.com/css?family=corben:bold" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=rancho&effect=shadow-multiple" rel="stylesheet" type="text/css"> <style> body {   padding-top: 5px;   text-align: center;   background: url(http://subtlepatterns.com/patterns/subtle_white_feathers.png);   border: 2px dotted black; }  * {   font-family: 'nobil', georgia, times, serif;   color:black; } #main {   margin:10% 10% 10% 30%;   padding:7% 2% 2% 2%;   background: rgba(160,160,160,0.2);   border-radius:12.5px;   border:1px dotted rgb(200,200,200);  }  #header {   position:fixed;   top:0;   left:0;   margin:0 20 0 20;   padding:0 100 15 5;   width:100%;   height:2.5%;   font-family:'a', georgia, times, serif; }  #title  {   font-family: 'nobil', georgia, times, serif;   margin-top:0;   padding-left:0;   padding-top:20;   font-size:300%;   background: url(http://subtlepatterns.com/patterns/subtle_white_feathers.png);   text-shadow: 7px 7px 1px #ccc;   font-family: 'rancho', cursive; }  #sidebar {   position:fixed;   top:15%;   left:0;   box-shadow: 0 0 1em 0.5em #ccc;   margin:20 50;   background: url(http://subtlepatterns.com/patterns/subtle_white_feathers.png);     border-radius:12.5px;   width:   } #sidebar div {   padding:10 15 20 15;   width:auto;   height:auto;   border-radius:12.5px;   -webkit-box-shadow: inset 0px 0px 100px 20px rgba(117,104,104,0.5);   -moz-box-shadow: inset 0px 0px 100px 20px rgba(117,104,104,0.5);   box-shadow: inset 0px 0px 100px 20px rgba(117,104,104,0.5); } #upbutton {   position:fixed;   top:91%;   left:94%;   padding:10 15 20 15;   width:7;   height:14px;   box-shadow: 0 0 1em 0.5em #ccc;   border-radius:12.5px;   background-color:grey;   border:1px solid black; }  #upbutton img {   position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: auto;    width: 100%;   height: 100%; }  #upimage {   width:5px;   height:5px; }  th {     border-bottom:1px solid rgba(160,160,160,0.5);     font-size:175%; }  #sidebar td {   text-align:left;  }  #sidebar thead {   border-bottom: thick dotted #ff0000; }  #sidebar tfoot {   font-size:75%; }  #messages {   margin-top:-50px;   width:100%;   border:1px solid rgba(160,160,160,0.5); }  #messages td {   padding:10 5 5 30;   border-bottom:1px dotted rgba(160,160,160,0.5); }  thead {   text-shadow: 7px 7px 1px #ccc; }  .name {   width:1%;   font-weight: bold;   border-right: 1px dotted rgba(160,160,160,0.5); } </style> <div>   <a name="top"></a> hiiiiiiiii </div> <div id="header" > <h1 id="title" > enter message below <hr> </h1>   </div>  <div id="sidebar"> <div> <table>   <thead>     <tr>       <th>users</th>     </tr>   </thead>   <tfoot>     <tr>       <td>__________________</td>     </tr>   </tfoot>   <tbody>      <tr>       <td>abc</td>     </tr>     <tr>       <td>keshav</td>     </tr>     <tr>       <td>rachna</td>     </tr>   </tbody> </table>  </div> </div> <a href="#top"><div id="upbutton"><img src="http://cdn.flaticon.com/png/256/26045.png"></div></a> <div id="main" > <table id="messages">   <thead>     <tr>       <th colspan='2' >messages</th>     </tr>   </thead>   <tfoot>     <tr>       <td  colspan='2' >         <hr>           <form action="send();">             <input type="text" name="message" value="enter message">             <input type="submit" value="submit">           </form>       </td>     </tr>   </tfoot>   <tbody>     <tr>       <td class="name">abc</td>       <td>hi</td>     </tr>     <tr>       <td class="name">keshav</td>       <td>holla</td>     <tr>       <td class="name">rachna</td>       <td>hello</td>     </tr>     </tr>   </tbody> </table> </div>

in order make responsive web design it's best use @media. applies attributes when @media (viewport) @ size when using min-width or max-width

look dimensions of specific device if aiming 1 below mentioned common devices.

@media (min-width: 768px) portrait devices , smaller devices @media (min-width: 992px) notebooks , landscape tablets / smartphones @media (min-width: 1200px) large displays

so working example element can go rectangular horizontal square rectangular vertical so: http://jsfiddle.net/czf792r1/2/

nb: resize result browser horizontally watch change


Comments

Post a Comment

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

-
i getting error message , further 1 here: failed read artifact descriptor org.apache.maven.plugins:maven-install-plugin:jar:2.4: even though when go .m2 repository path c:\users\a591024.m2\repository\org\apache\maven\plugins\maven-resources-plugin\2.4 the maven-resources-plugin-2.4.jar file there , maven-resources-plugin-2.4.pom there. have tried delete .m2 repository no luck. far maven not build project desperately need to. any ideas? it seems proxy issue please aad following in setting.xml grabbing lan setting , proxy information. <proxies> <proxy> <id>proxy</id> <active>true</active> <protocol>http</protocol> <host>hostname</host> <port>port</port> </proxy> </proxies> this frequent issue, please see below link well. plugin org.apache.maven.plugins:maven-clean-plugin:2.5 or 1 of dependencies not resolved maven: failed ret...
Read more

Round ImageView Android -

-
Image
i working on android application in doing rounded image view. working fine images, images 160x120 resolution shows oval shaped. code custom imageview given below, please me out here: public class roundimage extends drawable { private final bitmap mbitmap; private final paint mpaint; private final rectf mrectf; private final int mbitmapwidth; private final int mbitmapheight; public roundimage(bitmap bitmap) { mbitmap = bitmap; mrectf = new rectf(); mpaint = new paint(); mpaint.setantialias(true); mpaint.setdither(true); final bitmapshader shader = new bitmapshader(bitmap, shader.tilemode.clamp, shader.tilemode.clamp); mpaint.setshader(shader); mbitmapwidth = mbitmap.getwidth(); mbitmapheight = mbitmap.getheight(); } @override public void draw(canvas canvas) { canvas.drawoval(mrectf, mpaint); } @override protected void onboundschange(rect bound...
Read more

How can I utilize Yahoo Weather API in android -

-
Image
i want develop app using yahoo weather api android. want current , forecast weather details. i have tried different sources (e.g.: https://github.com/survivingwithandroid/weatherlib , getting error weatherlib api android , unable execute activity in android weatherlib ) , getting different errors m unable resplve. there can proper tutorial or guide! error: -17 08:50:48.961 3168-3168/com.survivingwithandroid.weather e/androidruntime﹕ fatal exception: main process: com.survivingwithandroid.weather, pid: 3168 java.lang.runtimeexception: unable start activity componentinfo{com.survivingwithandroid.weather/com.survivingwithandroid.weather.mainactivity}: java.lang.nullpointerexception: attempt invoke interface method 'boolean java.util.list.isempty()' on null object reference @ android.app.activitythread.performlaunchactivity(activitythread.java:2298) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2360) @ android.app.activi...
Read more