Setting How an Element Is Displayed


You may remember from Chapter 1 that all elements can be classified according to how they're displayedinline or block (see "Kinds of Tags"). By default, every tag has a display style that defines how it will fit with other tags around it.

You can use the display property to define whether an element includes line breaks above and below (block), is included inline with other elements (inline), is treated as part of a list, or is displayed at all. Table 6.1 shows the different values available for the display property:

Table 6.1. Display Values

VALUE

COMPATIBILITY

list-item

IE 5[**], FF1, S1, O3.5, CSS1

block

IE4[*], FF1, S1, 03.5, CSS1

inline

IE4[*], FF1, S1, 03.5, CSS1

table

IE5[***], FF1, S1, 04, CSS2

table-cell

IE5[***], FF1, S1, 03.5, CSS2

table-footer-group

IE5[**], FF1, S1, 03.5, CSS2

table-header-group

IE5, FF1, S1, 03.5, CSS2

table-row

IE5[***], FF1, S1, 03.5, CSS2

table-row-group

IE5[***], FF1, S1, 03.5, CSS2

none

IE4, FF1, S1, 03.5, CSS1

inherit

IE4, FF1, S1, 03.5, CSS1


[**] IE 6

[*] IE 5 for Windows

[***] Mac only, not available for Windows

  • list-item places a list-item marker on the first line of text, as well as a break above and below. This code allows the item to be used as part of a list even if you're not specifically using a list element. Using list-item to create lists out of non-list elements is discussed in Chapter 10.

  • block defines this tag as being a block-level box, placing a line break above and below the box. Setting this will automatically force the width of the box to the width of the parent element's box.

  • inline defines this tag as being an inline box, suppressing line breaks immediately before and after the box.

  • table , or any one of the other table values shown in Table 6.1, allows you to turn any tag into part of a data table. Unfortunately, these are not thoroughly implemented in Internet Explorer for Windows, and so may prove of limited use. Table values for the display property will be discussed in further detail in Chapter 9.

  • inherit uses the display value set or implicit for the element's parent.

  • none causes this element not to display in CSS browsers. It will look as though the content doesn't exist on the page.

To set an element to be placed inline:

1.

display:




Start your declaration by typing the display property name, followed by a colon (:), in the CSS declaration block.

2.

inline;




Type the inline value for how this element will be displayed, causing it to flow beside other elements before and after it. In this example (Figure 6.4 and Code 6.1), several elements are set inline, most notably the paragraph tag within the copy ID, which overrides the p tag's natural inclination to have line breaks before and after.

Figure 6.4. Block-level elements, like the paragraph, can be turned inline so that they run together without a break.


