Changes

Jump to navigation Jump to search
m
no edit summary
</table>
----
<h2 style==Default positioning=="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">DEFAULT POSITIONING</h2>
<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>
<h2 style==Position attribute=="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">POSITION ATTRIBUTE</h2>
<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.
<h2 style==Property values=="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">PROPERTY VALUES</h2>
<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.
*'''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.
<h2 style===Relative positioning==="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">RELATIVE POSITION</h2>
*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:
<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>
<h2 style==Main use for relative positioning in the wiki=="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">MAIN USE FOR RELATIVE POSITIONING IN THE WIKI</h2>
*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.

Navigation menu