Web Design Somerset :: Web Design Tutorials
 
 

How can we help you?

 
 

Services by business type

 
 

Latest articles

The 7 Most Hated Things on Your Website
Poorly designed websites can lead to high abandonment rates, low conversion rates and poor rankings in the search…
read more…
How to Make the Customer Online Registration Process Plain Sailing
Most of us are used to having to go through a sign up procedure when we buy from a website for the first time, but we…
read more…
9 Ways to Improve Your Website Navigation
Easy and comprehensive navigation within your website is essential. If a website is too complicated to get around,…
read more…
The Benefits of Using Icons in Web Design
Using icons within website design can be an effective way to communicate with users. When a visitor first arrives at…
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
 

All rights reserved © Website Design Company :: Core Media Design Limited 2004 – 2014
Core Media Design Limited is registered in England No 6557241
Small Business Website : Web Design Tutorials

Back to top
 ;

Explore in further details…

  • Multimedia Design
    Multimedia presentations weave realism and excitement into any project and help to deliver an influential message.
  • Training Sessions
    Do your personnel lack the software skills and knowledge they need to help your business grow and develop?
  • Website Design Company
    An all-embracing web development service where breathtaking website design blends with skilled database and ecommerce...

And other…

 ;