Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS Part 5: Advanced Topics

timer

  • Please log in to reply
3 replies to this topic

#1 Lop

Lop

    Speaks fluent binary

  • Just Joined
  • PipPipPipPipPipPipPip
  • 1112 posts

Posted 07 February 2009 - 12:43 PM

CSS Tutorials
Chapter 5: CSS Advanced Topics

In this chapter, we are going to discuss the following topics. Don't get scared by the title "Advanced Topics". These topics are as simple as they sound. Only thing is you would use them only on certain specialized requirements

  • Cursor
  • Position
  • Layer
  • Display
1. Cursor
Gotten tired of the default cursor set that comes with HTML. Here comes the cursors in CSS which lets you customize how the mouse cursor would appear when you point to a particular element. Standard CSS supports upto 17 different properties for cursors. Cursors can be applied to an element using the attribute "cursor". Let us see through an example, 5 different cursors on hyperlinks

<html>
<head>
<style>
.curCrossHair {cursor: crosshair;}
.curRightArrow {cursor: e-resize;}
.curHelp {cursor: help;}
.curMove {cursor: move;}
.curHourGlass {cursor: wait;}
</style>
</head>
<body>
<a href="#" class="curCrossHair">Cross Hair</a><br />
<a href="#" class="curRightArrow">Right Arrow</a><br />
<a href="#" class="curHelp">Help !</a><br />
<a href="#" class="curMove">Move me!</a><br />
<a href="#" class="curHourGlass">Wait</a><br />
</body>
</html>


The output looks like this:
Posted Image

We have thus defined five different cursors. In rich internet applications, using different cursors can enhance user experience. Visit script.aculo.us - web 2.0 javascript

It uses the .curMove style we defined in this chapter. See how user experience is improved because of it.

2. Position
Using the position attribute, you can define how the elements in your HTML page are positioned. The values for the position attribute are

  • 2.1 Static positioning
  • 2.2 Relative positioning
  • 2.3 Fixed positioning
  • 2.4 Absolute positioning

2.1 Static positioning
Static positioning is the default positioning in HTML pages. So declaring a position:static is redundant. It positions the elements as per the normal flow of HTML

2.2 Relative positioning
If you have several different elements that occupy the same place in HTML page, and if you want certain elements to overlap other elements, then relative positioning is the best choice for you. After specifying positioning to be relative, we can then offset the elements using properties like right, top etc. relative positioning is initiated this way position: relative;

2.3 Absolute Positioning
When we use absolute positioning, the element is positioned as a stack to nearest container element. If it does not belong to any container element, it will be positioned to top left of the browser window. It can be specified like... position: absolute

2.4 Fixed Positioning

In fixed positioning, the container of the element is always the browser window. Also, if you desire an element that shouldn't scroll down, for instance, a timer in an online examination page, used fixed positioning. Because elements having fixed positioning do not scroll along with the window. position: fixed;

3. Layers
Now that we have learnt positioning, you may have noticed that in some cases, elements overlap over one another. using the Layers concept in CSS, you can control which element appears on top of the other. In HTML, there is a concept of priority of elements. The element that comes later in the page will contain higher priority compared to the element that comes previously by default. In CSS, this priority can be altered using an attribute called z-index.

The larger the value of z-index, higher will be the priority of that element.

Let us see a sample code that combines the concepts of both positioning and layers

<html>
<head>

<style>
h1
{
position: relative;
top: 30px;
left: 50px;
z-index=2;
}

h2
{
position: relative;
z-index=1;
background-color=black;
color=white;
}

</style>
</head>
<body>

<H1>Now that we have learnt positioning, you may have noticed that in some cases, elements overlap over one another.
Using the Layers concept in CSS, you can control which element appears on top of the other.
In HTML, there is a concept of priority of elements.
The element that comes later in the page will contain higher priority compared to the element that comes previously by default.
In CSS, this priority can be altered using an attribute called z-index.
</H1>
<h2>
The larger the value of z-index, higher will be the priority of that element.
</h2>
</body>
</html>


4. Display
Have you ever seen menu's in HTML pages, that appear and disappear on the basis of user interaction. Well these menu's are controlled through Javascript. Javascript can be utilized to control the display i.e., to hide them and show them during runtime. This can be set in CSS using the display property. We are going to talk about two display properties, display: none and display: block;

display:none: This attribute in simple hides the element from user's view. Later on in code, on some user event, a javascript code can be written which then unhides the display.

display: block: Ever felt frustrated by typing
continuously to break the line. Stop worrying this attribute will automatically break the line.

Lets see an example for the display attribute
<html>
<head>
<style>
h2 { display: none; }
a { display: block; }
</style>
</head>
<body>

<a href='cssAdvancedTopics.html'>CSS Test</a>
<a href='cssAdvancedTopics.html'>CSS Test 1</a>
<a href='cssAdvancedTopics.html'>CSS Test 2</a>

<h2>
I won't be visible until javascript does something to me
</h2>
</body>
</html>


Here is the screenshot:
Posted Image
  • 1

#2 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 07 February 2009 - 12:48 PM

Very nice tutorials Lop! +rep
  • 0

#3 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 07 February 2009 - 03:16 PM

Awesome series although it took you long enoug between 2 and the rest.

+rep
Posted via CodeCall Mobile
  • 0

#4 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 08 February 2009 - 05:10 AM

nice work!
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/






Also tagged with one or more of these keywords: timer

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download