Using CSS

Invisible Text

There may well be occasions where you will need to remove content from a page until the user requests it, or you may need to insert content which is only visible when the stylesheet is turned off (normally because an image containing text is a background image in a style whcich won't be visible when the stylesheet is removed).

There are two ways to turn elements off using styles, but they have slightly different properties.

Choose Method: Show Dreamweaver Instructions | Show Code

Display

The code used with the display style is very simple - set display to none. This method not only makes the text with the style attached invisible in the browser window, it also make it invisible to screen readers and printers etc. It's like saying - this text doesn't exist. It useful for hiding extra non-relevant links or content.

In Dreamweaver's CSS window, select the block panel and change display to none.

The CSS code for 'display' looks like this

.invisible{
display: none
}

The HTML code for 'display' looks like this

<p class="invisible">
invisible text here
</p>

Resize

The second option uses a resize method and is a little more complex. Essentially it sets the width and height to 0 so that it has no size, and then hides any text overflow. This method makes the text invisible in a browser window, but it remains visible to screen readers. It's useful for hiding (to visual users) links that you only want to show to screen readers eg a skip to text link.

  • In Dreamweaver's CSS window, select the positioning panel and set
    • Type: Absolute
    • Height: 0em
    • Height: 0em
    • Overflow: Hidden

The CSS code for the resize method looks like this.

.invisible {
overflow: hidden;
position: absolute;
height: 0em;
width: 0em;
}

The HTML code for 'display' looks like this

<p class="invisible">
invisible text here
</p>