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

.htaccess - ERR_TOO_MANY_REDIRECTS htaccess -

could can explain me .htaccess code doing? rewriterule ([0-9]+)/([^t]{1}[a-za-z0-9_-]{0,})\.([^s]{1}[a-za-z0-9]+)$ ../items/go.php?u=$1/$2.$3 i have folder : mywebsite.com/download/folder1/ .htaccess file in uplevel mywebsite.com/download/ folder contains code above. when access file directly path mywebsite.com/download/folder1/file.mp4 returns error : mywebsite.com redirected many times. try clearing cookies. err_too_many_redirects i tried clear browser cookies issue persist. issue solved when commented out htaccess line above. this rule appears looking specific pattern consisting of: <numbers>/<alphanumeric string not starting t , other conditions applied>.<alphanumeric string not starting s> then redirecting user's browser go.php parsed filename passed file arguments. err_too_many_redirects due infinite redirect loop. without knowing other rewriterule statements present difficult narrow down exact cause. can narrow down
Read more