Positioning HTML Elements

There are three basic methods for positining HTML elements on a web page:

1. "Flowing": this is the default where the text and images flow from the top to the bottom of a page and will be reflowed when you resize the page.
2. Table-based: Invisible tables can be used to position elements on a page. This is especially imporant when you want to keep one element directly next to another element.
3. Absolutely positioned: This is where you specify the position of the elements "absolutely". This means that the element will not move as other elements are moved and the page is resized. This should be avoided except when you are putting up a dynamic map.

Flowing

Flowing html is the default and still very common.

1. Create a simple web page (without a template) and then paste a bunch of "paragraphs" (with the <p> tag) into it. Now, size the page and you'll see the text re-flows as you size the page.
2. Now, add an image that is an inch or two wide between two of the paragraphs and see what happens. The image will flow with the text but all by itself leaving a lot of white space.
3. You can make the image "float" to the "right" or "left" of the text by using some inline CSS:

<img style="float:left" src="http://gis.humboldt.edu/OLM_2017/images/Logo_OnlineLearning.jpg" />

4. Notice that the text hits the edges of the image which is not very attractive. We should add some padding around the image by adding a semicolon to the linine CSS and then "padding:5px". This will add 5 pixels of padding around the image. Note that the "px" is very imporant as some browsers will default to pixels and others will ignore the value if "px" is not specified.

<img style="float:left;padding:5px" src="http://gis.humboldt.edu/OLM_2017/images/Logo_OnlineLearning.jpg" />

5. We may also want to add a border to our image with "border=1":

<img style="float:left;padding:5px" border=1 src="http://gis.humboldt.edu/OLM_2017/images/Logo_OnlineLearning.jpg" />

6. Now the problem is that our border is hitting our text. The key here is to all some "margin" to the image with "maring:10px".

<img style="float:left;padding:5px;margin:10px" border=1 src="http://gis.humboldt.edu/OLM_2017/images/Logo_OnlineLearning.jpg" />

7. Note that the "margin" is around the border while the "padding" is within the border. Take some time now to float some images and change their paddign and margins until you feel comfortable with these concepts. Add several images to your web page with different settings.

In your web site, add a page that has a "story" with flowing text and some images and "float" to the left or right.

Positioning with Tables

You can also position HTLM elements by putting them into a table. This restricts the elements more and allows you to place elements next to each other on a page. The web page with the schedule for this class was created using tables and allows the icons to always be next to the text for each week. This also keeps the weeks from overlapping no matter how much text is entered.

1. Create a table in a new web page as you have in the past with serveral rows and columns. A good approach is to have a series of images in one column with descriptions of the image in the other column. This is commonly used for explaining small maps and other images.

2. Notice that by default, the table does not have a border. This is typically what you'll want but for debugging the layout, we'll want to turn it on by adding "border-style:none" to the table start tag. When you want to border to disappear, change the border-style to "none".

<table style="border-style:solid">

3. You can use the "margin" and "padding" CSS elements on the outside of a table but they do not work on the cells within the table. For this, you'll need to add "cellpadding" and "cellspacing" attributes to the table tag. Notice they are not part of CSS.

<table style="border-style:solid" cellpadding="10px" cellspacing="5px">

HTML has a long history and the standards group has made the language fairly uniform. However, there are some areas that are a little strange and this is one of them.

4. To make our table look nice, we can add some "margin" using CSS and make the "cellspacing" zero. Making the "border" attribute zero will make it disappear.

<table style="border-style:solid;margin:10px" cellpadding="10px" cellspacing="0px">

Notice that the table shrinks and expands as you size your browser. This is handy except you will want to check all your web pages with different browsers and different sizes.

Tables are very flexible. You can add any number of rows and columns to your tables. You can also use "span" to merge cells together so one row can have different cell widths than the other rows. Another trick is to put a table within another table to get even more control.

Try planing with tables with different numbers of rows and columns and different types of control now. Then, add a page to your web site that contains a series of maps with descriptions of the maps to one side.

Absolute Positioning

Notice that we have not used "div" tags yet for positinoing. You can use them within a table, you can put tables into divs, you can flow divs, and put flowed text into a div. This makes HTML layouts very flexible.

You've probabely seen ads popup in the middle of a web page when you are trying to browse the web. These are created with "div" tags that have been "absolutely" positioned. Try the following in your web page with flowing content:

<div style="position:absolute;left:100px;top:100px">
This is some annoying text
</div>

Now you too can add annoying adds to your web site (please don't do this!). You can also position div elements relative to other elements on the page but that's a more advanced feature.

The real value in these absolute psoitioned elements are when we get to dynamic maps that change size as you resize the browser window. For that, we'll need some JavaScript and we'll start on that next week. For this assignment, you don't need to add an absolutely positioned div tag.