User:Ccsmith/sandbox?HTML and Wikitext - Lesson 4

Lesson 1 > Lesson 2 > Lesson 3 > > Lesson 5 HTMLsidebar

What you will learn in this Lesson

 * Uses of    tags.
 * How div elements arrange themselves on a page.
 * How to float div elements.
 * How to create a gallery with div elements.
 * How to position div elements with relative and absolute position attributes.
 * What is a absolute position attribute?
 * What is a relative position attribute?
 * How to overlap objects.
 * How to change overlapping of objects.

Divisions
As we have seen, tables can help us put material on a page and have some control over how the data looks and where it is a the page, but there are better ways.
 * In this lesson we will look at  tags, the work horse of the internet and wiki.

Div Element
A  tag (stands for division) segregates a block of material that might include images, tables, text, etc. There is another element, the  that is simuliar which we will discuss later.


 * Think of a  tag as a container.  A box you can put many different items and move around.
 * Think of a  tag as a element that you can locate elsewhere on a page without having to settle for where your browser wants to put it.
 * Think of a  tag as a   without the need of row or table tags.
 * Think of a  tag as a layer that can be setting on top of other layers.
 * You should be able to guess that this element has a great number of uses which should open your creative juices.

Div Element as a Container
You can put these kinds of elements in a  element:


 * Text
 * Images
 * Tables
 * Other  elements
 * All the above at the same time!

Here is a div element using some of the attributes we used on tables: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 * Notice that there is no wikitext equivalent to HTML div tag.

Arrangement of Div Elements
What happens when you put two or more div elements on a page? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. How did the div elements arrange themselves on the page?
 * Here are three div containers of text and they will have a different background color so you can see how they arrange themselves on a page.
 * The text goes the full width of the page.
 * There is no space between the div elements.
 * The div elements begin in the upper left hand corner on a blank page or under what is already on the page.
 * They are arranged vertically in order of entry just as if you were adding new text.

These are the default positions of div tags by your browser. It always places the upper left corner of the div element to the next available place on your page in upper left corner.

Let's apply some attributes to the div tags like width, padding, and borders to see what happens next: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. They are still in the same order they were entered in spite of the attributes given to them.

Floating Div Elements
What if we want to put them side by side like in a gallery. How do we do that?
 * We do not have to create a table and place these boxes in a row of cells.
 * We use our float attribute in the div tag.
 * Install float:left into all three starting div tags. What do you see now?
 * They are now beside each other on the left side of the page.
 * Again we do not have to use tables to accomplish the gallery format.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 * Here's what the code will look like in each other the three boxes.



The code should look something like this:  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 * Notice what happens to text that is outside our boxes.
 * Because the boxes are floating to the left side of the page, the text is wrapping around to the right.
 * This little sliver of text is rather annoying so how do we keep text from wrapping when using the float attribute?
 * Put the text in its own set of div tags.
 * Be sure to install a width attribute of 99% or less or an exact number of pixels.
 * Don't use 100% as it is the default anyway and will allow wrapping to take place.


 * If you should float one of the boxes to the right, then it looks like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. If there was any text it would float up in the space between the two boxes.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 * You have to watch the width of the individual div tags.
 * If they are collectively to wide for the page, one or both of them will be placed on a new line below the others like so:

Positioning Div Elements
Another neat thing we can do with div tags to be able to place objects exactly where we want them on the page, regardless of what is on the rest of the page even to overlap other objects.
 * Positioning attribute is a little tricky to understand but will make sense as you think about it.
 * There are four property values for positioning attributes:
 * Static - Default. Object appears as they normally would on a page.
 * Absolute - Stays in one spot regardless where it is on a page or if inside another element. This is an important point.
 * Relative - Stays in one spot in relation to where the browser would normally put the object.
 * Fixed - Stays in one spot on your screen, regardless if you are scrolling up or down the page. If you place an image in the upper right hand corner of the page, it always be visible in the upper right hand corner of the page even if you scroll down to the bottom of the page.

Let's take the example of an image on a page.
 * If we were to put an image on a blank page, where would the browser put it?
 * In the upper left corner of the browser window.


 * Here is an illustration. The yellow box represents an image and the red box represents the browser window or what you see on your monitor.
 * The position of the yellow box (image) is in the default position. This is where the browser will put your image if you did not tell it otherwise.

How to Position Objects

 * PLEASE TAKE NOTE: All measurements are taken from the upper left corner of the object you are trying place. We're not measuring from the center or the edge or from any other part of the object, we are always measuring from the upper left corner.  This is critical to understand positioning.


 * For horizontal positioning, if you want to move the image 50px to the right, your attribute will be left:50px from the upper left corner. So if you want to move to the right you use the left attribute, or you can use right:-50px.
 * If you want to move the image 50px to the left, your attribute will be right:50px from the upper left corner. So if you want to move to the left you use the right attribute,  or you can use left:-50px.
 * For vertical positioning, if you want to move the image 70px down from the top, you attribute will be top:70px

