CNIT 132 – Week 4 Cascading Style Sheets – Positioning (CSS-P) (Copy from Dr. Thiry)

CNIT 132 – Week 4

Cascading Style Sheets – Positioning (CSS-P)

(Copy from Dr. Thiry)

Introduction to CSS-P

CSS-P (part of the CSS2 standard) is essential for Dynamic HTML/DHTML work. CSS-P (or Cascading Style Sheets Positioning, a part of the unevenly implemented

CSS2 standards) allows the web programmer to position HTML-formatted resources anywhere they like on a web page.

CSS-P provides a Quark-like or PageMaker-like paradigm for laying out HTML content, replacing tables as the primary means for page layout in HTML.

Unfortunately, due to some serious bugs and uneven implementation of the standards in both Netscape and Internet Explorer browsers, the day when web programmers can replace tables-based layout with CSS-P-based layout is still some years away. In the meantime, CSS-P provides programmers with a means for creating application-like screens from positioned "layers" which, in combination with JavaScript, can be used to create simple "dynamic" HTML content (or DHTML).

Sometimes Netscape and Internet Explorer browsers fail to generate scrollbars on an entirely CSS-P-based HTML page which scrolls beyond the bounds of the browser window. Therefore, you must use CSS-P very sparingly in your websites, and only within the "splash" region of your HTML page (within the first 300-400 pixels in height, and 500-700 pixels in width) so that the user won't have to scroll to see the CSS-P-based content. Due to difficulties in combining positioned and non-positioned elements reliably, you should probably also use CSS-P only by itself, not in combination with regular HTML on a page. These are not hard-and-fast rules, of course, but merely suggestions for avoiding technical difficulties.

CSS-P Basic Positioning

Only ONE type of HTML tag should normally be positioned: the DIV tag. This sounds very restrictive, but it's really not, because ANY type of HTML content may be placed WITHIN the DIV tag which we're positioning. Again, only the DIV tag itself will actually have CSS-P properties assigned to it.

Conversely, the positioned DIV tag will ONLY have CSS-P properties assigned to it; you won't be assigning regular text-formatting CSS properties to a DIV tag. Text-formatting properties will only be assigned to the P tag, the heading tags, etc, as usual.

The DIV tag was originally created to mark a section division within a larger HTML page, but it has been co-opted by CSS-P to mark positionable elements. As I mentioned earlier, you may put any sort of HTML content you like within a positioned DIV tag.

CSS-P example 1

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; } //--> </style> </head> <body> <div id="fred"> <img src="capitalA.gif" width="54" height="54"> </div> </body> </html>

In the above example, fred's upper-left-hand corner is positioned 100 pixels from the left, and 30 pixels from the top.

CSS-P example 1

Again, there are a minimum of THREE essential CSS-P properties required to position an element: position, left, and top. The position property declares what sort of positioning we're talking about (there are several different types); the left property gives the x-coordinate (in pixels) for the positioned element; the top property gives the y-coordinate (in pixels) for the positioned element.

CSS-P Required Properties

Property: position Values: relative, absolute, fixed

Example: position:absolute; Relative positioning is hard to control, imperfectly implemented, and rarely

used; see "Cascading Style Sheets: The Definitive Guide" by Eric Meyer for more information. You won't be dealing with it in this tutorial.

Fixed positioning removes an element from the flow of HTML code and "fixes" that element in the web browser window so that other elements on an HTML page scroll up and down while the "fixed" element remains stationary, stuck in place. Fixed positioning is only implemented in the 5 and 6 browsers; as long as we are supporting the 4 browsers, we may not use fixed positioning.

Absolute positioning is the most commonly used type of positioning, and the sole type of positioning addressed in this tutorial. An absolutely positioned element is removed from the regular flow of HTML code and positioned in relation to the upper-left-hand corner of the web page. In this tutorial (and in CSS-P for most purposes), the position property will ALWAYS be set to absolute.


Property: left Values: integer-based pixel values (i.e. 10px,

172px, 59px, etc) Description: sets the x-coordinate for the

positioned element, in pixels. Example: left:10px;


Property: top Values: integer-based pixel values (i.e. 10px,

172px, 59px, etc) Description: sets the y-coordinate for

positioned element, in pixels. Example: top:25px;


ALWAYS define left and top properties using integer pixel-based values.

Again, position, left, and top properties are all REQUIRED when using CSS-P.

You may define as many positioned DIV tags on an HTML page as you wish, each with its own unique ID and CSS ID declaration.

