Friday, November 11, 2011

CSS Positioning


The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1 {   
position:static;  }



If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let's move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {   
left:-40px;  }  

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.


When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the top right of the page:

#div-1a {   
width:200px;  }  

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the top right corner of the page. It's nice to be able to position things directly the page, but it's of limited value.

What I really want is to position div-1a relative to div-1. And that's where relative position comes back into play.

  • There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") then the width will be based on the parent element instead of on the positioning element.
Position:Relative + Position:Absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {   
position:relative;  }  

#div-1a {   
width:200px;  }  
Two Column Absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {   
position:relative;  }  

#div-1a {   
width:200px;  } 

 #div-1b {   
width:200px;  }  

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?



For variable height columns, absolute positioning does not work, so let's come up with another solution.

We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it's the only tool we have).

#div-1a {   
 width:200px;  }  
float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {  
width:150px;  }  

#div-1b {   
width:150px;  }  

float columns with clear

Then after the floating elements we can "clear" the floats to push down the rest of the content.

#div-1a {   
 width:190px;  }  

#div-1b {   
width:190px;  }  

#div-1c {   
clear:both;  }  

Tuesday, June 14, 2011

New Markup Elements for HTML5

New Markup Elements

New elements for better structure:

Tag Description
<article> For external content, like text from a news-article, blog, forum, or any
other content from an external source
<aside> For content aside from the content it is placed in. The aside content should
be related to the surrounding content
<command> A button, or a radiobutton, or a checkbox
<details> For describing details about a document, or parts of a document
<summary> A caption, or summary, inside the details element
<figure> For grouping a section of
stand-alone content, could be a video
<figcaption> The caption of the figure section
<footer> For a footer of a document or section, could include the name of the author, the
date of the document, contact information, or copyright information
<header> For an introduction of a document or section, could include navigation
<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main
heading of the section, and the others are sub-headings
<mark> For text that should be highlighted
<meter> For a measurement, used only if the maximum and minimum values are known
<nav> For a section of navigation
<progress> The state of a work in progress
<ruby> For ruby annotation (Chinese notes or characters)
<rt> For explanation of the ruby annotation
<rp> What to show browsers that do not support the ruby element
<section> For a section in a document. Such as chapters, headers, footers, or any
other sections of the document
<time> For defining a time or a date, or both
<wbr> Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag Description
<audio> For multimedia content, sounds, music or other audio streams
<video> For video content, such as a movie clip or other video streams
<source> For media resources for media elements, defined inside video or audio
<embed> For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description
<canvas> For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description
<datalist> A list of options for input values
<keygen> Generate keys to authenticate users
<output> For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element's type attribute has many new values, for
better input control before sending it to the server:

Type Description
tel The input value is of type telephone number
search The input field is a search field
url The input value is a URL
email The input value is one or more email addresses
datetime The input value is a date and/or time
date The input value is a date
month The input value is a month
week The input value is a week
time The input value is of type time
datetime-local The input value is a local date/time
number The input value is a number
range The input value is a number in a given range
color The input value is a hexadecimal color, like #FF8800

Friday, March 25, 2011


നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് HTML. ഈ അടുത്ത് ഇറങ്ങിയ HTML5 ആണ് HTML -ന്റെ പരിഷ്കരിച്ച അവസ്സന പതിപ്പ്. ഒരുപാട് പുതിയ ടാഗുകളും എപിഐ കളും ഉള്‍ക്കൊള്ളിച്ചുകൊണ്ട് വളരേ നൂതനമായൊരു ബ്രൗസിംങ് അനുഭവം പ്രദാനം ചെയ്യാന്‍ HTML5 നു കഴിയും എന്നു വേണം കരുതാന്‍. HTML 4.01, XHTML 1.0 , DOM Level 2 HTML ഇവയ്ക്കു ശേഷം ഇറങ്ങിയ അടുത്ത വെബ്‌സ്റ്റാന്‍‌ഡേര്‍ഡായിട്ടാണ്‌ HTML5 ഇറങ്ങിയിരിക്കുന്നത്. Flash, Silverlight, Java തുടങ്ങിയ RIA Technologies നെ കുറിച്ചുള്ള വേവലാതി ഇനി വേണ്ട. ഇവ സപ്പോര്‍‌ഡ് ചെയ്യാനുതകുന്ന ടാഗുകളും അതിനു വേണ്ട അപിഐ കളും HTML5 നോടൊപ്പം കൂട്ടിച്ചേര്‍ത്തിരിക്കുന്നു. ഔദ്യോഗികമായി ഇതു പുറത്തിറങ്ങിയെങ്കിലും HTML5 സ്റ്റാന്‍ഡേഡൈസേഷന്‍ വരും വര്‍ഷങ്ങളിലും തുടരും. എല്ലാ ബ്രൗസറുകളും HTML5 ലെ എല്ലാ ടാഗുകളെയും സപ്പോര്‍ട്ട് ചെയ്‌തു തുടങ്ങിയിട്ടില്ല. എങ്കിലും മോസില്ല, ഗൂഗിള്‍ ക്രോം എന്നിവയില്‍ HTML5 ശക്തി വളരേ പ്രകടമായി കാണാവുന്നതാണ്. ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ എന്ന മൈക്രോസോഫ്‌റ്റ് ബ്രൗസറിന്റെ പരിഷ്‌കരിച്ച പതിപ്പായ ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ 9 - ഇല്‍ ആണ് HTML5 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.
താഴെ HTML ടാഗുകളും അതില്‍ പുതിയതായി ചേര്‍ത്ത HTML5 ടാഗുകളേയും കാണിച്ചിരിക്കുന്നു. അധികവായനക്കായി എന്ന സൈറ്റിലേക്കുള്ള ലിങ്കും കൊടുത്തിട്ടുണ്ട്.

