Call us: 0845 0944 755

Web Design Somerset :: Web Design Tutorials

How can we help you?

Services by business type

Latest articles

Blogging Brings Big Benefits!
Everyone is on the blogging scene so it seems nowadays, but why? What benefits is blogging bringing the business owner?…
read more…

Why a Regular Website Review is Vital to Maintain a Competitive Edge
It’s easy to think that once your website’s up and running, that’s it; it will work for you, job done, and you…
read more…

The Changing Face of Marketing
In this digital age, marketing budgets are increasingly being re-focused by high-profile companies towards online…
read more…

Scrutinise your Web Stats and Gain the Competitive Edge
You’ve invested in setting up a good quality website and you are doing the right thing by blogging, publishing…
read more…

Why a Mobile Friendly Website is the Latest Must-Have
It is very likely that you, like countless others, access the internet on your mobile phone on a regular basis. And so…
read more…

Google Panda: How to Avoid a Devastating Downgrade
Some people make it their life’s work to get their website to the top of Google. If that’s you, and you were, up…
read more…

Cookie Laws have Changed – Does your Website Comply?
The latest round of web related legislation changes are all about ‘cookies’ - the small files placed in on a…
read more…

Ready-Made Website Solutions
In any area of business, finding something that is affordable yet effective can be difficult. Websites are no…
read more…

Email Communication Regulations Every Business Must Know
Keeping in touch with customers is a vital part of any promotional campaign and using email marketing has become the…
read more…

How to be seen as an Expert: Online
For most people in business, being recognised as a leading authority and voice in a particular sector is a major goal.…
read more…

Advertising Standards Authority: Be Aware of the Changes to Online Marketing Rules
Changes are afoot to the scope of the remit covered by the Advertising Standards Authority (ASA). These changes affect…
read more…

Things to Consider when Setting up your Website
To gain the edge over competitors, an online presence is an essential step forward. But as with anything in the online…
read more…

Corporate Solutions for Online Demands
Whilst all corporate organisations differ, if they have an online presence then one thing remains the same: the need…
read more…

Bring your Website to Life with Flash Animation
Have you ever visited a website and been blown away by its visual effects? If so, the chances are Flash animation has…
read more…

Protect your Business from Copyright Infringement
Copyright is a complicated area and riddled with misunderstandings, especially in the case of internet copyright where…
read more…

Cheap Website Design; DIY or Favour from a Friend. Why you need to say NO!
Working on a website? If you are going down the DIY route, or a friend who knows a friend has said they’ll do it for…
read more…

The Web Design Process: Explained
Web designers are numerous in amount and most make some sort of claim as to why you should choose their services. From…
read more…

Medium Sized Business Solutions – They do Exist
Do you sometimes feel that your business is stuck between a rock and a hard place? Is your business too large for small…
read more…

The Database and how it benefits the Small Businesses
The shift from performing tasks manually to placing the strain on IT systems in business continues to advance. Whether…
read more…

Web Design Tutorials

Category: CSS Tutorials

Go back

Flexible layout using css, percentage and background images

This tutorial will explain how to create css layout based on percentage.
You can download the images used in this tutorial by clicking on the download link below.

Download | Demo

Fist let´s create a structure of our layout.

Copy and paste the following in between the <body></body> tags:

Now we need to format the layout by using css and images.
Place images in the images folder and apply the following css to format the layout:

body {
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
}
#outer {
	width:80%;
	margin:0px auto 0px auto;
	padding:0px;
	background-attachment: scroll;
	background-image: url(images/background_r3_c5.gif);
	background-repeat: repeat-y;
	background-position: right 0px;
	background-color: #B5DE54;
}
#wrapper {
	width:100%;
	margin:0px;
	padding:0px;
	background-attachment: scroll;
	background-image: url(images/background_r3_c2.gif);
	background-repeat: repeat-y;
	background-position: 0px 0px;
}
#header, #header_left, #header_right, #footer_left, #footer_right {
	margin:0px;
	padding:0px;
}
#header {
	position:relative;
	height:70px;
	background-image: url(images/background_r2_c3.gif);
	background-attachment: scroll;
	background-repeat: repeat-x;
	background-position: left 0px;
}
#header_left {
	position:absolute;
	top:0px;
	left:0px;
	width:30px;
	height:70px;
	background-attachment: scroll;
	background-image: url(images/background_r2_c2.gif);
	background-repeat: no-repeat;
	background-position: left 0px;
}
#header_right {
	position:absolute;
	top:0px;
	right:0px;
	width:30px;
	height:70px;
	background-attachment: scroll;
	background-image: url(images/background_r2_c5.gif);
	background-repeat: no-repeat;
	background-position: right 0px;
}
#container {
	margin:0px;
	padding:10%;
	width:80%;
	height:auto;
}
#footer {
	margin:0px;
	padding:0px;
	height:40px;
	position:relative;
	background-attachment: scroll;
	background-image: url(images/background_r5_c3.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
}
#footer_left {
	position:absolute;
	bottom:0px;
	left:0px;
	width:30px;
	height:40px;
	background-image: url(images/background_r5_c2.gif);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: left bottom;
}
#footer_right {
	position:absolute;
	bottom:0px;
	right:0px;
	width:30px;
	height:40px;
	background-attachment: scroll;
	background-image: url(images/background_r5_c5.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}

Now your layout is ready

Written by Web Design Tutorials – Sebastian Sulinski

Category: CSS Tutorials

Go back