html - Horizontal bar with overflow hidden being weird -


i made bar (nav2) scrollable if it's not enough screen space, seems weird (also because it's first time i'm doing such thing horizontal scrollable bar), ul going somewhere in top, , doesn't come down, tried float: left, works, ul not centered in middle (that's important!)

body { font-family: 'clear sans', verdana, sans-serif; margin: 0; }            #nav1 {      width: calc(100% / 3);      height: 40px;      line-height: 40px;      background-color: black;      float: left;      }            #nav2 {      width: calc(100% / 3);      height: 40px;      background-color: red;      float: left;      overflow: scroll;            }            #nav3 {      width: calc(100% / 3);      height: 40px;      background-color: yellow;      float: left;      }                  #nav2 ul {      list-style-type: none;      padding: 0;      margin: 0;      display: block;            height: 40px;      float: left;      }            #nav2 ul li {      display: inline;      color: black;      text-decoration: none;                  }            #nav2 ul {      padding: 5px 17px;      text-decoration: none;      color: white;      }            @keyframes sin {        0% {transform: rotate(0deg)}        100% {transform: rotate(360deg)}      }            #yvelogo {      margin-left: 17px;      padding: 0;      height: 20px;      display: inline-block;      vertical-align: middle;      line-height: normal;      }            #yvelogo {      border: 0;      }
<!doctype html>      <html>       <head>        <meta charset="utf-8">        <title>yvemiro</title>        <meta name="author" content="hate">        <meta name="description" content="description gogel">        <meta name="keywords" content="yve,miro,blog">        <link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">       </head>       <body>        <div id="navbar">        <div id="nav1"><a href="#"><img id="yvelogo" alt="eeh, ie or what" src="http://static.tumblr.com/zicio7x/vtfnvi4e4/yvelogowhite.svg"></a></div>        <div id="nav2">        <ul>      <li><a href="#">blog</a></li><li><a href="#">stuff</a></li><li><a href="#">me</a></li><li><a href="#">ask</a></li><li><a href="#">archive</a></li>      </ul>      </div>        <div id="nav3"></div>        </div>       </body>      </html>

$(document).ready(      function() {         $("#nav2").nicescroll();      }    );
body { font-family: 'clear sans', verdana, sans-serif; margin: 0; }            #nav1 {      width: 33%;      height: 40px;      line-height: 40px;      background-color: black;      float: left;      }            #nav2 {      width: 34%;      height: 40px;      background-color: red;      overflow: hidden;      display: inline-block;      vertical-align: middle;      }            #nav3 {      width: 33%;      height: 40px;      background-color: yellow;        float: right;      }                  #nav2 ul {      list-style-type: none;      padding: 0;      margin: 0;      display: block;            }            #nav2 ul li {      display: inline;      color: black;      text-decoration: none;                  }            #nav2 ul {      padding: 5px 17px;      text-decoration: none;      color: white;      }            @keyframes sin {        0% {transform: rotate(0deg)}        100% {transform: rotate(360deg)}      }            #yvelogo {      margin-left: 17px;      padding: 0;      height: 20px;      display: inline-block;      vertical-align: middle;      line-height: normal;      }            #yvelogo {      border: 0;      }        @media (max-width:990px) {      #nav2 {      overflow-y: hidden;      overflow-x: scroll;      }      }
<!doctype html>      <html>       <head>        <meta charset="utf-8">        <title>yvemiro</title>        <meta name="author" content="hate">        <meta name="description" content="description gogel">        <meta name="keywords" content="yve,miro,blog">        <link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>         <script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js">           </script>       </head>       <body>        <div id="navbar">        <div id="nav1"><a href="#"><img id="yvelogo" alt="eeh, ie or what" src="http://static.tumblr.com/zicio7x/vtfnvi4e4/yvelogowhite.svg"></a></div>        <div id="nav2">        <ul>      <li><a href="#">blog</a></li><li><a href="#">stuff</a></li><li><a href="#">me</a></li><li><a href="#">ask</a></li><li><a href="#">archive</a></li>      </ul>      </div>        <div id="nav3"></div>        </div>       </body>      </html>

this should fix bit. if need vertical centering, can revise once more.

edit: added custom scrollbar plugin , jquery. more information editing scrollbar can found @ plugin's official website here


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more