and Height
Height of 5cm
This assignment will use the new rules introduced in the layout chapters.
Create a web page that incorporates at least the following:
Note that some browsers -- such as the one you use :) -- may not display all properties correctly. That is okay, just do the exercise and pretend it would work -- and it may indeed work in future browsers that adhere closer to the CSS standard, which is why we are learning this now!
As always, your page will probably be ugly. That's okay. (Give yourself a gold star if you can make it look good, though!)
The Styles below have been tested in NN 4.06, IE 4.0 and Opera 3.51. They do not necessarily work in all these browsers ;=((((
This document has left and right margins at the BODY level of 10%.
This text has a negative left margin of -5%, which has moved the paragraph back into the BODY document margin. It also has a right margin of -10% which should mean that the text goes right up to the right hand side of the web browser window .... at least that is the plan. This does not seem to work in Netscape Navigator 4.06, but it does work in Internet Explorer 4.0 and Opera 3.51.
This text has a negative margin top of -0.5in. This should therefore overlay the H4 "margin-top" tag.
This text uses margin to have top margin of -30px, a bottom margins of zero, with
left and right margins of 30% (remember there is document margin of 10% too). This text should
then appear in a column that is 20% of the browser window width wide and in the centre.
However, only Opera 3.51 seems to do this correctly. The horizontal bar below is 20% of the
screen width but this column is wider in Netscape Navigator and Internet Explorer.
I decided to look at border styles before padding. The reason being is that padding modifies the gap between the element and the border. So, I'll look at borders first, then look at padding combined with borders so that I can witness the effect.
This text contains a border using the border-top-width, -bottom-, -left- and -right-. In order
the values applied are "thick", "10mm", "medium" and "thin". Lets see how they look.
Netscape Navigator 4.06 does support these border styles, but causes the right margin to be
ignored. Internet Explorer 4.0 and Opera 3.51 do not show the border styles.
Dotted - Opera OK, Netscape nor Internet Explorer
Dashed - Opera OK, Netscape nor Internet Explorer
Solid - Opera, Netscape and Internet Explorer OK
Double - Opera, Netscape and Internet Explorer OK
Groove - None of Opera, Netscape nor Internet Explorer
Ridge - Opera, Netscape and Internet Explorer OK
Internet Explorer ignores the style with border-color set.
Netscape Navigator seems to inherit the border-color set on earlier elements.
Inset - Opera, Netscape and Internet Explorer OK
Internet Explorer ignores the style with border-color set.
Netscape Navigator seems to inherit the border-color set on earlier elements.
Outset - Opera, Netscape and Internet Explorer OK
Internet Explorer ignores the style with border-color set.
Netscape Navigator seems to inherit the border-color set on earlier elements.
The borders above have been created using border-style on conjunction with border-color and border-width. Opera 3.51 and Internet Explorer however will display the borders they support without the need to specify border-width, but Netscape (at least version 4.06) does not. However, Netscape and Opera support border-color for all border styles but Internet Explorer 4.0 does not (Ridge, Inset and Outset all become solid with a border-color).
The elements below all have borders so that the effect of the "padding" can be seen. The effect of padding is different each of Netscape Navigator 4.06, Internet Explorer 4.0 and Opera 3.51.
This paragraph element has no padding set so the defaults will be used.
This paragraph has a top padding of 10 millimetres (1 centimetre).
This paragraph has a bottom padding of 20 px.
This paragraph has a left padding 30 %.
This paragraph has a right padding of 1 inch.
Not supported by Netscape Navigator.
|
Default Width and Height |
Height of 4 inches | Width of 1 inch |
Width of 2 cm Height of 5cm |
|---|---|---|---|
|
|
|
|
|
The introduction of floating below sent the version of Internet Explorer that I have at home into a mild panic ;=( The float works how I would expect in Netscape Navigator 4.06 and Opera 3.51.
This image and paragraph are contained within a style that has a very wide left and right hand
margins so that we can see the effect of floating without the need to write volumes of text.
This section has no float.
Floating to the left.
This image and paragraph are contained within a style that
has a very wide left and right hand margins so that we can see the effect of floating
without the need to write volumes of text. This sentence should ensure that the paragraph
extends beyond the size of the image so we can see how the text wraps around the image.
Floating to the right.
This image and paragraph are contained within a style that
has a very wide left and right hand margins so that we can see the effect of floating
without the need to write volumes of text. This sentence should ensure that the paragraph
extends beyond the size of the image so we can see how the text wraps around the image.
No clear.
This image and paragraph are contained within a style that
has a very wide left and right hand margins so that we can see the effect of floating
without the need to write volumes of text. This sentence should ensure that the paragraph
extends beyond the size of the image so we can see how the text wraps around the image.
Clear to the right.
This paragraph starts after a <BR>
(break) tag that has a clear: right style. This means it will start immediately after
the image.
The paragraph following this paragraph has absolute positioning. It will appear at the position:
In other words; right at the top of this document. Scroll back up and have a look.
This text starts at the absolute position 1px from the top of the document, and 1px from the left. The margins defined for the document are ignored for the first line of this paragraph.
The absolute positioning seems to be a bit buggy. It works in Netscape Navigator 4.06 but not in Internet Explorer 4.0 nor Opera 3.51.
The paragraph following this paragraph has relative positioning. It will appear as small black text and be overlayed by the paragraph following it.
This text appears 10px from the left hand margin and 50px from the end of the previous paragraph.
This text and image should overlay the paragraph that was positioned using the relative style.
Opera 3.51 does not seem to support positioning at all.
The following text should be clipped (assuming the browser supported clip).
CLIPPED TEXT: This text should be clipped
Unfortunately, the clipped paragraph seems is not displayed at all. Without clip it appeared but was removed when I added clip. Even using the "auto" values I could not get the text to re-appear in any browser ;=(
Visibility on.
The image to the left is visible. The remainder of this paragraph is filling to show the effect
of how the text wraps around the image. At the end of the image this text will flow under the
image because the float style is also being used. If the image was invisible, the text would
still flow around the area where the image would normally be, check out the next paragraph.
Visibility off.
The image to the left is invisible. The remainder of this paragraph is filling to show the
effect of how the text wraps around the "invisible" image. At the end of the image this
text will flow under the "invisible" image because the float style is also being used. Notice
the similarities of the text flowing in this paragraph and the one above.
Invisibility doesn't seem to work in the browsers I tried.
This completes this assignment. Obviously, the style elements above can be used together to create both interesting, and hideous web pages. My objective was to use it one, and to see how they were displayed in Internet Explorer 4.0, Netscape Navigator 4.06 and Opera 3.51.
Back to my CSS Course Index.
