User:Wonghk3/Sandbox/WikiTextA4

CH-17: SIDEBARS
FOLLOW samples on tutorial page... Sidebars

SIDEBARS vs INFOBOXES
 * FOLLOW Wiki University documentation + NOTE: Sidebars are SPECIALIZED TABLES saved as TEMPLATES
 * copy the sample coding onto my sandbox, show preview
 * NOTE: table tag, row tag, cell tags and a simple list are combined to make a sidebar
 * HOW TO SAVE: save as a template making sure the word "sidebar" is in the title (don't do this without prior approval!)
 * HOW TO EDIT: do an edit source on THIS PAGE, go to the bottom, look for Sidebar template, then click edit
 * EMBEDDING the SIDEBAR: do an edit source on THIS PAGE and note placement of the sidebar template at TOP
 * copy and paste the sidebar template onto my sandbox, show preview
 * do not do exercises

CH-18: NAVBOXES
FOLLOW samples on tutorial page... Navboxes

A NAVBOX is a TABLE and TEMPLATE
 * FOLLOW Wiki University documentation of a TYPICAL NAVBOX + NOTE: Navboxes are SPECIALIZED TABLES saved as TEMPLATES
 * copy the sample coding onto my sandbox, show preview
 * NOTE: it is a table with table tag, row tags, and cell tags ---> go through each line
 * HOW TO SAVE: save as a template making sure the word "navbox" is in the title (don't do this without prior approval!)
 * EMBEDDING the NAVBOX: performed by an Administrator; you will not see in the coding because it is "protected"
 * If do exercise, do not save as a template; just save it in your sandbox

CH-19: POSITION - RELATIVE
FOLLOW samples on tutorial page... Position-Relative


 * the position of text, images, templates, etc. are automatically placed on a page by the browser in the order loaded/coded; e.g. text first then image
 * we can position the items differently than how the browser wants to place it; e.g. INDEPENDENT OF or IN RELATION TO other objects on the page
 * we use position attributes:


 * RELATIVE POSITION (position:relative) = browser default; places objects in relation to where your browser placed it (IN RELATION TO)
 * ABSOLUTE POSITION (position:absolute) = places objects in relation to the entire page and COVERS UP whatever value is in that spot (INDEPENDENT OF)

HOW TO


 * 1. create a container with a width and height in the inline styling and place it on the right side of the page

SAMPLE CODE for a box:


 * 2. Add Lorem Ipsum paragraph to bottom and watch wrapping on the left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.


 * 3. NOTE: you can use the position:relative attribute OR NOT; it doesn't matter because it is the default placement.


 * 4. RESULTS:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.

WHAT IS IT'S PURPOSE THEN?


 * Serve as a container for an absolute positioned object
 * Makes possible to position objects absolutely inside a relative position object
 * If you move the relative positioned object, all the absolute position objects inside will move with it

CH-20: POSITION - ABSOLUTE
FOLLOW samples on tutorial page... Position-Absolute


 * Is like relative position, but does not "move" with the rest of the page content
 * Absolute positioned object will cover up anything in that spot, even another absolute positioned object

DEMONSTRATE
 * 1. COPY position:relative div-tag and paragraph and paste below
 * 2. ADD position:absolute attribute to the div-tag on the second PP; note difference
 * 3. INCREASE width and/or height value in both PP; note difference

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis. PLACING AN ABSOLUTE POSITION OBJECT INSIDE A RELATIVE POSITION CONTAINER
 * 1. CREATE another div-tag surrounding the absolute positioned coding
 * 2. CODING should look similar to this >>> show RESULTS >>> NOTE placement of box is left, above paragraph:

       

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.


 * 3. ADD float:right attribute to first div-tag >>> show RESULTS >>> NOTE Paragraph is wrapping around box placed on the right:

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.