[More terms] [Glossary Index] [Home]
- P tag
The most commonly used HTML tag and also the most commonly misused. Netscape4, in particular, has problems with poor use of the paragraph tag but the problems are compounded when CSS is used. Problems arise from one point only: Omission of the </p> end tag. Even some WYSIWYG editors are at fault, adding <p> at the end of a paragraph to create a break in the text when the correct syntax is <p> at the very beginning of the paragraph and </p> at the end. All text on your page should be within <p> </p> tags and the first tag after the <body> tag would usually be <p>. Omitting the end tag causes problems with CSS text settings made in the <body> tag being ignored. Always start paragraphs with a <p> and end with </p>. The old align attribute for the <p> tag is deprecated in HTML4, use style sheets by specifying a class in the tag:
<p class=mypara></p>
Top - Padding
See also the more commonly required margin. Padding space is only within the border of an element (whether the border is drawn or not) so does not affect other objects on the page. Padding, by default is even on all sides. Use padding-top, padding-right, padding-bottom and padding-left to position an element off centre inside the invisible box that contains each individual element on the page. If you don't change the border or margin, the box width won't be changed so there is a limit to how far an item can be padded. If you need more padding, enlarge the box using margin.
MarginBorderPaddingContentBox width
element background
element width - Password
Javascript
Password inherits properties, methods and event handlers from Input and HTMLElement. Only additional or over-ridden features are mentioned here.
- PropertiesTo read the value entered in a password control:
var value = document.formname.inputname.value;function mychange() {
var value = document.demo.pwd.value;
alert("CodeHelp: glossary: password.onchange(): value = " + value);
}
<form method=post action="/cgi-bin/dummy.pl" onchange="mychange();">
<input type="password" id="pwd" size="10"> </form>
- Properties
- Positioning
Position and Javascript. You must specify either relative position or absolute position for an element to be visible by Javascript, even though relative is the default.
Position property. See absolute and relative.
Changing positions: Movement. Javascript can access the position attributes of all page elements and change the values. Changes are reflected in the page in real-time, giving the illusion of movement. Unfortunately, Internet Explorer and Netscape differ greatly in how Javascript accesses CSS elements because of a difference in the DOM - Document Object Model. To access a CSS element given the attribute id=testelement you use the following syntax followed by the name of the style property whose value you want to change.
- In Internet Explorer
testelement.style. - In Netscape
document.testelement.
To change the position of the top of the element use:
document.all.testelement.style.top=100;in IE anddocument.testelement.top=100;in Netscape.
Other browser differences. Netscape only allows real-time changes to the position, visibility and clipping of CSS elements or any content of a deprecated <layer> tag. Internet Explorer allows Javascript to access all CSS elements and updates the page in real-time after changes not only to position but to any CSS property like colour, background and font. For more information and to see how to create one DOM for both browsers, see DHTML by Jason Cranford Teague.
DHTML and Javascript code to drop content down from above the top of the screen:
<div id=active style="position:absolute; top-400; left:0;">
CONTENT
</div>
Makes the content of the div tag available to Javascript as the element "active" and sets the initial position of the element as 400 pixels above the screen. Adjust this value if the content occupies more than 400 pixels. The position needs to be absolute so that you have full control over the movement. Relative positioning should be used for smaller movements within the context of the page. Now we can look at the Javascript:<script language="Javascript1.2" type="text/javascript">
<!--
ytop=-400;
function drop() { if (ytop < 0) { ytop += 10;
active.style.top = ytop;
setTimeout("drop()",10)}}
// -->
</script>
Note the line active.style.top = ytop; This line is written for Internet Explorer. The Netscape version would be: document.active.top = ytop; If you are unsure about any of the Javascript code above, see the Javascript Pocket Reference.
Top - In Internet Explorer
- Pseudo
Pseudo-classes See the CodeHelp site for the syntax. Netscape does not support all features of pseudo-classes but does use the colours specified. This is important in making HTML4 documents that do not use deprecated tags.
Pseudo-elements First-line and first-letter are now supported by most recent browsers. The syntax is:
<style type="text/css">
P.example {width:60%;}
P.example:first-line {font-size:10pt;color:blue;}
P.example:first-letter {color:red;font-size:2.6em;line-height:0.9em;float:left;width:0.7em;padding-right:2px;}
</style>
This is a test paragraph using the pseudo-elements first-line and first-letter.
The style of the text should change when the text wraps to the second line or when a <br>
tag is used. Note how the text flows around the drop-cap because of the use of the float style. Note also how you can define the other style settings for the rest of the paragraph. One obvious use for :first-letter is in the creation of drop-capitals.Pseudo-selectors Currently recognized selectors are . and # for class and id respectively. The CSS Specification includes the possibility of pseudo-selectors denoted by ; but at present none are in use.
Top
[http://www.codehelp.co.uk/query/glossaryP.shtml] is part of www.codehelp.co.uk
Copyright © 1998-2004 Neil Williams
See the file about.html for copying conditions.
