html - Floated list lowered below container when viewport resized in Chrome -


i'm experimenting responsive design , media queries create containers cater different viewport sizes. navigation bar consists of logo div , floated list container.

the issue i'm having when viewport less 640px , resize more 640px, floated list disappears - refreshing fixes though. i'm still trying head around media queries , how use them site... suggestions appreciated!

jsfiddle

html

<div class="navigation">     <div class="container">         <div class="logo">             <img src="http://www.placehold.it/100x54"/>         </div>         <ul>             <li><a>services</a></li>             <li><a>work</a></li>             <li><a>contact</a></li>         </ul><!--     --></div> </div> <div class="container">     lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

css

body {     margin: 0;     padding: 0;     font-family: 'source sans pro', sans-serif;     font-size: 14px; }  .container {     margin: 0 auto;     min-width: 290px;      max-width: 960px;       padding: 15px; }  .navigation {     width: 100%;     background: #323232; }  .navigation .container {     padding: 15px;        position: relative; }  .navigation .logo {     height: 54px;     display: inline-block; }  .navigation ul {     float: right;     text-align: right;     font-size: 16px;     padding: 17px 0;     list-style-type: none;     top: 0;     margin: 0; }     .navigation li {     margin-right: 15px;     display: inline-block;     color: #ffffff; }  .navigation li:last-child {     margin: 0;    }  @media screen , (min-width: 400px) { /* larger 320px width less 640px */     .container {          width: 400px;      }  }    @media screen , (max-width: 640px) { /* less 640px */     .navigation .logo {         display: block;          text-align: center;     }      .navigation .container {         padding: 3px 0;                                       }      .navigation ul {         display: block;         width: 100%;         float: none;     }       .navigation li {         display: block;          margin: 0;         text-align: center;         padding: 5px 0;         background: #000000     } }  @media screen , (min-width: 640px) { /* larger 640px width less 960px */     .container {          width: 570px;      }  }    @media screen , (min-width: 960px) { /* larger 960px width */     .container {          width: 960px;      }                 }

the reason it's behaving because div.logo comes before float ul try putting <div class="logo"> after ul.

however when resize browser, on smaller screen logo below menu, can try use position:absolute on ul , remove float:right it, this:

.navigation ul {    display: inline-block;    position: absolute;    right: 0;    top: 15px; }  @media screen , (max-width: 640px) {   .navigation ul {     width: 100%;     position: relative;     top: 0;   } }

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more