Rajat Khare Rajat Khare - 3 months ago 16
CSS Question

Trying to remove extra space from menu created in website

In my code supplied below, I am seeing that either something with my CSS or HTML is wrong because I had created a side menu using the example from http://www.w3schools.com/css/css_navbar.asp. I added this example to my web page and for some reason there is some extra space on the left that is showing and it is not clickable as a link (which it should be). I am also using Aptana Studio 3 for this project and for some reason it is showing in the CSS file an error for

100vh
, but I don't think that is the problem.



html {
background-image: url('myimage.jpg');
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.divSize {
height: 100vh;
width: 100%;
margin: 0 auto;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.6);
}
#navmenu {
float: left;
}
body {
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding 0;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
li a:hover {
background-color: #555;
color: white;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Home</title>
</head>

<body>
<div>

<div align="right" class="divSize">
<img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px">
<div id="navmenu">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#stuff1">Stuff</a>
</li>
<li><a href="#stuff2">Stuff</a>
</li>
<li><a href="#stuff3">Stuff</a>
</li>
<li><a href="#stuff4">Stuff</a>
</li>
</ul>
</div>
</div>

</div>
</body>

</html>




Answer

Typo in padding applied to the ul- fixed it and there you go!

html {
  background-image: url('myimage.jpg');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.divSize {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}
#navmenu {
  float: left;
}
body {
  margin: 0px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  overflow: auto;
}
li a {
  display: block;
  color: #000;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
li a:hover {
  background-color: #555;
  color: white;
}
li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Home</title>
</head>

<body>
  <div>

    <div align="right" class="divSize">
      <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px">
      <div id="navmenu">
        <ul>
          <li><a class="active" href="#home">Home</a>
          </li>
          <li><a href="#stuff1">Stuff</a>
          </li>
          <li><a href="#stuff2">Stuff</a>
          </li>
          <li><a href="#stuff3">Stuff</a>
          </li>
          <li><a href="#stuff4">Stuff</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</body>

</html>

Comments