Powered by Twitter Tools

Powered by Twitter Tools

Powered by Twitter Tools

1. The Element can be offset from the Top, Bottom, Left or Right of the containing element.
2. The Element is taken out of normal flow.
3. The Element will be positioned from its NEAREST POSITIONED ANCESTOR.
4. If the nearest ancestor element is NOT positioned(i.e. set to position:relative)  the HTML element’s position will be used to set the top, right, bottom and left positions.

CSS Absolute Positioning Example.

The best way to really learn Positioning with CSS is to practice.  Do small test cases until you’ve got it down. You can get a more in-depth explanation from an article by “Big John” Gallant – The difference between “The Flow” and “Positioning” for Web Pages

Other Helpful Links:

• PositionIsEverything.net
• Official W3C CSS 2.1 Specification on Absolute Positioning.

CSS Shorthand
Check out this CSS Reference at W3Schools.com for a list of all the shorthand.  The shorthand notation is given at the top of each section. http://www.w3schools.com/css/css_reference.asp

Selecting Elements by Context
You can select nested elements in context:
div ul li a { background-color:red; } which would target links within an unordered list which is inside a div element. <div> <ul><li><a href=”">Link</li></ul></div>

Floats
When working with floats remember that the element is moved out of normal flow causing any elements below it to slide up under it.  Use clear: both;  (left or right) to push the elements back down below the floated element.
http://www.w3schools.com/css/pr_class_float.asp

<!– Attributes & Values –>
<p align=”center“>This text will be centered</p>
<!– This is a link tag –>
<a href=”http://www.google.com” target=”_blank“>Go To Google</a>
<!– This will display an image –>
<img src=”benji.jpg” alt=”" width=”100” />

HTML Attribute Reference
http://www.w3schools.com/tags/ref_standardattributes.asp

Assignment: Read the following sections at W3Schools.com.

HTML Styles
HTML Links
HTML Images
HTML Tables

• How to write CSS rules.
• Where to place CSS. Inline, Internal & External.
• CSS Zen Garden
• Assignment: Read CSS Basics at W3Schools.com

External Stylesheet:
<link href=”external.css” rel=”stylesheet” type=”text/css” />

Inline CSS:
<p style=”color:blue; font-size:30px;”>This is inline css</p>

Internal CSS: (this goes in between the head tags)
<style type=”text/css”>
p { color:red; }
body {
background-color:#CC0000;
color:black;
font-family:”Courier New”, Courier, monospace;
}
</style>

• Intro to HTML
• W3schools.com – Read HTML Intro
• Class Overview
• AEMS – Time Clock