CMST 398J Cascading Style Sheets

<div style="position:absolute; top:165px; left:15px; width:445px; height:460px; border-style:dotted; padding:5;">

All elements on this entire page are positioned using a series of <div> statements, some inline and some within the <head> tags. All inline style code is shown at the head of each positioned section. The style code within the <head> tags is shown below. If you are using a late model browser (Netscape 4.x excepted) you will see "boxes" defining the positioned inline <div> envelopes. You may also notice that with Netscape, <div> positioned text viewed within a frame set, may not position properly. However when the page is not in a frame set it presents well.

For our JavaScript Forever headline we use named style code blocks #js and #f, located within the <head> tags, to define the dimensions of a "box" or <div> envelope (i.e., width and height), the placement of this box relative to the upper left hand corner of the page (e.g., top, left) and the properties of the content in this box (e.g., font-size, font-family, et al.). Therefore text placed within the defined box (i.e., the <div> tags) is placed and formatted based on the box parameters. For example the words "JavaScript" and "Forever," are each contained in a separate box. The boxes are positioned to overlap. Though object placement can be achieved using tables the overlap shown here is a unique feature of style coding.

Style coding provides exquisite control of positioning. Unfortunately different browsers respond to style sheets differently so a compromise or a lot of extra coding is often necessary.

<div style="position:absolute; top:725px; left:15px; width:445px; height:165px; border-style:dotted; padding:5;">

Four CSS code sets are used to achieve this overlapping effect. Two of the code sets are located within the <head> tags. Each of these sets establish an ID. This ID is then used by the constructs within the <body> tags that call up the boxes. The four code sets are shown below.

<div style="position:absolute; top:900px; left:15px; width:190px; height:425px; border-style:dotted; padding:5;">

Within the <head> tags

<style type="text/css">
<!--
#js {
position:absolute; 
top:225px; 
width:370px;
height:80px; 
font-size:60pt; 
font-family:Verdana; 
color:red;
margin-left:25px;
padding:10;
}
-- >
</style>

<div style="position:absolute; top:900px; left:15px; width:205px; height:425px; margin-left:240px; border-style:dotted; padding:5;">



<style type="text/css">
<!--
#f {
position:absolute; 
top:260px; 
left:110px; 
width:300px; 
color:blue; 
height:20px; 
font-style:italic; 
font-family:Arial; 
font-size:45pt;
margin-left:25px;
padding:10;
}
-->
</style>

<div style="position:absolute; top:1690px; left:15px; width:450px; height:550px; border-style:dotted; padding:5;">

Observations

1. Using inline or named code blocks in the document head is, to some extent, a programming preference. You can however, repeatedly call a named code block located in the document head using <div> tags in the document <body>

as illustrated here and below.

2. Position can be relative as well as absolute. Relative relates a block to the preceding HTML text

as shown here and above. The code block called is shown below.

<style type="text/css">  </style>

3. <div> envelops can be nested as shown in items 1 & 2 above.
4. You will notice that length is specified using px (pixels). A variety of other parameters for specifying length are available including pt (points), pc (pica), em (the length of a capital M in the current font), ex (the height of the letter x in the current font), mm (Millimeters), cm (Centimeters), and in (inches).

5. Images,

in additions to text, can be positioned using these CSS constructs.

Cascading Style Sheets - Positioning

Within the <head> tags

Within the <body> tags

Observations