ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > CSS Tutorial > Controlling the Display and Position
 

CSS Tutorial - Controlling the Display and Position

    Page 1 of 2
 
 
Overview
 

In this chapter you will learn:

  • What is a box model?
  • What are the properties responsible for controlling the display and position of elements?
  • Clearing the float elements
  • Changing the shape of the cursor
  • Making certain elements invisible
 

This chapter acquaints you with how to control the display and position of the elements. Before getting to understand 'positioning in CSS', you must understand the concept of a box model. 
Each element in the document is considered to be a rectangular area, surrounded by a padding, a border and a margin. This is shown in the image given below:  

 

The CSS positioning properties allow you to specify the left, right, top and bottom positions of an element. The positioning defines the placement of elements on a page. By applying a small set of CSS attributes to the elements that are defined for the page, you can control the precise position of elements.

Various properties which are responsible in controlling the display and positioning with CSS are: 

Position
 

Position property allows you to set the position of the element. The position property can be used in association with the bottom, left, right and top properties. The different positioning schemes are: static, relative, absolute, and fixed.

Static

The element is positioned in a normal flow of the display. Here, you do not use the "left" and "top" properties. It is the default value.

Relative

The element is moved relative to its normal position. It means it is moved at an offset distance relative to the initial  position. The top, left, right, and bottom properties define how many pixels from the top, left, right and bottom respectively of its normal position you want the element to appear.

top

15 px, will move down the element 15 pixels from its usual position, whereas top : -15 px, will move up the element 15 pixels from its usual position.

left

15px will move the element right and negative values will move it left. 

right

15px will have the same effect as with  left: -15px, with relative positioning.

bottom

15px will have the same effect as with the top: -15px, with relative positioning. 

Absolute

The element is positioned anywhere on the page, with an absolute value. Absolute value means the exact pixel value where the element is to appear. You can set the position with the left, right, top, and bottom properties. 

Fixed

The element is fixed at a position, with a fixed value. This element will not scroll or appear on every printed page.

 
Note
(Internet Explorer does not support this property. Only Netscape navigator 6.1 and higher versions support this feature.)
 
Example

p { position : absolute;

                                left : 150px;

                                right : 50px;}

 
 
Clear

Clear property is used in conjunction with float property. Images and text elements that appear in another element are called floating elements.

  • With clear property you can specify whether an element can have other elements floating alongside it or not.

  • You can also specify where an element is to be placed, i.e. on which side the floated elements should be placed.

  • Clear property can have values : none, left, right, both.
    none - This allows floating on either side. Floated elements will flow around the content.
    left - This element doesn't allow floating on its left side. It clears all left-floated elements and places the element underneath.
    right - This element doesn't allow floating on its right side. It clears all right-floated elements and places the element underneath.
    both - This element doesn't allow floating on either side. It clears all floated elements and places the element underneath.

  • By default the clear property is set to none.

     

 
Example
p { clear : none;}

Element has not been cleared from either side.

 

Cursor

This property defines the shape of the cursor, when the mouse is moved over a selected element. The possible values for cursor property are defined below along with their corresponding examples. You can move the mouse over each property and see the difference.

Default

This is the default cursor, it is usually an arrow sign.

Example
p { cursor : default;}
 

Auto

The browser determines the cursor, it is usually a sign resembling 'I'.

Example
p { cursor : auto;}
 

Crosshair

The cursor is rendered as a crosshair. It usually resembles a plus (+)  sign. 

Example
p { cursor : crosshair;}
 

Pointer

The cursor is a pointer indicating link, it usually looks like a 'hand'.

Example
p { cursor : pointer;}
 

Move

The cursor indicates that something is to be moved. It is usually a four-way arrow.

Example
p { cursor : move;}
 

E-Resize

The cursor indicates that an edge is to be moved right-side (east). It is usually an arrow pointing right.

Example
p { cursor : e-resize;}
 

Ne-Resize

The cursor indicates that an edge is to be moved up and right (north-east). It is usually an arrow pointing north-east.

Example
p { cursor : ne-resize;}
 

Nw-Resize

The cursor indicates that an edge is to be moved up and left (north-west). It is usually an arrow pointing north-west.

Example
p { cursor : nw-resize;}
 

N-Resize

The cursor indicates that an edge is to be moved up (north). It is usually an arrow pointing north.

Example
p { cursor : n-resize;}
 

Se-Resize

The cursor indicates that an edge is to be moved down and right (south-east). It is usually an arrow pointing south-east.

Example
p { cursor : se-resize;}
 

Sw-Resize

The cursor indicates that an edge is to be moved down and left (south-west). It is usually an arrow pointing south-west.

Example
p { cursor : sw-resize;}
 

S-Resize

The cursor indicates that an edge is to be moved down (south), usually an arrow pointing south.

Example
p { cursor : s-resize;}
 

W-Resize

The cursor indicates that an edge is to be moved left (west), usually an arrow pointing west.

Example
p { cursor : w-resize;}
 

Text

