IT SOLUTIONS
Your full service technology partner! 
-Collapse +Expand
Design
Search Design Group:

Advanced
-Collapse +Expand Design Store
PRESTWOODSTORE

Prestwood eMagazine

April Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite DesignCascading St...   Print This    All Groups  
  From the January 2016 Issue of Prestwood eMag
 
Design Cascading Style Sheets (CSS):
CSS-P: Demystifying HTML Element Positioning Contexts
 
Posted 17 years ago on 1/31/2003 and updated 4/23/2008
Take Away: The purpose of this article is to show how to use Cascading Style Sheets to control the layout of nested HTML elements on a page, and to demystify the confusing absolute and relative element positioning scheme used by the browser.

KB100099

CSS-P: Demystifying HTML Element Positioning Contexts

By Evan Egalite

Introduction

The purpose of this article is to show how to use Cascading Style Sheets to control the layout of nested HTML elements on a page, and to demystify the confusing absolute and relative element positioning scheme used by the browser.

The Problem with HTML Tags

HTML tags become a problem when you use them to manage both content and how the content is displayed.  Consider the following HTML code:

 

This is a sample sentence, fiend.

 

Let's say we want to apply bold formatting to the word "˜fiend'.  We simply add the b (bold) HTML tag.

 

  

This is a sample sentence, fiend.

  

 

Now let's say we want to apply italic formatting to the whole sentence.

 

  

This is a sample sentence, fiend.

  

 

We would also like a certain font and font size.

 

  

This is a sample sentence, fiend.

  

 

You can see how this can become a problem.  Every time you want to add a new style, you have to add another set of formatting tags.  The amount of formatting is proportionally to the number of formatting tags.  HTML code written this way is difficult to read and maintain.

 

If we could separate the content code from the presentation code, then we could centralize the formatting code is a separate location -- like a file.  Then whenever we wanted to change the way the content is presented, we could simply modify the formatting code.  Luckily, such a technology exists, it is called Cascading Style Sheets (CSS).

 

Instead of using tags to apply formatting, we create style sheet rules and then bind them to tags containing the content.  The following code applies the same formatting, but uses style sheets:

 

  

     

  

  

     

This is a sample sentence,

         class="myBoldFont">fiend.

  

Cascading Style Sheets

Cascading Style Sheets (CSS) govern how content is presented on the page.  The main purpose of CSS is to control the values of the padding, border, and margin properties of an element.  Style sheets allow you to bind formatting and positioning properties to groups of elements, or individual elements.

 

Using style sheets is a two step process.  First, define the style sheet rules within a style tag.

 

  

     

  

  

     

This is a sample sentence,

         class="myBoldFont">fiend.

  

 

Style sheet rules can be defined with the following four methods:

1.       Apply rule to all instances of a type of HTML element

2.       Apply rule to all instances of a subgroup of a type of HTML element (subgroup selectors)

3.       Apply rule to all instances of a type of HTML element in the [containment] context of other HTML elements (contextual selectors)

4.       Apply rule to any arbitrary HTML element (free-range selector).

 