The positioning attribute has two parts: the position value and the distance value like so: position:absolute; left:50px; top:70px
 * In this example, the object's upper left corner is to be 50px right from where the browser would normally put the object.
 * The object's upper left corner is to be 70px below the top from where the browser would normally put the object.
 * Notice that there is a semi-colon between the attributes.
 * You could use just the left attribute which will keep the object at the top of the page but still be 50px to the left of the normal position the browser would have put the object.


 * Let's put our yellow box (image) 50px from the left side of the red box and 70px down from the top:

Here is the coding: 
 * Notice a table was not necessary to place the yellow box.

Create gallery with positioning attributes

 * To place other boxes in a gallery, it could look like this:

Here is the code for all three boxes. Notice the positioning attribute: 






 * Each box is 50px by 50px.


 * The first box was placed 50px to the right and 70px from the top of the red box.


 * The second box is to be next to the first box. The distance for the second box is the sum of the distance the first box is from the left and the width of the first box, which is 100px.


 * The third box is to be next to the second box. The distance for the third box is the sum of the distance the first box is from the left and the width of the first and second box, which is 150px

Let's talk about absolute and relative position some more.

Absolute Position

 * IMPORTANT - Absolute positioning should be used inside a relative positioning attribute.


 * Absolute positioning puts an object in a certain place regardless of else is on the page. In fact it completely ignores what is on the page.


 * The stuff on the page can't even see the absolute position object. You can literately change the stuff on the page and the absolute position object will not be effected.


 * Absolute positioning has its draw backs when use alone. It can appear in slightly different places depending on the browser and the monitor of the patron.


 * Best use of absolute positioning is inside relative positioning because it will move with the relative positioned object if you want to shift it to a different part of the article.

Relative Position

 * The stuff on the page can see a relative position object and makes room for it.
 * Here is where absolute position comes in. You can place object absolutely inside relative position boxes and they will stay in place regardless of the browser or monitor.
 * So if you absolute positioned an image in a relative position box it will stay in that location even if you move the relative position box to another location on the page.
 * This gives you a very powerful tool to place things on pages that will stay put.

Small Project using div tags

 * Notice how the boxes all keep their place even if the red box is moved 100px to the right.

Here's how to then make a gallery using positioning attributes. Let's look at the code:

gallery with position attributes
Here is a gallery created using the positioning attributes. There are four absolute attributes inside one relative attribute like so: one two three four
 * Box is 100px wide (did not set a height).
 * Added a 15 px border to each box.
 * IMPORTANT - You should have noted that borders adds to the width of a box.
 * The boxes are really 130px wide, counting the borders.

Here is the coding.

  one  one  one  one

Overlapping Positioning
Do you like collages? You can create them with positioning attributes. Here is the code for all three boxes. Notice the positioning attributes: 
 * Here is an example with coding:






 * How are the boxes layered?
 * In the order they were installed.
 * The first box entered will be on the bottom.
 * The last box entered will be on the top.
 * This is the default order. The first on the bottom, the last on top.
 * To change which boxes are on top you can rearrange the order of the boxes' code or use:

Z-Index

 * You can add the z-index attribute to change the order of appearance.
 * Since there are 3 boxes to deal with the first box is layer 1, the second box is layer 2, and the third box is layer 3.
 * If we want to put the first box on top of the others we use this code: z-index:3, which put the first box on layer 3.
 * The second box is now layer 1 and third box is layer 2 but first box is now layer 3.

Here is the coding for the third box:  Here's what the object looks like now with the bottom box on top to the other two using the z-index attribute.  For more on positioning see w3schools.com

What you have learned

 * Uses of    tags.
 * How div elements arrange themselves on a page.
 * How to float div elements.
 * How to create a gallery with div elements.
 * How to position div elements with relative and absolute position attributes.
 * What is a absolute position attribute?
 * What is a relative position attribute?
 * How to overlap objects.
 * How to change overlapping of objects.

Problem One

 * Arrange three images from FamilySearch Wiki (you picked them) in a gallery format using tables elements. Make the images 150px wide.
 * Here's the coding:

<td style="width:50% ">

Problem Two

 * Arrange these three images in another gallery using the float attribute.
 * Here's the coding. Remember their is no wikitext equilivant to

<div style=  "float:left"  > <div style=  "float:left"  > <div style=  "float:left"  >

Problem Three
<div style=  "position:relative "  > <div style=  "position:absolute; left:0px "  > <div style=  "position:absolute; left:150px "  > <div style=  "position:absolute; left:300px "  >
 * The codes will be very different but the images should have the same arrangement.
 * Which do you think is the best for creating galleries?
 * Which of the above would you use if there was only one image?

Problem Four

 * Arrange these three images into a collage so that they overlap each other.

<div style=  "position:relative "  > <div style=  "position:absolute; left:150px; top:80px "  > <div style=  "position:absolute; left:240px; top:20px "  > <div style=  "position:absolute; left:270px; top:100px "  >

Problem Five

 * Move the bottom image to the top using z-index attribute.

<div style=  "position:relative "  > <div style=  "position:absolute; left:150px; top:80px; z-index:3 "  > <div style=  "position:absolute; left:240px; top:20px "  > <div style=  "position:absolute; left:270px; top:100px "  >