html - Why does my menu not go all the way to the left -


i'm new coding sorry if i'm doing here stupid.

i'm building basic website using html , css. want use 2 navigation bars. 1 on top of screen main navigatio. , 1 on left side navigating through specific page.the first 1 works fine second 1 looks weird. clickable links can't moved further left , therefore sticking out on right. mean:

enter image description here

i'm hovering mouse on "content2"

what doing wrong? here code wrote:

<body>     <nav>         <ul class="navbar">             <li class="navbar"><a class="navbar active" href="index.html">home</a></li>             <li class="navbar"><a class="navbar" href="page1.html">page 1</a></li>             <li class="navbar"><a class="navbar" href="page2.html">page 2</a></li>             <li class="navbar"><a class="navbar" href="page3.html">page 3</a></li>             <li class="navbar"><a class="navbar" href="page4.html">page 4</a></li>         </ul>     </nav>      <div id="contentbar">            <ul class="ucontentbar">             <li class="contentbar"><a class="contentbar" href="#">content1</a></li>             <li class="contentbar"><a class="contentbar" href="#">content2</a></li>             <li class="contentbar"><a class="contentbar" href="#">content3</a></li>             <li class="contentbar"><a class="contentbar" href="#">content4</a></li>             <li class="contentbar"><a class="contentbar" href="#">content5</a></li>             <li class="contentbar"><a class="contentbar" href="#">content6</a></li>             <li class="contentbar"><a class="contentbar" href="#">content7</a></li>         </ul>     </div>      <div id="page">     <p>text</p>      </div>  </body>

and css goes it:

body { margin: 0px; padding: 0px; }  nav { background-color: rgb(50,50,50); font-family: sans-serif; font-size: 20px; height: 60px; width: 100%;  }  ul.navbar { list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; text-align: right; position: fixed; }  li.navbar{ float: left; height: 60px; }  a.navbar {  display: inline-block; padding: 19px 25px; background-color: rgb(50,50,50); text-align: center; color: white; text-decoration: none; }  a.navbar:hover { background-color: black; }  a.active { background-color: rgb(80,80,220); }  #contentbar { background-color: rgb(100,100,100); font-family: sans-serif; font-size: 14px; width: 300px; height: 100%; display: block; position: absolute; }  ul.contentbar { margin: 0; padding: 0; }  li.contentbar { list-style: none;  }  a.contentbar {  left: 0; background-color: rgb(100,100,100); color: white; display: block; width:300px; height: 30px; text-decoration: none;  }     a.contentbar:hover { background-color: black; }  #page {  background-color: rgb(0,200,100); width: 100%; height: 100%; }

seems have typo in ul's classname <ul class="ucontentbar"> padding not being applied.


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more