div Formatting Text Blocks
<div> Formatting Text BlocksYou can use the <div> element to select or enclose a block of text, usually so that you can apply styles to it. This element is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes:
This element supports these XHTML events: onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , and onkeyup . The <div> element allows you to refer to an entire section of your document by name . You can replace the text in it from JavaScript code, as we did in Chapter 7, "Handling XML Documents with JavaScript." There we read in XML documents and worked with them, displaying results using the <div> element's innerHTML property in Internet Explorer, as in this HTML document, ch07_02.html: <HTML> <HEAD> <TITLE> Reading XML element values </TITLE> <SCRIPT LANGUAGE="JavaScript"> function readXMLDocument() { var xmldoc, meetingsNode, meetingNode, peopleNode var first_nameNode, last_nameNode, outputText xmldoc = new ActiveXObject("Microsoft.XMLDOM") xmldoc.load("ch07_01.xml") meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.firstChild peopleNode = meetingNode.lastChild personNode = peopleNode.lastChild first_nameNode = personNode.firstChild last_nameNode = first_nameNode.nextSibling outputText = "Third name: " + first_nameNode.firstChild.nodeValue + ' ' + last_nameNode.firstChild.nodeValue messageDIV.innerHTML=outputText } </SCRIPT> </HEAD> <BODY> <CENTER> <H1> Reading XML element values </H1> <INPUT TYPE="BUTTON" VALUE="Get the name of the third person" ONCLICK="readXMLDocument()"> <P> <DIV ID="messageDIV"></DIV> </CENTER> </BODY> </HTML> Here's an XHTML example. In this case, I'm enclosing some text in a <div> element and styling the text in bold red italics with an XHTML <style> element (more on the <style> element in the next chapter): Listing ch16_14.html<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using the <div> tag </title> <style> div {color: red; font-weight: bold; font-style: italic} </style> </head> <body> <center> <h1> Using the <div> Element </h1> </center> <p> <div> This text, which <br /> takes up multiple lines, <br /> was formatted all at once <br /> in a single <div> element. </div> </p> </body> </html> You can see the results of this XHTML in Figure 16-12, where, as you see, all the lines in the <div> element were styled in the same way. Figure 16-12. Styling text with the <div> element. The W3C suggests that you use the <div> element's align attribute to replace the now deprecated <center> element, by setting align to "center". That would look like this, where I'm modifying the example from the previous section: Listing ch16_15.html<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using the <div> Element </title> </head> <body> <div align="center"> <h1> Using the <div> Element </h1> </div> <div align="center"> The <div> element is a <br /> useful one for centering <br /> text made up of <br /> multiple lines. </div> </body> </html> In fact, although W3C documentation suggests that you use the align attribute, the W3C seems to have forgotten that it deprecated that attribute in HTML 4.0. The way to center text now is to set a <div> element's text-align style property to "center" . That might look like this: Listing ch16_16.html<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using the <div> Element </title> <style> div {text-align: center} </style> </head> <body> <div> <h1> Using the <div> Element </h1> </div> <div> The <div> element is a <br /> useful one for centering <br /> text made up of <br /> multiple lines. </div> </body> </html> This works as plannedthe text is indeed centered in the browser. Using the positioning style properties, you can also position text with the <div> tag, even overlapping displayed text blocks. There's another handy element that you can use to select text and apply styles: <span> . |
EAN: 2147483647
Pages: 440