HTML: Positioning & Styles

 

<DIV>

The <DIV> (for "DIVISION") tag creates a block or "layer." You can put just about anything inside the <DIV> tag and you can position a <DIV> just where you want it on the page. This ability to precisely position elements is central to the popularity of <DIV>. You can also apply whatever style you want to a <DIV>. (The navigation bar to the left is a <DIV>.)

There are several style attributes that we haven't yet discussed that are key to using <DIV>. The 'position' attribute determines the location of the <DIV>. Position can be either 'absolute' or 'relative.' An 'absolute' position determines location starting from the upper-left hand corner of the document. A 'relative' position determines location starting from the current location within the document.

The other three style attributes that we need are 'left,' 'top' and 'width.' The 'left' attribute specifies how far from the left the <DIV> begins. The 'top' attribute specifies how far from the top the <DIV> begins. The 'width' attribute specifies the width of the <DIV>. Units are pixels or %.

The 'position,' 'left' and 'top' attributes can be set inside a named style, as in the following example:

#inBox { position:absolute; left:50px; top:60px; }

If you haven't yet read the explanation of 'individual named styles' that was mentioned in Part 4, this would be a good time to check it out. Named styles come into play when you are using <DIV> and <SPAN>.

In the <BODY> section of the page, this named style could be applied to a <DIV> using the "ID" attribute:

<DIV ID="inBox"> Some text... </DIV>

More attributes than the three given for '#inBox' can be used. Here is a fuller definition of the '#inBox' named style:

#inBox { position:absolute; left:50px; top:60px; width:400px; background-color:lightblue; border-color:lightbrown; border-style:ridge; border-width:1px; padding:5px; color:magenta; }

 

Let's set up a second style definition for another <DIV> tag:

#try2 { position:relative; left:25px; top:225px; background-color:lightgreen; }

 

Example

This code puts these named styles to work in a <DIV> tag:

<style>

#inBox { position:absolute; left:50px; top:60px; width:400px; background-color:lightblue; border-color:lightbrown; border-style:ridge; border-width:1px; padding:5px; color:magenta; }

#try2 { position:relative; left:25px; top:225px; background-color:lightgreen; }

#changeText { text-decoration:underline; font-size:14pt; color:tomato; font-style:italic; }

</style>
</HEAD>

<BODY >

<DIV id="inBox">This text is inside a <DIV> tag that is using the named style '#inBox.' <br clear=all><center><img src="flag.gif"></center><br clear=all>Can you name the country whose flag this is? (Answer below.) Leaving the <DIV> tag now, bye.</DIV>

<p>This text is inside a good old-fashioned <P> tag. The weather forecast today is for partly humid conditions with a 0.02% chance of hail.</P>

<DIV ID="try2">This text is inside a second <DIV> tag that is using the named style '#try2.'<br clear=all><center><img src="thing.gif"></center><br clear=all>Do you know what kind of mathematical creation is shown in this image? (Answer below.) Leaving the 2nd <DIV> tag now, bye.</DIV><br>

to see this how this code looks in a window.

 

<SPAN>

The <SPAN> tag is similar to <DIV> except that it is used on a smaller scale, typically to alter the appearance of some text. Use <SPAN> if you cannot accomplish what you need to using a technique that we've discussed earlier. To use <SPAN>, as with <DIV>, you need to define a style (inside a <STYLE> tag, an external style sheet, or inside the <SPAN> tag itself). Here is an example of an individual named style that we can use:

#changeText { text-decoration:underline; font-size:14pt; color:tomato; font-style:italic; }

 

Example

This code puts this named style to work in a <SPAN> tag:

<p>Sometimes you might be writing something and suddenly need to apply a <span ID="changeText">bizarre unique font</span> to a small amount of text. The <SPAN> tag, which you just saw applied, is good for that.</p>

to see this how this code looks in a window.

 

Other Resources

Try these links on <DIV>, <SPAN> and styles:


Page Link
CSS Properties www.htmlhelp.com/reference/css/properties.html
CSS Structure and Rules www.htmlhelp.com/reference/css/structure.html
Style Guide www.w3.org/MarkUp/Guide/Style.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com web site. Define a style that you will apply both to a <DIV> element and to a <SPAN> element. You can use either an individual named style or a standard style definition to create the style. You can set up the style either in an external style sheet or inside a <STYLE> tag. The style should define the font family, font size, color and font weight of the text (you make the actual choices).

Include some clip art as part of the <DIV> element you define. (See the "Links" page for some websites with clip art.) Have some text along with the clip art. Have some additional text (separate from the <DIV>) to which you apply the <SPAN> tag.

If you are working on eEverything.com, use the <DIV> tag to create an eEverything.com 'store' logo that could show up repeatedly on different pages. Here's some text from eEverything.com that could be on your <DIV>: eEverything.com is committed to customer satisfaction. If you are not happy with your purchase just return the item (preferably in the original packaging) to this address: eEverything.com / 1 eEverything Way / Boulder, CO 80301. We will promptly issue you a full refund.

Here is some more eEverything.com text: eEverything.com will not be undersold. We will meet any advertised price. (Apply the <SPAN> tag to some part of this text.)