HTML and Wikitext - Lesson Five

From FamilySearch Wiki
Jump to: navigation, search

Lesson One > Lesson Two > Lesson Three > Lesson Four > HTML and Wikitext - Lesson Five > Lesson Six > Lesson Seven > Lesson Eight

Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki


What you will learn in this Lesson

  • What is a relative position attribute?
  • What is a absolute position attribute?
  • How to position div elements with relative and absolute position attributes.
  • How to overlap objects.
  • How to change overlapping of objects.

Positioning Elements

  • The functionality of a page is often judged by the placement of text, tables, images, etc. If objects are shattered over a page, it does not look good and it can be difficult to navigate.
  • Objects that are placed on a page in an orderly arrangement or in a way that is pleasing to the eye will communicate that this is a page that has had a lot attention given to it and is probably well worth the time checking it out.

How a browser places a object on a 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 (Chrome, Firefox. etc) put it?
  • In the upper left corner of the browser window or in the edit box.
  • If there was text or something else already on the page, the browser would put our image below it.
  • Here is an illustration. The yellow box represents an object such as a div tag, image, table, etc with three smaller boxes inside of it.
  • The black border represents a page with some text already on the page.


Here is some text.


  • Notice that the yellow box appears below the text.
  • This is where the browser will put the yellow box if you did not tell it otherwise.
  • If the page were blank, the yellow box would be where the text is now, in the upper left hand corner of the page.
  • Placing objects in a place different than where the browser wants to place them can be accomplish in a number of ways with HTML coding.
  • It can be done with tables, floating or positioning.
  • So far, we have covered tables and floating.
  • In this lesson, we will cover positioning.
  • Think of positioning as being able to place objects without using tables or floating elements.
  • Is by far less affected by other edits that may take place in the future.

Four Positioning Values

  • There are four positioning values for positioning elements like div tags, images, tables, etc:

  • Static or Default. Where your browser places an object on a page of it's own accord. Our yellow box above is in the static or default position.

  • Relative - This is where you want put an object and how it relates to the position where you browser would have put it by default.
  • The position you want to put it is measured from or in relation to where the browser would have put it.
  • If we want to place the yellow box 150px below the text we use relative positioning to place it.
  • Absolute - Allows you to put an object in one spot regardless what is around it. This absolute position property should really only be used inside relative position objects. Although, it can be used independently in certain cases.

  • Fixed - Stays in one spot on your screen and not on a spot on the page. If will remain in the same 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, for example, it will always be visible in the upper right hand corner of the screen even if you scroll down to the bottom of the page.

We will only discuss Relative and Absolute positioning.

Difference between Relative and Absolute Positioning

Canningflat.jpg
  • To illustrate Relative and Absolute position, lets compare these two properties to a box of canning jars.
  • The box represents Relative positioning,
  • The jars represent Absolute positioning.
  • The box can be move anywhere but the jars will stay in the same place in the box. Just because you move the box does not mean the jars will change position inside the box.
  • If you have moved the box and someone who knew where it was before you moved it asks you where it is now, you would probably tell them where the box is in relation to where it used to be. You might say: "I moved it 10 feet to the left of where it used to be." This is it's position relative to where it used to be.
  • So it is with absolute positioning. The jars, in our example, are positioned absolutely inside the box that is located in a place relative to where it used to be.
  • To place objects in a certain place so they will not move, you put absolute position elements inside a relative position element.

How to Position Objects

Relative Position

  • PLEASE TAKE NOTE: All measurements are taken from the upper left corner of the relative position box you are trying place. This is critical to understand positioning.

  • Let's put the relative positioned yellow box 50px from the left side of the border and 70px down from the text.
  • Again we are measuring from the upper left hand corner of the yellow box.
  • We are now saying that the yellow box is 50px from the left border of the page and 70px below the text on the page, otherwise browser would have put it right under the text.

Here is some text.


  • Again to reiterate, we measure or place the yellow box in relation to where the browser would have put it.

Here is the coding for our relative positioned yellow box which is a div tag.

<div style="position:relative;
left:50px;

top:70px;

width:50px;
height:50px;
background-color:#ffff00;"
>
Image or table, etc.
</div>



  • Notice the div tag has as a part of the style coding the words: position:relative.
  • Then comes the coding to tell where you want to place the div tag, which is in this case 50px from the left side of the article and 70px under the text.
  • For horizontal positioning, if you want to move the yellow box 50px to the right, your attribute will be left:50px measuring from the upper left corner of the yellow box to the left side of the page.
  • For vertical positioning, if you want to move the yellow box 70px below the text on the page, your attribute will be top:70px.
  • If you want to move the image 50px to the left of where the browser would have put your image or table, your attribute will be left:-50px.
  • Notice the minus sign before the -50px.
  • Here's where the yellow box would be if we used left:-50px.

