Difference between revisions of "Help:Wiki University HTML-- Position - Relative"

From FamilySearch Wiki
Jump to navigation Jump to search
m
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{HTML School}}{{HTML Tutorial Sidebar}}
+
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
<div style=" float:right; width:73%; margin-bottom:0px; margin-top:-30px">
+
<!--------------row 1-------------------------->
<!--first table links at top of page---------------------------------------------->
+
<!--tool bar--------------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
+
{{HTML School}}
<tr><td>
+
<!----------------row 2---------------------------->
<div style="font-size:1.2em; font-family:arial>[[Help:Wiki University HTML--Navboxes|<< Previous Chapter]] </div>
+
<!-------------------menu-------------------------------->
</td>
+
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{HTML Tutorial Sidebar}}</div>
<td>
+
<!-----------------------main------------------------>
<div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML-- Position - Absolute|Next Chapter >>]] </div>
+
<!-------------------------------chapters top row---------------------------------->
</td></tr>
+
<div style="grid-column:3/8; padding-left:0.5em">
</table>
+
<!-------------------------------chapters top row---------------------------------->
----
+
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
==Default positioning==
+
<div style="font-size:1.3em">[[Help:Wiki University HTML--Navboxes|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Position - Absolute|Next Chapter >>]]</span></div>
 +
</div>
 +
<div style="margin-left:0.5em">
 +
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
 +
==DEFAULT POSITIONING==
 
<p>We have seen thus far that text, images, etc. position themselves on a page in the order they were loaded.  If text was placed first and an image next, the text would be above the image.  What if we want to position these items differently than how the browser wants to do it?  Here is where position attributes come into play.
 
<p>We have seen thus far that text, images, etc. position themselves on a page in the order they were loaded.  If text was placed first and an image next, the text would be above the image.  What if we want to position these items differently than how the browser wants to do it?  Here is where position attributes come into play.
 
</p>
 
</p>
  
==Position attribute==
+
==POSITION ATTRIBUTE==
 
<p>Position attributes allow you to place objects in precise locations on a page either independent or in relation to whatever else is on the page.   
 
<p>Position attributes allow you to place objects in precise locations on a page either independent or in relation to whatever else is on the page.   
  
==Property values==
+
==PROPERTY VALUES==
 
<p>There are [http://www.w3schools.com/cssref/pr_class_position.asp six possible property values], but only two really have any use in FamilySearch Wiki:<p>
 
<p>There are [http://www.w3schools.com/cssref/pr_class_position.asp six possible property values], but only two really have any use in FamilySearch Wiki:<p>
 
*'''Relative position''' - places objects in relation to where your browser placed it.   
 
*'''Relative position''' - places objects in relation to where your browser placed it.   
 
*'''Absolute position'''- places objects in relation to the entire page and it covers up whatever was in that spot whether it be text, images, etc. or another absolutely positioned object.
 
*'''Absolute position'''- places objects in relation to the entire page and it covers up whatever was in that spot whether it be text, images, etc. or another absolutely positioned object.
  
===Relative positioning===
+
==RELATIVE POSITION==
 
*When you place a relative positioned object on a page, whatever follows will move down the  page to compensate.  If the relative positioned object is 100 pixels high, text, images, etc. will move down the page 100 pixels.
 
*When you place a relative positioned object on a page, whatever follows will move down the  page to compensate.  If the relative positioned object is 100 pixels high, text, images, etc. will move down the page 100 pixels.
 
*Here is an example with a border so you can see what we are talking about:
 
*Here is an example with a border so you can see what we are talking about:
Line 30: Line 35:
 
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.
 
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.
 
*The coding for relative positioning is placed in opening div tags:
 
*The coding for relative positioning is placed in opening div tags:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">position:relative</font color>"><nowiki></div></nowiki></div>
+
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:50%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">position:relative</font color>"><nowiki></div></nowiki></div>
  
==Main use for relative positioning in the wiki==
+
==MAIN USE FOR RELATIVE POSITIONING IN THE WIKI==
 
*The main use is to act like a container for absolute positioned objects like text, images, tables, etc.
 
*The main use is to act like a container for absolute positioned objects like text, images, tables, etc.
 
*This ability to act as a container makes it possible to position objects absolutely inside a relative positioned object, and if you move the relative positioned object, all the absolute positioned objects inside will move with it and keep their positions.
 
*This ability to act as a container makes it possible to position objects absolutely inside a relative positioned object, and if you move the relative positioned object, all the absolute positioned objects inside will move with it and keep their positions.
 
*This is similar to the way cells inside tables behave.
 
*This is similar to the way cells inside tables behave.
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-5px; margin-top:-20px; padding:0px">TRY THESE OUT . . . . . </h2>
+
==TRY THESE OUT . . . . ==
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
Line 75: Line 80:
 
</div>
 
</div>
 
</div>
 
</div>
 
+
<!---------------------------------END OF MATERIAL------------------------------------------->
<!--Links to next and preceding chapters bottom of page ----------------------------->
+
</div>
<table style="width:100%; ">
+
<!-------------------------------chapters bottom---------------------------------------------------->
<tr><td>
+
<div style="clear:both"></div>
<div style="font-size:1.2em; font-family:arial>[[Help:Wiki University HTML--Navboxes|<< Previous Chapter]] </div>
+
<div style="display:flex; justify-content:space-between; padding:10px">
</td>
+
<div style="font-size:1.3em">[[Help:Wiki University HTML--Navboxes|<< Previous Chapter]]</div>
<td>
+
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Position - Absolute|Next Chapter >>]]</span></div>
<div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML-- Position - Absolute|Next Chapter >>]] </div>
+
</div>
</td></tr>
 
