Today we will demonstrate adding fixed style elements to your microsite using standard CSS properties. This is useful to display special offers or promotions you wish to remain constant as your users navigate your site. An example of a fixed style element is shown below.

This example is accomplished via fixed positioning of a div element which has been styled using a CSS class. This will enable us to lock in a specific piece of content, an ad or offer for example, when scrolling between pages of your project.

The class is defined as follows:

#foo {
position: absolute;
top: 0;
right: 0;
z-index: 3;
}

As you can see, we are fixing the location and position to where we want to display the image. Also, the z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order. This element is now fixed and will not be effected by horizontal scrolling of the pages of your microsite, allowing you to present an asset continuously as the user navigates through your pages. You can hyperlink this asset to a special offer for one of your products or swap it out as the user visits each section. The choice is yours.

Once you’ve referenced the class from a div, the assets will render whenever a user visits the page.

<div id="foo"><img src="bar.png" /></div>

You may consider extending this example to declare the image reference in your CSS. There are many other advantages to using divs and CSS to stylize your presentation, but now you will be able to fix the position of div elements using CSS.

We hope this tutorial demonstrates one way standard coding conventions can be creatively implemented to enhance user experience for iPhone visitors. Have another idea? Let us know.

-Shaun Mackey

(1 votes, average: 5 out of 5)

 Loading ...