Week Seven | Part One: The Non-Displaying Element

HTML Display Characteristics Review Déjà vu - All Over Again!

HTML elements (words, pictures, etc.) are written into your Web page code in four different ways:

• In blocks (one element follows the next top-to-bottom).
• In a line (one element follows the next left-to-right.)
• In a list (like this one).
• Not at all (shows in your code, but not in your browser).

In Week Two - Part One we looked at block-level elements.

In Week Three - Part One we discovered we could change the display of block-level and in-line elements by means of the display attribute in CSS.

In Week Five - Part One we looked at how to use the List Item to present content and navigation.

Let's take a minute to examine the last type of element --- Not at all --- more precisely described in CSS as display: none.

{display:none;}

Let's start with an example: Douglas Hooper (This link opens a new window)

If it seems I am tooting my own horn, but I'm not. Rather, I am tooting my own style sheet!

If you view the source code for my page, you will see there are two embedded style sheets applied to my page --- one for a computer screen, and one for a printed page:

<style type="text/css" media="screen">

<style type="text/css" media="print">

If you scroll through the style sheets (please do that) you will see there are two elements at are changed in their display properties:

• img (shows on screen, but not on print)
• div.url (shows on print, but not on screen)

Allow me to present just each element in their corresponding embedded style sheet:

Screen version:

<style type="text/css" media="screen">

img {margin-top: 20px;
     margin-left: 15px; } 
	

div.url { display: none; }
	

Print version:

<style type="text/css" media="print">

img {display: none; }


div.url { font-family: "Arial", Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-align: right;
	color: #000000; }

Notice the difference?

According to my design, I *want* my img to show on the computer screen, but not when someone decides to print the page.

The div.url class allows me to control the font that appears at the top of the page showing my Web site address if the page is printed.

(Most people don't control this, but I was determined to make sure this was printed in a font different from the font used on the printer version of my resume page.)

By the way, if you decide you print my resume, the printer font (Times New Roman) makes it easier to read on paper. The screen font (Arial) is more suited to reading online. Again, look at the source code of my resume page and examine each embedded style sheet.

The point of all this is, you can turn elements on and off, at least to your Web site visitors. The elements are there in your code, but not necessarily on the screen or printed page.