This example employs free-range selectors (method #4).  Note how the name of each rule is prefixed with a dot.

 

Next, bind the rule names to the elements.

 

  

     

  

  

     

class="myFont">This is a sample sentence,

         class="myBoldFont">fiend.

  

 

The class attribute is used to bind the style sheet rule to the element.  Notice the dot is omitted when binding.

DIV and SPAN Tags

The most important block-level element is the DIV tag, which "creates a container shaped like a block that begins at the starting point of one line and ends with a line break" (66).  DIV allows us to create a custom block-level element.

 

Another useful element is the SPAN tag, which is the same as a DIV tag except that it does not end in a line break.  SPAN is used to apply styles to a section of text within a sentence.

CSS-P: Absolute and Relative Positioning

CSS-Positioning (CSS-P) is an extension to CSS that manages the positioning of content on the screen.  The only style sheet rule we will treat is position, which is at the heart of absolute and relative element positioning.

Absolute Positioning

 

By default, the browser BODY tag defines a positioning context with the coordinates (x,y)=(0,0) at the top left corner of the screen.  Let's say we want to position a string of text at the coordinates (30,30).  Define the following style sheet rule:

 

  

  

  

      This is a text string.

  

 

The absolute attribute tells the browser to position the string at coordinates (30,30) in its current positioning context.  Remember that the BODY tag is currently the positioning context for the string.  Now nest the string within a new positioning context -- a DIV tag -- and position it at (20,20).

 

  

  

  

     

         This is a text string.

     

  

 

It is important to remember this point about absolute positioning.  When an element acts as a container for another element, or parent, it spawns a new positioning context.  The left and top coordinates of its child elements are relative to the parent's left/top coordinates, so long as they're absolute.

 

In the example the string's coordinates are relative to the positioning context of its DIV parent element.  This explains why the string is now 50 (30 + 20) in the x and y directions from the top of the page.

 

Relative Positioning

Dynamic HTML sums up the difference between absolute and relative positioning.

 

Whereas an absolute-positioned element adopts the positioning context of its HTML element parent, a relative-positioned element adopts the positing context of the element's normal (un-positioned) location with the document's content flow. (69)

 

This means that a child element's coordinates are not relative to left top coordinates of its parent element, but relative to the top left coordinates of where the next content block would go.  Let's clear it up with an example.  Consider the following:

 

  

      You are indeed a sick fiend.

  

 

Here is the output in Explorer:

 

 

 

Now consider this code:

 

  

      You are indeed a sick fiend.

  

 

Here is the output in Explorer:

 

Construction of the Sample Page

We begin the sample page by creating a positioning context for the all of the elements in the form.  This is accomplished by adding the style sheet rule and the DIV tag.  We also offset the form and x and y distance of 90 from the origin of the page.

 

  

     

  

  

     
        

        

     

  

 

Next create a DIV block for each of the first three label/textbox pairs -- referred to as a "˜fields' -- and a style sheet rule that adds padding above and below the field.  Without the padding, the fields would be vertically crunched together, which is harder on the eyes.

 

  

     

  

  

     

        
           

           

           

           

           

           

        

     

  

 

Now use relative positioning to create a gap of white space between each label and its associated textbox.  Add the style sheet rule called textboxOffset.  Using the relative attribute for the position rule creates a positioning context beginning where the content would normally flow after the label.  Next, bind the input (button) tag to the textboxOffset rule.

 

  

     

  

  

     

        

           

               First name:

              

           

           

               Last name:

              

           

           

               Age:

              

           

        

        

     

  

 

The last part is tricky.  We want to place two buttons at the bottom right corner of the form.  To do this, we will group the buttons in a SPAN element and offset relative to the "˜Occupation' textbox.

 

Add another style sheet rule for this positioning context and give it the very descriptive name, buttonOffsetFromBottomTextbox.   This rule uses relative positioning, and offsets the element in the left down directions.  Next, wrap the input (button) tags in a SPAN tag and bind it to the buttonOffsetFromBottomTextbox style sheet rule. 

 

Notice we use a SPAN tag and not a DIV tag.  Remember that a DIV tag adds a line feed.  If we use a DIV instead of a SPAN, then the positioning context would be relative to the beginning of the next line next line!

 

  

  

     

        

           

               First name:

              

           

           

               Last name:

              

           

           

               Age:

              

           

           

               Occupation:

              

                 

                    

                       

                       

                    

              

           

        

     

  

 

Below is the finished page:

 

 

Conclusion

 

This article offers a tiny glimpse into how powerful style sheets are.  The real power comes when you use style sheets to achieve cross-browser compatible dynamic HTML.  Hopefully, this article has given you a step in the right direction.

Works Cited

 

 

Goodman, Danny.  Dynamic HTML: The Definitive Reference. California: O-Reilly & Associates, Inc.. 1998.


Comments

0 Comments.
Share a thought or comment...
 
Write a Comment...
...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.


Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P136A1
Enter key:
Article Contributed By Evan Egalite:
Visit Profile

 KB Article #100099 Counter
14570
Since 4/2/2008
Go ahead!   Use Us! Call: 916-726-5675  Or visit our new sales site: 
www.prestwood.com


©1995-2020 Prestwood IT Solutions.   [Security & Privacy]