Note: Early versions of Netscape 4 begin to misbehave after 40+ sibling positioned elements; later versions of Netscape 4.x and other browsers can handle larger numbers of sibling elements.

CSS-P example 2

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; } //--> </style> </head> <body> <div id="fred" border="1"> <table width="200"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </div> </body> </html>

Positioning Text: The width Property You can position paragraphs of text in the same way that you position images, using a positioned

DIV tag.

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; } //--> </style> </head> <body> <div id="fred"><p>Here is some text. It is not very exciting text, but it is long. Long, long text. It goes on and on and on. Why, look at all this text! I wonder if it will ever say anything interesting? No, I think not! But it sure is long!</p>

<p>Here is another paragraph of text. This one is short.</p></div></body></html>

Notice how the text wraps to the edge of the browser window in the displayed example? If you want to control the width of the text column, you need to set the width property of the positioned DIV element, in addition to the position, left, and top properties.

Positioning Text: The width Property Property: width

Values: any integer-based pixel value (100px, 250px, etc)

Description: The width property sets the width of a positioned element.

Example: width:250px;

Positioning Text: The width Property

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; width:250px; } //--> </style> </head> <body> <div id="fred"><p>Here is some text. It is not very exciting text, but it is long. Long, long text. It goes on and on and on. Why, look at all this text! I wonder if it will ever say anything interesting? No, I think not! But it sure is long!</p>

<p>Here is another paragraph of text. This one is short.</p></div></body></html>

When Elements Overlap: The z-index Property When two positioned elements overlap, how do

you tell the browser which element goes in front? Just as you use the left property to set the x-axis (left to right) value, and the top property to set the y-axis (up and down) value, you need to use the z-index property to set the z-axis (forward and back) value in this flattened three-dimensional space; z-index tells the browser which element goes in front and which element goes behind.

When Elements Overlap: The z-index Property Property: z-index

Values: 0 (zero) or any positive integer; negative values are not permitted.

Example: z-index:10; The higher the z-index value is, the farther in

front an element becomes; the lower the z-index value is, the farther in back an element becomes. 0 (zero) is the smallest value that may be legally set for z-index. You may not use negative numbers for z-index, nor may you use numbers with decimal places.

When Elements Overlap: The z-index Property In the following example, I have two positioned DIV tags, fred (which contains the letter A graphic)

and martha (which contains the letter B graphic). I have set fred's z-index to 10, and martha's z-index to 20; martha, therefore, is in front of fred.

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; z-index:10; } #martha { position:absolute; left:120px; top:45px; z-index:20; } //--> </style> </head> <body> <div id="fred"> <img src="capitalA.gif" width="54" height="54"> </div> <div id="martha"> <img src="capitalB.gif" width="54" height="54"> </div> </body> </html>

Again, higher z-index values go in front, lower z-index values go in back. If NO z-index value is set, or BOTH z-index values are identical, then whichever DIV element

comes LATEST on the HTML page goes in front.

Making a Colored DIV Box

You can turn a positioned DIV tag into a colored box. This feature is particularly useful when creating application "screens" for DHTML purposes. It can also be used, to a much lesser extent, as a means of creating low-weight design elements without GIFs.

There is only one real way to create these colored boxes which are supported by ALL of the browsers properly. First, you must create a DIV tag on your page and position it, as usual. In this case, however, the DIV tag will be empty (although it doesn't have to be, as we'll see in later sections).


<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; } //--> </style> </head> <body> <div id="fred"> </div> </body> </html>

Now, obviously, this isn't complete. To create the box, you must define BOTH the width and height properties in your CSS declaration using pixel values; this will give dimension to your box.


Property: width Values: any positive integer-based pixel value (100px,

250px, etc). Description: defines the width of a positioned

element.

Property: height Values: any positive integer-based pixel value (100px,

250px, etc). Description: defines the height of a positioned

element.


In addition to width and height, you must ALSO set background-color and layer-background-color properties, to give color to the box; both of these properties should be set to the SAME hex code color value. The background-color property is supported by Internet Explorer 4/5 and Netscape 6; the layer-background-color property is supported by Netscape 4.x.