The cursor indicates text usually rendered as an ' I ' beam.

Example
p { cursor :text;}
 

Wait

The cursor indicates that the program is busy and the user should wait. It usually looks like a watch or hourglass.

Example
p { cursor : wait;} 
 

Help

The cursor indicates that help is available about the element on which the cursor is moved. It is usually rendered as a question mark or a balloon.

Example
p { cursor : help;}
 

 

 
Display

 

This property is used to control the display of a section. The display property have values:

None

The element will not be displayed.

Block

A block box, i.e. a line break before and after the element, will be displayed.

Inline

An inline box, i.e. no line break before and after the element, will be displayed.

List-Item

A list-item marker is added, having a line break before and after the element.

Run-In

The element will be displayed either as an inline or block box depending on the context.  If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. This element is not currently supported by Internet Explorer.

Compact

The element will be displayed either as an inline or block box depending on the context. This element is not currently supported by Internet Explorer.

Table

The element will be displayed as a block level table. It is not currently supported by Internet Explorer.

Inline-Table

The element will be displayed as an inline level table. It is not currently supported by Internet Explorer.

Table-Row-group

The element will be displayed as a group of one or more rows, similar to the HTML <tbody> element. It is not currently supported by Internet Explorer.   

Table-Header-group

The element will be displayed as a group of one or more rows, similar to the HTML <thead> element. It is not currently supported by Internet Explorer.

Table-Footer-group

Here also, the element will be displayed as a group of one or more rows, similar to the HTML <tfoot> element. It is not currently supported by Internet Explorer.

Table-Row

The element is displayed as a table row, similar to the HTML <tr> element. It is not currently supported by Internet Explorer.

Table-Column-group

The element will be displayed as a group of one or more columns, similar to the HTML <colgroup> element. This is not currently supported by Internet Explorer.

Table-Column

The element will be displayed as a column of cells, similar to the HTML <col> element. This is not currently supported by Internet Explorer. 

Table-Cell

The element will be displayed as a table cell, similar to the HTML <td> and <th> elements. This is not currently supported by Internet Explorer. 

Table-Caption

The element will be displayed as a table caption, similar to the HTML <caption> element. It is not currently supported by Internet Explorer.

 
 
Example
p { display : inline;}

Pixel stands for Picture Element. A pixel is the smallest part of the fine-grained mosaic that makes up a monitor display.

 
 
Float
 

The elements simply stack up underneath until thay are placed in some other manner. Floats are boxes that take up an element out of the flow and place it to the left or right of the container block, while other text wraps around them.

  • Possible values for float are: none, left, and right.

None

The element will be displayed naturally in the flow of its page.

Left

The element will be treated as a block element and is placed to the left of the rest of the contents of its parent element.

Right

The element will be treated as a block element and is placed to the right of the rest of the contents of its parent element. By default, the float property is set to none.

 
 
Example
img { float : left;}

The image is placed to the left of the rest of the contents.

 

 

 

 

 
 
Visibility
 

The visibility property determines whether an element is visible or invisible.

  • Visibility property adds dynamic effects on the web page.
  • Even if an element has been made invisible, it still occupies space on the page and other content may not fill that space.
  • Possible values for visibility property are: visible, hidden and collapse.
      Visible - It determines that the element will be visible on the page.
      Hidden - It determines that the element will not be visible on the page.
      Collapse - It has the same effect as hidden, except when applied in conjunction with table elements. The hidden row or column space can be used for other content.
  • By default, elements are visible.
 
 
Example
p { visibility : hidden;}

The text below is hidden, but is occupying space.

The text is hidden.

 
 
Summary
 

In this chapter you have learnt:

  • The box model
  • Setting the position of the element and various positioning schemes possible
  • Changing the shape of the cursor
  • Controlling the display of a section of block
  • Changing the visibility of an element
 
 
Review Questions
 

Fill in the Blanks

  1. According to box model, each element is considered as a rectangular area, surrounded by _____, _____ and _____.
  2. Different positioning schemes possible are ____, relative, absolute and ____.
  3. Clear property is used in conjunction with the _____ property.
  4. The default value for float property is _____.
  5. _____ value of visibility property determines that elements will not be visible on a page.
Solutions
  1. Padding, border and margin
  2. Static, fixed
  3. Float
  4. None
  5. Hidden

True or False

  1. Position property allows you to explicitly move an element at a desired location.
  2. If clear property is set to none, then the elements on either side are cleared.
  3. By default, clear property is set to none.
  4. The default cursor shape shows an 'I' sign.
  5. The default value for visibility property is hidden.
Solutions
  1. True
  2. False
  3. True
  4. False
  5. False
Exercise
Display text using different cursors and positioning properties.
Solution
View Code         View Runtime

 

What's Next

 

The next chapter will acquaint you with the basic concepts of pseudo classes and pseudo elements. The chapter will further elucidate how to add special effects to certain elements.

                Hop over to the next chapter to get a pseudo classes and pseudo elements close-up.


`
   

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2006. All Rights Reserved.