HTML and Wikitext - Lesson FourEdit This Page

From FamilySearch Wiki

Lesson One > Lesson Two > Lesson Three > HTML and Wikitext - Lesson Four > Lesson Five > Lesson Six > Lesson Seven > Lesson Eight
Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki

Contents

What you will learn in this Lesson

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

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 in the page, but there are other, and depending on the format, better ways.

  • In this lesson we will look at <div> tags; the work horse of the internet and wiki.

Div Element

A <div> tag (stands for division) segregates a block of material that might include images, tables, text, etc. There is another element, the <p>that is similiar which we will discuss later.

  • Think of a <div> tag as a container. A box you can put in many different items and then move around.
  • Think of a <div> 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 <div> tag as a <td> without the need of row or table tags.
  • Think of a <div> 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.


Html7.jpg

  • Folks sometimes forget to type the closing </div> tag.
  • Often, the effect is seeing the sidebars on the right disappear and only to be found at the very bottom of the page.
  • If you see a page without the sidebars on the right, look for a missing closing div tag somewhere in the wikitext. This is often the culprit.
  • One reason why one should type both the opening and closing tags at the same time.

Div Element as a Container

You can put these kinds of elements in a <div> element:

  • Text
  • Images
  • Tables
  • Other <div> 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.
HTML Wikitext

<div style=
background-color:#fff8dc;
width:300px;
padding:10px;
border:5px solid #000000; >

<div style=
background-color:#fff8dc;
width:300px;
padding:10px;
border:5px solid #000000; >

  • Notice that there is no wikitext equivalent to HTML div tag.

How Your Browser Arranges Div Elements on a Page

What happens when you put two or more div elements on a page and they follow each other?

  • Here are three div containers of text.
  • They will have a different background color so you can more easily see how they arrange themselves 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.


  • Here is the coding for our three div containers.

<div style="background-color:#66b366">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>

<div style="background-color:#ffa584">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>

<div style="background-color:#ffe34d">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>


How did the div elements arrange themselves on the 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.

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.

Let's apply some attributes to the div tags like width, padding, and borders to see what happens next:

  • Lets make each div tag 200 pixels wide, apply 5 pixels of padding and make the borders 5 pixels thick:
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 stacked vertically in spite of restricting the width, applying padding and adding borders.

Floating Div Elements

How to float 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 div tags in a row of cells.
  • We use our float attribute, which we learned in the previous lesson, in the div tag.
  • Install float:left into all three starting div tags.

<div style=
"background-color:#66b366;
width:28%; padding:5px;
border:5px solid #000000;
float:left"
>

  • What do you see now?
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.

  • They are now beside each other starting on the left side of the page.
  • Again we do not have to use tables to accomplish the gallery format.

How to stop floating

  • In the above example, there is some text along with the gallery.
  • Notice what happens to the 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 is as it should be. Floating is used precisely to allow wrapping of text around objects.
  • However, this little sliver of text is rather annoying so how do we keep text from wrapping when we do not want it too?

Install this div element after the last closing </div> tag containing the last box of text, but before the text you do not want to wrap.

<div style="clear:both"></div>

Here is the complete coding for the above floated boxes with the clear attribute:

<div style="background-color:#66b366; width:28%; padding:5px; border:5px solid #000000; float:left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div style="background-color:##ffa584; width:28%; padding:5px; border:5px solid #000000; float:left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div style="background-color:#ffe34d; width:28%; padding:5px; border:5px solid #000000; float:left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div style="clear:both">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>



Here are the boxes with the text not wrapping around them:

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.


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

  • Again use the clear attribute to stop this if you want.
  • By the way both refers to preventing wrapping of text around an object on both sides.
  • You can specify either right or left if that is better.

Width of div elements

  • You have to watch the width of the individual div tags.
  • If they are collectively too wide for the page, one or both of them will be placed by your browser on a new line below the others like so:
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.


Html7.jpg

  • In case you don't know the width of the FamilySearch Wiki without left sidebars is 640px. A good number to remember when placing material in articles.
  • If your material will be showing below the sidebars on the right you have 940px.
  • To cover the 940px you have to set you width attributes to 940px.

Reducing Tables and Images with Scrolling Attribute

  • Occasionally you will run into images or tables to wide to fix between the borders of the page.
  • Lets table our "Healthy Foods Table" and make it 1000px wide:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • As you can see the table extends well beyond the borders.
  • To reduce the size of the table, you can either reduce the width which might reduce the size of text and make it harder to read.
  • Or add scrolling capabilities so that the table now looks like so:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • Notice the scrolling bar at the bottom of the table.
  • The width of the table is now the normal width that is allowed by the Wiki which is the 640px.
  • Also notice that the title "Healthy Foods" is beyond the left side of the scrolling box but still in the middle of the table.

How to create scrolling bars

  • You use an overflow attribute inside of div tags like so:

<div style= "
overflow:scroll; "
>
<table ....>Healthy Foods....</table>
</div>

  • If you want to reduce the width of the table to less than 640px while using the scrolling bars, you simply add a width and/or height attribute to the div element.
  • So if you were to limit the table, for example, to a width to 200px and the height to 100px, the table would look like so:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Here is the coding:

<div style= "
overflow:scroll;
width:200px;
height:100px;"
>
<table ....>Healthy Foods....</table>
</div>

Html7.jpg

  • This same procedure can be applied to image maps, since they cannot be reduced in size to fix on a page.

HOMEWORK

  • Take this table and make it scrollable over its lenght. Click on the edit button and in the code, limit the width to 400 pixels and then install the scroll bars.
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

Click here to see coding Lesson 4


 

Need wiki, indexing, or website help? Contact our product teams.


Did you find this article helpful?

You're invited to explain your rating on the discussion page (you must be signed in).

  • This page was last modified on 4 February 2015, at 16:41.
  • This page has been accessed 5,906 times.