</table>
 
----
 
 
{{reflist}}
 
{{reflist}}
 
</div>
 
</div>
 
__NOTOC__
 
__NOTOC__
[[Category:Wikitext Lessons]]
+
[[Category:Wiki Lessons]]

Latest revision as of 09:55, 27 February 2018

DEFAULT POSITIONING[edit | edit source]

We have seen thus far that text, images, etc. position themselves on a page in the order they were loaded. If text was placed first and an image next, the text would be above the image. What if we want to position these items differently than how the browser wants to do it? Here is where position attributes come into play.

POSITION ATTRIBUTE[edit | edit source]

Position attributes allow you to place objects in precise locations on a page either independent or in relation to whatever else is on the page.

PROPERTY VALUES[edit | edit source]

There are six possible property values, but only two really have any use in FamilySearch Wiki:

  • Relative position - places objects in relation to where your browser placed it.
  • Absolute position- places objects in relation to the entire page and it covers up whatever was in that spot whether it be text, images, etc. or another absolutely positioned object.

RELATIVE POSITION[edit | edit source]

  • When you place a relative positioned object on a page, whatever follows will move down the page to compensate. If the relative positioned object is 100 pixels high, text, images, etc. will move down the page 100 pixels.
  • Here is an example with a border so you can see what we are talking about:

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.

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.

  • The coding for relative positioning is placed in opening div tags:
<div style="position:relative"></div>

MAIN USE FOR RELATIVE POSITIONING IN THE WIKI[edit | edit source]

  • The main use is to act like a container for absolute positioned objects like text, images, tables, etc.
  • This ability to act as a container makes it possible to position objects absolutely inside a relative positioned object, and if you move the relative positioned object, all the absolute positioned objects inside will move with it and keep their positions.
  • This is similar to the way cells inside tables behave.

TRY THESE OUT . . . .[edit | edit source]

Tests.gif
Exercises
  • Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph.
  • Place a "relative" positioned object after the last sentence that has the following attributes:
    • width is 100%.
    • background-color:blue.
    • border 5 pixels thick and red in color.
    • that is 200 pixels high.




Quick Quiz
  • Relative positioning places objects in relation to the edge and top of the page.
A. True
B. False
  • Relative positioning does not cover objects placed before it was.
A. True
B. False
  • Relative positioning covers up all objects placed after it was.
A. True
B. False