CODEWITHSUNDEEP
htmlcss
noam suissa
noam suissa

Reputation: 468

Fixed sidebar and main page

As I add more content lower on the page, I see that my side bar and main page is not fixed on the page. Basically, I need the side bar to stay where it is as well as the rest of the page (background picture) no matter how much content there is. Hope that's clear enough. Also, I feel like my code has a lot of useless things added to it. If someone doesn't mind letting me know what that is without changing the way the page looks like that'd be great.

html {
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/background2.jpg);
  background-size: contain;
  background-repeat: no-repeat;  
  background-size: 100% 100%;
}

#backgroundCover {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.35;
}

#sideBar {
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: black;
  opacity: 0.7;
}

#navigationToggle {
  width: 30px;
  height: 30px;
  margin: 20px 0 60px 10px;
  background-image: url(png/512/navicon-round-white.png);
  background-size: contain;
}

#topmenuicon {
  width: 30px;
  height: 30px;
  margin: 160px 0 60px 10px;
  background-image: url(png/512/ios7-home-white-outline.png);
  background-size: contain;
}

#topmenuicon:hover {
  cursor: pointer;
  background-color: white;
  background-image: url(png/512/ios7-home-outline.png);
  transition: 0.2s ease-out;
  border-radius: 3px;
}

#menuicon1 {
  margin: 60px 0 0 10px;
  width: 30px;
  height: 30px;
  background-image: url(png/512/ios7-person-white-outline.png);
  background-size: contain;
}

#menuicon1:hover {
  cursor: pointer;
  background-color: white;
  background-image: url(png/512/ios7-person-outline.png);
  transition: 0.2s ease-out;
  border-radius: 3px;
}

#menuicon2 {
  margin: 60px 0 0 10px;
  width: 30px;
  height: 30px;
  background-image: url(png/512/ios7-people-white-outline.png);
  background-size: contain;
}

#menuicon2:hover {
  cursor: pointer;
  background-color: white;
  background-image: url(png/512/ios7-people-outline.png);
  transition: 0.2s ease-out;
  border-radius: 3px;
}

#menuicon3 {
  margin: 60px 0 0 10px;
  width: 30px;
  height: 30px;
  background-image: url(png/512/ios7-world-white-outline.png);
  background-size: contain;
}

#menuicon3:hover {
  cursor: pointer;
  background-color: white;
  background-image: url(png/512/ios7-world-outline.png);
  transition: 0.2s ease-out;
  border-radius: 3px;
}

#menuicon4 {
  margin: 60px 0 0 10px;
  width: 30px;
  height: 30px;
  background-image: url(png/512/ios7-gear-white-outline.png);
  background-size: contain;  
}

#menuicon4:hover {
  cursor: pointer;
  background-color: white;
  background-image: url(png/512/ios7-gear-outline.png);
  transition: 0.2s ease-out;
  border-radius: 3px;
}
<!doctype html>
  <html>
    <head>
      <title>Noam's Website</title>
      <link type="text/css" rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div id="backgroundCover"></div>
      <div id="sideBar">
        <div id="navigationToggle"></div>
        <div id="topmenuicon"></div>
        <div id="menuicon1"></div>
        <div id="menuicon2"></div>
        <div id="menuicon3"></div>
        <div id="menuicon4"></div>
      </div>
    </body>
  </html>

Upvotes: 0

Views: 53

Answers (1)

Johannes
Johannes

Reputation: 67776

Add position:fixed; to #sideBar to fix the sidebar.

Concerning non-moving background, add background-attachment: fixed; to the body-rule

addition/edit after comment:

And add margin-left: 50px to body to prevent its content or background being hidden under the fixed sidebar.

Upvotes: 1

Related Questions