CSS Positioning Elements, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Positioning Elements, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Positioning Elements.


     Back             Next     



CSS Tutorial will guide us now CSS Positioning Elements, we can place an element exactly where we want it on our webpage. Together with floats, positioning gives we many possibilities to create an advanced and precise layout for our website.
The following will be discussed in here now under CSS Tutorial section of Cascading Style Sheet Positioning Elements:


CSS Positioning Element Principle

For a moment imagine a browser window as a system of coordinates like under picture.

Browser window's system of coordinates

The principle behind Cascading Style Sheet positioning is that you can position any box anywhere in the system of coordinates.
Let's say we want to position a head line. By using the box model the head line will appear as follows:
Headline in a box for explanation of positioning
If we want this head line positioned 100px from the top of the webpage and 200px from the left of the webpage, then we could set the following CSS positioning for this element:

Example of CSS Positioning Element Principle

h1 {
	position:absolute;
	top: 100px;
	left: 200px;
}

Result will be as follows for the above CSS Positioning element example.
 
Output of Head line positioned in browser window

As you can see, positioning with CSS is a very precise technique to place elements. It is much easier than trying to use tables, transparent images or anything else in website.

CSS Absolute Positioning

An element which is positioned absolute does not obtain any space in the webpage. It means that it does not leave an empty space after being positioned in a webpage.
To position an element absolutely, the position property is set as absolute. We can subsequently use the properties left, right, top, and bottom to place the box.

Example of Cascading Style Sheet Absolute Positioning

#box1 {
	position:absolute;
	top: 50px;
	left: 50px;
}

#box2 {
	position:absolute;
	top: 50px;
	right: 50px;
}

#box3 {
	position:absolute;
	bottom: 50px;
	right: 50px;
}

#box4 {
	position:absolute;
	bottom: 50px;
	left: 50px;
}

CSS Relative Positioning

To position an element relatively, the property position is set as relative in Cascading Style Sheet. The difference between absolute and relative positioning is how the position is being calculated in web site development.
The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original position on the webpage. Note how the pictures leave empty spaces at their original positions in the document:

Example of CSS Relative Positioning

#element1 {
	position:relative;
	left: 350px;
	bottom: 150px;
}
#element2 {
	position:relative;
	left: 150px;
	bottom: 500px;
}

#element3 {
	position:relative;
	left: 50px;
	bottom: 700px;
}

Example of CSS Positioning Elements

<html>
<head>
<title>CSS Tutorial at Global Guide Line</title>
<style type="text/css">

#header { 
position: absolute; 
top: 0px; 
left: 0px;
width: 100%; 
}

#menu { 
position: absolute; 
top: 175px; 
left: 0px;
width: 100%; 
height: 12px;
background-color: gray; 
color:white;
Font-weight:bold; 
}

#content{ 
position: absolute; 
top: 200px; 
left: 2px;
width: 100%; 
background-color: #FFFFFF; 
color: #000000;
}

</style>
</head>
<body>

<div id="header">
<img src="banner.jpg"
width="100%" height="175" alt="header image at CSS Tutorial">
</div>

<div id="menu">
home | Forum | Services | Tutorials
</div>

<div id="content">

<h1>Online Web Tutorial on CSS</h1>
<p>Learn how to make a web site and manage with CSS</p>
</div>
</body>

Output of CSS Positioning Elements Example

CSS Positioning Elements Example

     Back             Next     


 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 251 visitors are online now