create vertical strip in HTML or CSS

Question

I am absolutely beginner in HTML and CSS. What I would like to do is to create a strip in the left hand side of a webpage, similar to this: https://www.inside.com/all

The strip has a number of clickable icons, and when one slides down the page, the strip and logos stay at the same location.

Is there any way to look at the page source and find out how it is implemented? If not, I appreciate any help on how to go about this.

Answer 1

The key is using position: fixed; and height: 100%;.

CSS code

.verticalStrip {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  background-color: grey;
  height:100%;
}

.content {
  padding-left: 250px;
}

HTML Code

<div class="content"> content of the page....</div>

working demo: http://jsfiddle.net/h85er/

Answer 2

If you're using a modern browser such as Chrome, Firefox, or even newer versions of IE, there's an inspector tool you can use. In chrome, just right click any part of the page you want to see the source for and click Inspect Element.

Otherwise, most browsers will allow you to view the page source. Often, it's a simple right click, or an option somewhere in the toolbar.

That navbar can be easily recreated by using a div element at a fixed position at the left side of the screen position:fixed;left:0;top:0;. Then, a list (ul) can be used for individual navigation elements. Naturally, you'll want to use list-style: none; to remove those ugly bullet points.

EDIT: JSfiddle available here