Web-Development-Tutorials Home
Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

MySpace CSS Tutorial HTML Tutorial
MySpace Web Free Hit Counter
Free Javascript Tutorial
MySpace HTML Color Codes Chart
MySpace Color Codes Chart

Web Development Resources

DevTB - Web Developers Toolbox
Bluejacking Tools
Coderlinks: Find free programming resources
Leave Your Link
Share Adsense Revenue
Freakitude Technology Blog
Seo and Marketing Blog
Custom Web Site Designer
FTP Hoster
MobileFsn
MySpace Site
Viruz
Free Webmaster Resource
List link for free
Articles and Content Directory
Mobile Gyan

Web-Development-Tutorials.com

Free Web Development Tutorials for Web Developers
from Beginners to Professionals

CSS Layouts/Positioning Tutorial

CSS positioning properties allow you to position HTML elements exactly where you want them. Before, this needed to be done with the use javascript or HTML image maps. This can now be done entirely with the use of CSS.


CSS Relative Positioning

The following CSS code example shows you how to position an element relative to its normal position.

<html>
<head>
<style type="text/css">
h1.positioning_left
{
position:relative;
left:-30px;
}
h1.positioning_right
{
position:relative;
left:30px;
}

</style>
</head>
<body>
<h1>
This heading is in the normal default position.
</h1>
<h1 class="positiong_left">
This heading is moved 15 pixels to the left of its normal default position.
</h1>
<h1 class="positioning_right">
This heading is moved 60 pixels to the right of its normal default position.
</h1>
<p>
Relative positioning moves an element RELATIVE to its original position.
</p>
<p>
The style "left:-30px" subtracts 30 pixels from the element's original left position.
</p>
<p>
The style "left:30px" adds 30 pixels to the element's original left position.
</p>
</body>
</html>

Click on CSS Layout Example to view the web page the above code produces.


CSS Absolute Positioning

The following CSS code example shows you how to position an element using an absolute value.

<html>
<head>
<style type="text/css">
h1.absolutepositioning
{
position:absolute;
left:50px;
top:50px
}
h1.absolutepositioning2
{
position:absolute;
left:200px;
top:200px
}

</style>
</head>
<body>
<h1 class="absolutepositioning">
Absolute positioning was used to place this heading 50px from the left of the page and 50px from the top of the page.
</h1>
<h1 class="absolutepositioning2">
Absolute positioning was used to place this heading 200px from the left of the page and 200px from the top of the page.
</h1>
<p>
Absolute positioning was used to place both of the headings below.
</p>
</body>
</html>

Click on CSS Layout Example to view the web page the above code produces.


Setting the Shape of an Element

The clip property is used to define a clipping rectangle inside of which the contents of an element are visible. The overflow value decides how the outside of the rectangle's clipping area is treated and can be larger or smaller than the content of the element.

The following CSS code example shows you how to set the shape of an element with the use of the clip property.

<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

</style>
</head>
<body>
<p>
The clip property is here cutting an image:
</p>
<p>
<img border="0" src="csstutorialimage.jpg" width="120" height="151">
</p>
</body>
</html>

Click on CSS Layout Example to view the web page the above code produces.


Setting the Overflow Property Values

The overflow property allows you to determine whether an element should be cut off or not cut off if the specified height and/or width is too large for the specified area.

The allowed overflow property values are: auto, hidden, visible and scroll.

The auto value will tell the web browser to automitacally dispaly scrollbars if the the specified height and/or width is too large for the specified area.

The hidden value will clip the element and hide (not show) any content if it is outside the specified height and/or width is too large for the specified area.

The visible value will display all content, even if it is outside the specified height and/or width is too large for the specified area.

The scroll value will place scrollbars withing the specified area.

The following CSS code example shows how to set and assign the overflow property to scroll.

<html>
<head>
<style type="text/css">
div
{
background-color:#F5F5F5;
width:200px;
height:100px;
overflow: scroll;
}

</style>
</head>
<body>
<p>
The overflow property allows you to determine whether an element should be cut off or not cut off if the specified height and/or width is too large for the specified area.
</p>
<div>
The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. </div>
</body>
</html>

Click on CSS Overflow Example to view the web page the above code produces.


Vertical-Align Property

The vertical-align property allows you to align images or text vertically.

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}

</style>
</head>
<body>
<p>
This image has a vertical-align value of text-top <img class="top" border="0" src="free_css_tutorial.jpg" width="200" height="200" /> inside the paragraph. </p>
<p>
This image has a vertical-align value of text-bottom <img class="bottom" border="0" src="free_css_tutorial.jpg" width="200" height="200" /> inside the paragraph.
</p>
</body>
</html>

Click on CSS Vertical Align Example to view the web page the above code produces.


overlapping elements with the z-index property

The z-index property allows different specified elements to overlap each other. In other words, you decide wich elements overlap one another. This is done by assigning each element a number (z-index). An element with a higher number overlaps an element with a lower number.

In the following CSS code example, the text is overlapping the image. Notice the "-1" behind the z-index.

<html>
<head>
<style type="text/css">
img.bullseye
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

</style>
</head>
<body>
<h1>
This is a Heading
</h1>
<img class="bullseye" src="free_css_tutorial.jpg" width="100" height="100">
<h3>
The default value of the z-index is 0. A Z-index with a negative number has lower priority than the default z-index of zero.
</h3>
</body>
</html>

NOTE: Firefox 1.5.0 does NOT support the use of the negative numbers when using the z-index. If you view this example in Firefox, the image Does Not appear. If you view the example in Internet Explorer, the image appears behind the text.

Click on CSS Z-Index Example to view the web page the above code produces.


In the following CSS code example, the image is now overlapping the text. Notice the "1" behind the z-index.

<html>
<head>
<style type="text/css">
img.bullseye
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}

</style>
</head>
<body>
<h1>
This is a Heading
</h1>
<img class="bullseye" src="free_css_tutorial.jpg" width="100" height="100">
<h3>
The default value of the z-index is 0. A Z-index with a higher number has higher priority than the default z-index of zero.
</h3>
</body>
</html>

Click on CSS Z-Index Example to view the web page the above code produces.