Sunday, 1 February 2009

Useful tips to design horizontal website layout

In the past weeks I received some messages from my readers which asked to me to dedicate a post about horizontal website layout. So in this tutorial I want to illustrate some useful tips to design this kind of layouts using CSS and HTML code, also adding a nice animated scrolling effect using JavaScript.

A little introduction: Normally websites have a vertical structure with a fixed width and a variable height which depends from the lenght of the content you have within the main layer:



The structure of an horizontal layout is a little bit different respect the previous one: it has a fixed height and a variable (or fixed) width, for example:



How you can do that? It's very simple: create a container layer like this:

<div id="container">...</div>

...and define its layout using CSS code in the following way (choosing an appropriate width and height):

#container{
width:3000px;
height:400px;
}

Now, within the layer #container, create some sections to add the content. You can use a simple <ul> list with some <li> elements like these:




HTML code could be something like the following code:

<div id="container">
<ul id=
"maincontent">
<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box ...</li>
</ul>
</div>


You can add other sections simply adding a new <li> element into the list. The related CSS code is:

#maincontent{
border:0;
margin:0;
padding:0;
}
#maincontent li{
line-style:none;
width:240px;
height
:380px;
padding
:10px;
float:left;
}

Background with fixed position: If you want to add a background picture which doesn't scroll with the main content remember to use a fixed position attribute in your CSS code. For example, if you don't use position:fixed the result, scrolling horizontally the page, will be like this:




But if you use position:fixed your background will remain in the same position on the browser window:



CSS code is something like this:

body{
background:url(mybg.jpg) no-repeat fixed;
}

Animated scrolling: If you want to use an horizontal layout for your website you can add this nice feature to scroll automatically in horizontal your page in a specific position (take a look at this example). How you can see in the previous example, each link send the user to a specific section with a nice animated effect.

To implement this effect I suggest you to try Marco Rosella's Horizontal Tiny Scrolling a very useful script to implement animated horizontal scrolling effect. The only thing you have to do is to add this script in the <head> tag of your page:

<script type="text/javascript" src="thw.js"></script>

...and anchor tags into each <li> element:



HTML code could be something like the following:

<div id="container">
<ul id=
"maincontent">
<li >
<a name="p1" id="p1"></a>
Starting Box
</li>

<li >
<a name="p2" id="p2"></a>
Box 2
</li>


<!-- Add all boxes you want-->
<li >...</li>

<li >
<a name=
"p10" id="p10"></a>
Ending Box
</li>
</ul>
</div>


Now add this layer with scroll buttons:

<div id="scroll-buttons"></div>

...and use this CSS code to fix its position on the browser windows:

#scroll-buttons{position:fixed;}

Add the following links to scroll the page to a specific position:

<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a> |
...


That's all! Download the source code ready to use in your web projects and take a look at this essential live preview:

Download this tutorial Live preview


Horizontal scrolling websites Showcase
Take a look at these horizontal scrolling websites to take inspiration:

- shn.me - Innovation make creativity
- hasrimy.com - A professional web designer
- Dean Oakley - Freelance web designer

No comments:

Post a Comment