Scrolling Columns

Template Kit #601

If you visit tech forums much a question you'll see asked a lot is how to remove ugly scrollbars and still allow scrolling on a web page. The question is usually in reference to iframes.

Someone will in most cases post a snippet of css and then it's up to you to figure out how to apply it.

Most go on their merry way thinking they've got their answer until they realize that just a snippet of code isn't going to solve their problem.

To be truthful, I don't understand the attraction to scrolling columns. One advantage is including your navigation system in the header. And then, I guess some just think it makes a web page a bit sexier.

But, as is my customary response, I'll answer the question by providing a working example that you can download and study. Once downloaded you can use the kit to build your website or tear it apart and use what you need.

What's Up Doc?

Now a good 60% of you won't get a thing from this venture because you're viewing this web page on a cellphone.

Desktop, laptop and tablet viewers might prosper.

The kit includes 4 pages, one single column, 2 with side by side scrolling columns and one scrolling beside a static column.

Find the blocks of CSS in the style-601.css style sheet that reference the main, main-single and right-front divisions.

About the Kit

Index.html is a single column. The articles 1 and 3 have adjacent scrolling columns for those who want to pursue some further challenges when using scrolling divisions.

Article 2 presents an example of a scrolling division beside a static division.

Study the style-601.css style sheet and you'll see that you first allow scrolling and then hide the scrollbars.

Just a TAD more than a snippet of code.

Navigation

All of our Free Templates include a navbar system which can be found and downloaded from our Free Navbar collection. We offer horizontal and vertical designs in colored and white versions.

Each of the 00, 200 and 500 series templates have one of these navbars already installed.

Drop Downs

Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.

Nested lists of anchor tags are used to make Multi Tier Drop Down Menus defined using CSS.


Nested List:
<ul>
<li>Item1</li>
<li>Item2
    <ul>
    <li>Sub1</li>
    <li>Sub2</li>
    </ul></li>
<li>Item3</li>
</ul>

Media Queries

Media queries are probably the most important addition to CSS in decades. They are used to make websites responsive, which means they adapt their layout and style settings depending on the viewing size of the device accessing them.

In other words, Media Queries let you apply different styles settings based on screen size, resolution, orientation, or other media features.

Responsive Web Design

The future of web design is in Responsive Web Design That simply means building one website that can be accessed with any device: desktop, laptop, tablet, cell phone and anything in between.

Web pages built using Responsive Web Design techniques will adjust to each different device width or resolution that visits.

What's New in HTML5

Among the many additions to HTML5 are various new block elements that make structuring web pages easier.

Just to name a few: header. footer, section aside and hgroup.