Float:
← Older revision
Revision as of 00:33, 30 December 2013
Line 240:
Line 240:
Chick [http://www.w3schools.com/cssref/css3_pr_box-shadow.asp here] to learn more about box-shadows.
Chick [http://www.w3schools.com/cssref/css3_pr_box-shadow.asp here] to learn more about box-shadows.
+
----
----
----
===Float===
===Float===
Line 331:
Line 332:
*In this case we used <font color="red">float:left</font> attribute. You can see the text wrap around the table on the right side.
*In this case we used <font color="red">float:left</font> attribute. You can see the text wrap around the table on the right side.
−
Here is our code:
+
*
Here is our code:
<table>
<table>
<tr>
<tr>
Line 369:
Line 370:
</tr>
</tr>
</table>
</table>
−
However, there is another problem. The shadow over laps the text. How do we solve that? Use our margin attribute. Let's install a <font color="red">margin-right</font> attribute of 15 pixels to create a space between the text and the shadow. We will add this to the opening table tag; <font color="red">margin-right:15px</font>.
+
----
+
*
However, there is another problem. The shadow over laps the text. How do we solve that? Use our margin attribute. Let's install a <font color="red">margin-right</font> attribute of 15 pixels to create a space between the text and the shadow. We will add this to the opening table tag; <font color="red">margin-right:15px</font>.
<table class="sortable" style="width:55%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; box-shadow:10px 10px 5px #000000; float:left; margin-right:15px">
<table class="sortable" style="width:55%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; box-shadow:10px 10px 5px #000000; float:left; margin-right:15px">
Line 412:
Line 414:
That looks better.
That looks better.
−
Here is our code:
+
*
Here is our code:
<table>
<table>
<tr>
<tr>
Line 452:
Line 454:
</tr>
</tr>
</table>
</table>
−
Another example with the text on the right side of the left side of the image
+
----
+
*
Another example with the text on the right side of the left side of the image
[[File:Pioneers Crossing the Plains of Nebraska by C-1-.C.A. Christensen.png|400px|right]]
[[File:Pioneers Crossing the Plains of Nebraska by C-1-.C.A. Christensen.png|400px|right]]
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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Line 458:
Line 461:
Note: The images used in FamilySearch Wiki have to linked with Wikitext coding. The image must be between a set of opening and closing brackets: [[ ]]. Here is an example of the above image: <nowiki>[[File:Pioneers Crossing the Plains of Nebraska by C-1-.C.A. Christensen.png]]</nowiki>. To get the image to the right side of the page you insert a pipe (|) after the .png and enter "right" like so:
Note: The images used in FamilySearch Wiki have to linked with Wikitext coding. The image must be between a set of opening and closing brackets: [[ ]]. Here is an example of the above image: <nowiki>[[File:Pioneers Crossing the Plains of Nebraska by C-1-.C.A. Christensen.png]]</nowiki>. To get the image to the right side of the page you insert a pipe (|) after the .png and enter "right" like so:
<nowiki>[[File:Pioneers Crossing the Plains of Nebraska by C-1-.C.A. Christensen.png|</nowiki><font color="red">right</font>]]. The coding understands that right means float to the right.
<nowiki>[[File:Pioneers Crossing the Plains of Nebraska by C-1-.C.A. Christensen.png|</nowiki><font color="red">right</font>]]. The coding understands that right means float to the right.
+
+
===Lesson 3 - Homework===
+
====Problem One====
+
*Create a table of your great-grand parents using only Wikitext.
+
*First column - Last Name
+
*Second column - First name
+
*3rd - Date of birth
+
*Place of birth
+
*Make table sortable
+
*Color row of female ancestors with pink.
+
*Color row of male ancestors with light blue.
+
*Table background color tan.
+
*Float to right side of page.
+
+
====Problem two====
+
*Grab two images from FamilySearch and place them on opposite sides of the page.
+
*Put one image below the other on the page.
+
*Insert some text and make it wrap around the two images. You can get the same text that was used above at: [http://loremipsum.net/ lorem ipsum].
+
===Divisions and Paragraphs===
===Divisions and Paragraphs===
Let's now turn our attention to divisions or blocks of material that we might want to treat differently from the rest of the material on the page. A table is a block of material and we manipulate it to suit our needs. <br><br>
Let's now turn our attention to divisions or blocks of material that we might want to treat differently from the rest of the material on the page. A table is a block of material and we manipulate it to suit our needs. <br><br>