How To PHP - PHP Technology, PHP Tutorial, Database Tutorials, CMS System » css http://www.phpmind.com/blog Future of web development Tue, 25 Oct 2011 21:38:58 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 What are the differences between absolute and relative positioning? http://www.phpmind.com/blog/2010/09/what-are-the-differences-between-absolute-and-relative-positioning/ http://www.phpmind.com/blog/2010/09/what-are-the-differences-between-absolute-and-relative-positioning/#comments Thu, 16 Sep 2010 03:06:58 +0000 om http://www.phpmind.com/blog/?p=894 Absolute

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

Most important thing about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning.

View Code HTML
<html>
<head>
<style type="text/css">
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
 
<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>

Relative

This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”.
A relative positioned element is positioned relative to its normal position. The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned element are often used as container blocks for absolutely positioned elements.
example -

View Code HTML
<html>
<head>
<style type="text/css">
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
 
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>
</body>
</html>

Share

]]> http://www.phpmind.com/blog/2010/09/what-are-the-differences-between-absolute-and-relative-positioning/feed/ 0 What is CSS Image Sprites? http://www.phpmind.com/blog/2010/07/what-is-css-image-sprites/ http://www.phpmind.com/blog/2010/07/what-is-css-image-sprites/#comments Wed, 14 Jul 2010 00:44:07 +0000 om http://www.phpmind.com/blog/?p=724 An image sprite is a collection of images put into a single image.

What is advantage of using image sprite?

  1. Reduce multiple server requests.
  2. Sprites reduce the number of server requests and save bandwidth.
  3. Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).

A real life Example
If you use sprites for a “mouse over” display, the user won’t experience image disappear for a second… and it looks really good when you have heavy graphics in your site.
If you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.

CSS Image Sprites Example Code

View Code CSS
.NotGood{
 
  background:url(sprites.jpg);
 
}
 
.NotGood:hover{
 
  background:url(spritesHover.jpg);
 
}
 
.Good{
 
  background:url(sprites.jpg) 0px 0px;
 
}
 
.Good:hover{
 
  background-position:15px 0px;
 
}

You can use Adobe Photoshop or any other image editing software to determine which area needs to be display.

Share

]]> http://www.phpmind.com/blog/2010/07/what-is-css-image-sprites/feed/ 0