css positioning | Mywebdunia's Blog

Posts Tagged ‘css positioning’

CSS Sprites one way to increase Web Performance

Posted by: Amit Nazare on: July 6, 2009

In: Tips n Travia
Leave a Comment

CSS sprites group multiple images into one composite image and display them using CSS background positioning. By this you can save significant amount of HTTP requests by combining it into one or more sprites and using them by CSS.

Before knowing more about Sprites you need to know why to use CSS Sprites. Now you know that what Sprites are all about(grouping of multiple images), you might be thinking why to combine all those images? isin’t it quicker to use smaller images. I say no, by using smaller images you might be thinking that I am loading the site by a loading faster by loading bits. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of these images use a seperate HTTP request, and more number of these require more time and less efficient is your page.

So lets see now how this is achieved.To achieve this you need to do the following,

1. First and the foremost thing is to group all your images(usually icons and decorative images) into a sprite.
2. Then align these images into one or more lines.
3. Then use this image as a background image of some element and position it to X and Y pixels accordingly.

By doing this you get an increased speed and reduced HTTP requests.

This is the simple technique and easy method to improve your web performance.

Tags: css, css positioning, css sprites

How to make div position fixed

Posted by: Amit Nazare on: April 27, 2009

In: CSS
Leave a Comment

Most of us might have seen to make any div position fixed we normally use css attribute as position:fixed, but this doesn’t work with IE as ususal the crap browser. So to make it compatible with IE here is a solution where we can make the div position fixed. Just copy the below code and try on your system.

HTML Code put this within Body section
<div id=”main”>
<div id=”main1″>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

#main{ width:900px; text-align:left; clear:both; border:1px solid #999999; }

#main1{ width:900px; border-bottom:1px solid #999999; position:fixed; z-index:100; background:#cccccc; height:100px; }

* html div#main1 { position: absolute; }

* html div#main1{ top:expression(eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop : document.body.scrollTop); }

#main2{ width:900px; padding-top:20px; z-index:-1; }

p{ padding:5px; line-height:1.5em; }

</style>

You can see the css *html div#main1 I have used here, which is for Hacking the IE to make the position as fixed. Also the CSS1Mode and scrollTop which makes IE to make the rest of the div scroll top.

Tags: css, css positioning, position:fixed in IE

Mywebdunia's Blog

Posts Tagged ‘css positioning’

CSS Sprites one way to increase Web Performance

How to make div position fixed

Search

Categories

Archives