Code 6.1. Setting display to inline will remove line breaks above and/or below the element.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting How an Element is Displayed (or not) | Inline</title> <style type="text/css" media="screen"> <!-- body {      font-size: 1em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff; } h1, h2 {      color: #999; } #navigation {      background-color: #ccc;      font: small Arial, Helvetica, sans-serif; } # navigation a {      display: inline;      color: red; } # navigation a:hover {      background-color: #fff; } # copy p {      display: inline; } .chapterTitle {      font-size: smaller;      color:black; } .dropBox {      float: right;      font: x-small Arial, Helvetica, sans-serif; } --> </style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div >      <h1>Alice's Adventures in Wonderland</h1>      <p >Lewis Carroll</p>      <form action="#" method="get" >      Search Book:      <input  type="text" name="searchTerm" size="24" />      <input  type="submit" name="findSearchTerm" value="Find" />      </form>      <h2>CHAPTER I         <span >Down the Rabbit-Hole</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice29.gif" height="236" width="200" alt="Alice in Wonderland" /> Alice meets the Queen of Hearts.</div> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of  having nothing to do: once or twice she had peeped into the book her sister was reading,  but it had no pictures or conversations in it, 'and what is the use of a book,' thought  Alice 'without pictures or conversation?'</p> </div> </body></html>

To set an element to be placed as a block:

1.

display:




Start your declaration by typing the display property name, followed by a colon (:), in the CSS declaration block.

2.

block;




Type the block value for how this element will be displayed, rendering it separate from the elements before and after it. In this example (Figure 6.5 and Code 6.2), the img tag for images is turned into a block-level element, forcing the text caption underneath it. Additionally, all links in the navigation box are forced to be block elements, creating a more readable list than when they were presented inline in the previous figure.

Figure 6.5. Inline elements such as the menu links, the span tag, and images, can be turned into block elements that break, forcing content above and below onto another line.


Code 6.2. Setting display to block forces line breaks above and below the element.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting How an Element is Displayed (or not) | Block</title>         <style type="text/css" media="screen"> <!-- body {      font-size: 1em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff; } h1, h2 {      color: #999; } img {      display: block; } #navigation {      background-color: #ccc;      font: x-small Arial, Helvetica, sans-serif;      float: left; } #navigation a {      display: block;      color: red; } #navigation a:hover {      background-color: #fff; } #copy p {      display: block; } .chapterTitle {      display: block;      font-size: smaller;      color:black; } .dropBox {      float: right;      font: x-small Arial, Helvetica, sans-serif; } --></style>      </head>      <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" >      Search Book:      <input  type="text" name="searchTerm" size="24" />      <input  type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER I      <span >Down the Rabbit-Hole</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice29.gif" height="236" width="200" alt="Alice in Wonderland" /> Alice meets the Queen of Hearts.</div> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of  having nothing to do: once or twice she had peeped into the book her sister was reading,  but it had no pictures or conversations in it, 'and what is the use of a book,' thought  Alice 'without pictures or conversation?'</p> </div> </body></html>

To set an element not to be displayed:

1.

display:




Start your declaration by typing the display property name, followed by a colon (:), in the CSS declaration block.

2.

none;




Type the none value to remove this element from the page. In this example (Figure 6.6 and Code 6.3), the navigation, search, and figure have all been removed. While this doesn't look so interesting onscreen, it can be great for a print version of the page. Who needs navigation links, search forms, and low-resolution graphics on paper?

Figure 6.6. If you want to hide an element completely, you can use display:none. Notice that no space is reserved for the elementsit's as if they do not exist, even though they are still in the HTML code.


Code 6.3. Setting display to none will cause the element to disappear completely.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting How an Element is Displayed (or not) | None</title>         <style type="text/css" media="screen"> <!-- body {      font-size: 1em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff; } h1, h2 {      color: #999; } form {      display: none; } #navigation {      display: none; } .chapterTitle {      display: block;      font-size: smaller;      color:black; } .dropBox {      display: none;      float: right;      font: x-small Arial, Helvetica, sans-serif; } --></style>      </head>      <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" >      Search Book:      <input  type="text" name="searchTerm" size="24" />      <input  type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER I      <span >Down the Rabbit-Hole</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice29.gif" height="236" width="200" alt="Alice in Wonderland" /> Alice meets the Queen of Hearts.</div> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of  having nothing to do: once or twice she had peeped into the book her sister was reading,  but it had no pictures or conversations in it, 'and what is the use of a book,' thought  Alice 'without pictures or conversation?'</p> </div> </body></html>

Tips

  • Any elements that are assigned display:none will simply be ignored by the browser. Be careful in using none, however. Although it is not an inherited attribute, none turns off the display of the element as well as any children elements within it.

  • Another great use for none is to use it to create a print-specific style sheet that hides elements not needed on paper, such as navigation and form fields.

  • Although at first glance the none value may seem to be a description of its usefulness, this will actually prove to be one of the most important CSS attributes we'll use with DHTML. By initially setting the display of an element to none, and then resetting the value using JavaScript, you can create several useful interface controls, such as drop-down menus, pop-up hypertext, and slide shows (see Chapter 24).

  • The display property should not be confused with the visibility property (see "Setting the Visibility of an Element" in Chapter 8). Unlike the visibility property, which leaves a space for the element, display:none; completely removes the element from the page, although the browser still loads its content.

  • Using JavaScript, you can create a simple collapsible menu by switching display between inline and none to make menu options appear and disappear (see "Creating Collapsible Menus" in Chapter 23).





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net