Property: background-color Values: any hex code color value (#CC66CC, #FFCCCC, etc)

Description: defines background color for a positioned element in IE4/5 and Netscape6.

Property: layer-background-color Values: any hex code color value (#CC66CC, #FFCCCC, etc)

Description: defines background color for a positioned DIV element in Netscape 4.x.


Last, but not least, you MUST set the border property for the positioned element. The border property ensures that the box will be solid and opaque on all browsers. Without the border property, the box will not be cross-browser compatible.

The border MUST be solid, 1px wide, and the SAME color as the background color; we'll talk more about this in a moment.

Property: border Values: border type (solid), width of border (1px), hex code

for color of border (same as background color); each of these values MUST be separated by one space, no commas!

Example: border:solid 1px #CC99CC;


<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred {

position:absolute; left:100px; top:30px; width:100px; height:100px; background-color:#996699; layer-background-color:#996699; border:solid 1px #996699; }

//--> </style> </head> <body> <div id="fred"> </div> </body> </html>

The border MUST be the same color as the background color; this is due to flaws in CSS implementation in Netscape 4.x. Here is a graphic which depicts what happens when you use a border which is DIFFERENT in color from the background color, as seen in Internet Explorer 5 vs. Netscape4.x:


Just as with regular CSS-P positioned elements, you may use the z-index property to indicate which DIV box goes in front. In the following example, I have positioned fred in front of martha.

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #fred { position:absolute; left:100px; top:30px; z-index:20; width:100px; height:100px; background-color:#996699; layer-background-color:#996699; border:solid 1px #996699; } #martha { position:absolute; left:150px; top:100px; z-index:10; width:100px; height:50px; background-color:#336699; layer-background-color:#336699; border:solid 1px #336699; } //--> </style> </head> <body> <div id="fred"> </div> <div id="martha"> </div> </body> </html>

Again, the procedure that I have outlined above is the one and only way you can make boxes out of DIV tags which will be respected on all browsers on all platforms. These sorts of boxes are used frequently in DHTML.

Positioning Within a Colored DIV Box: Child DIV Tags Putting text, images, or other HTML content directly into a

positioned and colored DIV box produces results which are inconsistent from browser to browser and not entirely satisfying, aesthetically. It is impossible to control the distance between the content and the edge of the DIV box consistently when the content is plopped directly into a colored and positioned DIV box.

To produce consistent appearance and to control properly the distance between the edge of positioned content and the edge of a DIV box, one must put HTML content into positioned DIV tags which are NESTED INSIDE the positioned, colored DIV box.

<div id="parentDiv"> <div id="childDiv"> <p>Here is some text. And some more text. And so on and so on and so on.</p> </div> </div>

Positioning Within a Colored DIV Box: Child DIV Tags

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #parentDiv { position:absolute; left:100px; top:30px; width:200px; height:200px; background-color:#CC99CC; layer-background-color:#CC99CC; border:solid 1px #CC99CC; } #childDiv { position:absolute; left:10px; top:10px; width:180px; } //--> </style> </head> <body> <div id="parentDiv"> <div id="childDiv"> <p>Here is some text. And some more text. And so on and so on and so on.</p> </div> </div> </body> </html>

Positioning Within a Colored DIV Box: Child DIV Tags In the above example, you can see that I have created a DIV box named "parentDiv" which is

200x200. Inside the "parentDiv" DIV tag, I have nested another DIV tag called "childDiv" which contains a paragraph of text. "childDiv" has been set to be 180 pixels wide.

You will notice that the "childDiv" DIV tag's positioning is set at 10,10. Child nested elements are positioned in relation to the PARENT element, NOT to the web page as a whole. Therefore, "childDiv" is 10 pixels from the left and 10 pixels from the top of the PARENT element's upper-left-hand corner.

The "childDiv" DIV tag has been set to be 180 pixels wide. Since it has been positioned 10 pixels from the left of the parent element, and the parent element is 200 pixels wide, I want to create an even "margin" (it's not actually a CSS margin, but, rather, an artificial margin that we've created); to do this, I have made the "childDiv" 180 pixels wide, which wraps the text 10 pixels from the right edge of the parent box.

The point here is that, because padding, border, and margin properties do not work consistently cross-browser in CSS-P, I have had to create a fake margin by positioning a child element absolutely within an absolutely positioned parent element.

By making parent/child positioned elements in this fashion, you actually end up saving yourself trouble when you start moving into DHTML coding. This is due to a flaw in Netscape 4.x browsers which cause many CSS properties in an element (including many text-appearance properties and box appearance properties) to be thrown out when writing fresh HTML content into positioned DIV tags. Thus, if you write only to minimally formatted positioned child elements within a larger parent DIV box, the parent DIV box itself does NOT lose it's appearance characteristics and you can reduce the negative effects of this irritating bug.

If I were to then move "parentDiv", the "childDiv" DIV tag's positioning information would NOT have to be changed, but would move with the parent element automatically.

Positioning Within a Colored DIV Box: Child DIV Tags

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– #parentDiv { position:absolute; left:200px; top:100px; width:200px; height:200px; background-color:#CC99CC; layer-background-color:#CC99CC; border:solid 1px #CC99CC; } #childDiv { position:absolute; left:10px; top:10px; width:180px; } //--> </style> </head> <body> <div id="parentDiv"> <div id="childDiv"> <p>Here is some text. And some more text. And so on and so on and so on.</p> </div> </div> </body> </html>

Again, notice that although the "parentDiv" positioning information has changed, moving the entire element to another location on the page, the "childDiv" positioning information has NOT changed. This feature allows you to move the parent element around on different HTML pages without having to recalculate the child positions, as well.

Positioning Within a Colored DIV Box: Child DIV Tags You can position more than one element within a parent DIV tag. In fact, you can position as many elements as you like within a

parent DIV tag.

<html> <head> <title>Example CSS-P Page</title> <style type="text/css"> <!– /* parent DIV tag */ #donaldDuck { position:absolute; left:30px; top:75px; width:300px; height:200px; background-color:#CC99CC; layer-background-color:#CC99CC; border:solid 1px #CC99CC; } /* child DIV tags */ #huey { position:absolute; left:10px; top:10px; } #dewey { position:absolute; left:90px; top:20px; } #louie { position:absolute; left:50px; top:90px; width:200px; } //--> </style> </head> <body> <div id="donaldDuck"> <div id="huey"> <img src="capitalA.gif" width="54" height="54"> </div> <div id="dewey"> <img src="capitalB.gif" width="54" height="54"> </div> <div id="louie"> <p>Here is some text. And some more text. And so on and so on and so on.</p> </div> </div> </body> </html>

Positioning Within a Colored DIV Box: Child DIV Tags Within a parent DIV box in the above example, I have

positioned three child elements: two images and a paragraph of text.

This feature is extremely useful for creating a complex element, such as a nav bar, which has many component pieces which need to retain consistent positioning in relation to one another, but which, as a whole, you might want to position at different locations on different pages. If you didn't have this parent/child positioning, you would have to recalculate the positions of ALL of the various elements when you moved your navbar; this way, you only have to move the parent element, and all of the child elements follow suit.

Positioning Within a Colored DIV Box: Child DIV Tags When positioning parent/child elements, there are only a few rules to keep in mind:

1. The parent DIV element MUST be a colored DIV box to ensure cross-browser compatibility. You can't position child elements within a parent element on all browsers UNLESS the parent element is one of these colored DIV boxes.

2. 2. The parent DIV box MUST be LARGER than the child elements positioned within it. In other words, all of the child elements MUST fit COMPLETELY within the parent DIV box. Again, you must do this in order to ensure cross-browser compatibility; the browsers don't handle overflow of content in a consistent manner.

3. 3. You can NOT nest DIV tags more than ONE level deep! In other words, you can't have a child positioned element within a child element; this is because the browsers handle "tertiary" nestings in a mutually incompatible and inconsistent manner.

As you can see, the restrictions on this sort of CSS-P make it difficult to use for general purpose web page layout. We are rapidly moving into more advanced concerns as we brush the edge of DHTML. In DHTML work, this sort of construction is used very frequently, especially for nav bars and application interface elements.

CSS-P Hints and Closing Words I want to say again that, although I have only used embedded style

sheets to demonstrate CSS-P in this tutorial, I could equally well have used LINKED style sheets, so that I could easily reuse common positioned elements from HTML page to HTML page.

Due to a lack of consistent standards and other technical limitations, CSS-P is really more geared towards creating DHTML content; it's really not for use in everyday HTML page layout, except the occassional splash area, slide show, or specialty purpose. One day, when CSS-P has become more standardized in its implementation in the web browsers, you will be able to use it for general purpose HTML page layout, but not right now, not as long as we are supporting the v.4 browsers.

One hint: Don't define text appearance properties in IDs for positioned DIV tags; keep the text appearance properties confined to the text tags like P, H1, etc. Just use the IDs to assign positioning information; you'll find that you're better organized that way, and less likely to run into bizarre display inconsistencies.

CNIT 132 – Week 4 Cascading Style Sheets – Positioning (CSS-P) (Copy from Dr. Thiry)

Documents

Transcript of CNIT 132 – Week 4 Cascading Style Sheets – Positioning (CSS-P) (Copy from Dr. Thiry)