Here is some text.



Absolute Positioning

Lets discuss the three smaller boxes inside the yellow box.

  • We will set the dimension ol the yellow box as 300px x 300px.
  • It's relative position will be as above.
  • The smaller boxes will be 50px x 50px.
  • The three smaller boxes are to be positioned absolutely inside of the relative position yellow box in a row up against the right edge of the yellow box and 100px down from the top of the yellow box.


Here is the code for all three boxes, assuming the relative position to be as above. Notice the absolute positioning attribute:

<div style="position:relative; left:50px; top:70px;

<div style="background-color:#66b366; width:50px; height:50px; position:absolute; left:150px; top:100px"></div>

<div style="background-color:#ffa584; width:50px; height:50px; position:absolute; left:200px; top:100px"></div>

<div style="background-color:#ffe34d; width:50px; height:50px; position:absolute; left:250px; top:100px"></div>

</div>



  • Notice that the three absolute boxes are between the <div style="position:relative;
    and the ending </div> at the bottom of the coding.
  • Each box is 50px by 50px.
  • The first box was placed 150px to the right and 100px from the top of the yellow 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 200px.
  • 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 250px

Position - Wrapping text

  • Normally when you add text or other objects after a relative position object it will follow it on the page.
  • The text does not naturally wrap around a relative position object as shown below.

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

  • If you want text to wrap around an relative position object add the float attribute to the div element like so:

<div style="
position:relative;
width:200px;
height:200px;
background-color:#ff0000;
float:left;"
>


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. 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.

  • You will probably want to add the margin attribute to put some spacing between the yellow box and the text.
  • Note the smaller boxes can be moved around inside of the yellow box without affecting the wrapping of the text.

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.

<div style="position:relative">
<div style="position:absolute; width:100px; border:15px solid black ">one</div>
<div style="position:absolute; left:130px; width:100px; border:15px solid black ">two</div>
<div style="position:absolute; left:260px; width:100px; border:15px solid black ">three</div>
<div style="position:absolute; left:390px; width:100px; border:15px solid black ">four</div> </div>

Important.png
  • Note: The width of a FamilySearch Wiki article is 640px.
  • When figuring up how big to make objects for a gallery, know that you only have 640px before you conflict with any sidebars on the right side.
  • Borders count in calculating width.
  • If all your objects total more than 640px, one or more of the objects might move down the page.
  • If your gallery is in a div tag you can state the width to be more than 640 pixels, but you should be way down the page so as to not be covered up by the right sidebars.

Overlapping Positioning

Do you like collages? You can create them with positioning attributes.

    • Here is an example with coding:

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

<div style="background-color:#ffff00; width:50px; position:absolute; left:50px; top:70px"></div>

<div style="background-color:#008000; width:50px; position:absolute; left:80px; top:40px"></div>

<div style="background-color:#ffa500; width:50px; position:absolute; left:90px; top:80px"></div>

  • 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 first box which will make it appear on top:

<div style="background-color:#ffff00; width:50px; position:absolute; left:50px; top:70px; z-index:3"></div>



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 <div> 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.

Homework Problems

Problem One

  • Arrange three images from FamilySearch Wiki (you picked them) in a gallery format using tables elements. Make the images 150px wide.
Naturalization.jpg Immigrants Behold the Statue of Liberty.jpg Ellis island 1902.jpg

Problem Two

  • Arrange these three images in another gallery using the float attribute.
Naturalization.jpg
Immigrants Behold the Statue of Liberty.jpg
Ellis island 1902.jpg

Click here to see coding

Problem Three

  • Arrange the three images using the positioning attributes.
Naturalization.jpg
Immigrants Behold the Statue of Liberty.jpg
Ellis island 1902.jpg







Click here to see coding

Html7.jpg

  • You'll notice the arrangement looks the same in all three cases.
  • However, the codes are very different.
  • 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.
Naturalization.jpg
Immigrants Behold the Statue of Liberty.jpg
Ellis island 1902.jpg













Click here to see coding

Problem Five

  • Move the bottom image to the top using z-index attribute.
Naturalization.jpg
Immigrants Behold the Statue of Liberty.jpg
Ellis island 1902.jpg













Click here to see coding Lesson 5


On to LESSON SIX