Tag Description
<!--...--> Defines a comment
<!DOCTYPE>  Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<acronym> Not supported in HTML5.
<address> Defines an address element
<applet> Not supported in HTML5.
<area> Defines an area inside an image map
<article>New Defines an article
<aside>New Defines content aside from the page content
<audio>New Defines sound content
<b> Defines bold text
<base> Defines a base URL for all the links in a page
<basefont> Not supported in HTML5.
<bdo> Defines the direction of text display
<big> Not supported in HTML5.
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<button> Defines a push button
<canvas>New Defines graphics
<caption> Defines a table caption
<center> Not supported in HTML5.
<cite> Defines a citation
<code> Defines computer code text
<col> Defines attributes for table columns 
<colgroup> Defines groups of table columns
<command>New Defines a command button
<datalist>New Defines a dropdown list
<dd> Defines a definition description
<del> Defines deleted text
<details>New Defines details of an element
<dfn> Defines a definition term
<dir> Not supported in HTML5.
<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a definition term
<em> Defines emphasized text 
<embed>New Defines external interactive content or plugin
<fieldset> Defines a fieldset
<figcaption>New Defines the caption of a figure element
<figure>New Defines a group of media content, and their caption
<font> Not supported in HTML5.
<footer>New Defines a footer for a section or page
<form> Defines a form 
<frame> Not supported in HTML5.
<frameset> Not supported in HTML5.
<h1> to <h6> Defines header 1 to header 6
<head> Defines information about the document
<header>New Defines a header for a section or page
<hgroup>New Defines information about a section in a document
<hr> Defines a horizontal rule
<html> Defines an html document
<i> Defines italic text
<iframe> Defines an inline sub window (frame)
<img> Defines an image
<input> Defines an input field
<ins> Defines inserted text
<keygen>New Defines a generated key in a form
<kbd> Defines keyboard text
<label> Defines a label for a form control
<legend> Defines a title in a fieldset
<li> Defines a list item
<link> Defines a resource reference
<map> Defines an image map 
<mark>New Defines marked text
<menu> Defines a menu list
<meta> Defines meta information
<meter>New Defines measurement within a predefined range
<nav>New Defines navigation links
<noframes> Not supported in HTML5.
<noscript> Defines a noscript section
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<output>New Defines some types of output
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress>New Defines progress of a task of any kind
<q> Defines a short quotation
<rp>New Used in ruby annotations to define what to show browsers that to not support the ruby element.
<rt>New Defines explanation to ruby annotations.
<ruby>New Defines ruby annotations
<s> Defines text that is no longer correct
<samp> Defines sample computer code
<script> Defines a script
<section>New Defines a section
<select> Defines a selectable list
<small> Defines small text
<source>New Defines media resources
<span> Defines a section in a document
<strike> Not supported in HTML5.
<strong> Defines strong text
<style> Defines a style definition
<sub> Defines subscripted text
<summary>New Defines the header of a "detail" element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Defines a table body
<td> Defines a table cell
<textarea> Defines a text area
<tfoot> Defines a table footer
<th> Defines a table header
<thead> Defines a table header
<time>New Defines a date/time
<title> Defines the document title
<tr> Defines a table row
<tt> Not supported in HTML5.
<u> Not supported in HTML5.
<ul> Defines an unordered list
<var> Defines a variable
<video>New Defines a video
<wbr>New Defines a possible line-break
<xmp> Not supported in HTML5.