css styles visibility

C I S 6 7Fo u nd ati o n s fo r C re ati n g We b Pa ge s

Professor Al Fichera

CSS STYLES VISIBILITY

Rev. September 22, 2010—All HTML code brought to XHTML standards.

Reference for CIS127 and CIS 137

CSS Styles Visibility by Professor Al Fichera http://profal2.com

Content Control with overflowWhat happens if create a text box on the page and the

content of a box is bigger than the height and/or width you've defined for it? You can decide with the overflow attribute. The overflow choices are:

visiblehiddenautoscroll

September 22, 20102


Content Control: overflow:visibleVISIBLE— all the content will be displayed, even if it goes

outside the declared boundaries of the box.

div { width:150px; height:150px; overflow:visible; }

September 22, 20103


Content Control: overflow:hiddenHIDDEN— the browser clips off whatever content goes

"over the line."

div { width:150px; height:150px; overflow:hidden; }

September 22, 20104


Content Control: overflow:autoAUTO— the content will be clipped, but this time the

browser will display a scrollbar if it's needed, so the user can get to the rest of the content.

div { width:150px; height:150px; overflow:auto; }

September 22, 20105


Content Control: Overflow ScrollSCROLL— the content will be clipped, but this time the

browser will always display a scrollbar, even if it's not required.

div { width:150px; height:150px; overflow:scroll; }

September 22, 20106


CSS Controls visibility of Elements With CSS, you can actually make elements invisible or

hidden on the page.visible makes the element visible. hidden makes the element invisible. inherit means it will inherit its visibility from its parent

element.

September 22, 20107


CSS Control: visibility:visiblespan { visibility: visible }

September 22, 20108


CSS Control: visibility:hiddenspan { visibility: hidden }

September 22, 20109


CSS Control: visibility:hiddenWhen an element is hidden, it still takes up the same

amount of room in the browser window.If you're wrapping text around an image that you've

hidden, the “text will appear to wrap around an empty space”.

September 22, 201010

Element VisibilityIf visibility is set to hidden, the element will still be in the

document, taking up space, but will be invisible and appear as a big empty rectangle where the image should be. For example:.hide1 {visibility: hidden;}

In the body place the following: content here


Drop-Down MenusHere is a practical application for Visibility as a DHTML

Menu for your Web page navigation.This code uses a bit of JavaScript for implementation, and is shown

in the next few slides.


Create in a Style BlockIn the Head will have to create a small Style block to

begin.<style type="text/css">

#menu1 { display: none; margin-left:20px; }




</style>

Create an onClick Event HandlerA small onClick event begins the project in the body of

the page.



 DHTML Drop-Down Menu

Create the span Tag ContainerThen you’ll add the menu choices for the drop menu.

 DHTML Menu <a href="#">DHTML Link 01</a> <a href="#">DHTML Link 02</a> <a href="#">DHTML Link 03</a> <a href="#">DHTML Link 04</a>

Create a Second onClick EventThe next Drop-Down link is created.

 JavaScript Menu

Create the 2nd span Tag ContainerThen you’ll add the menu choices for the drop menu.

 CSS-P Menu <a href="#">CSS-P Link 01</a> <a href="#">CSS-P Link 02</a> <a href="#">CSS-P Link 03</a> <a href="#">CSS-P Link 04</a>


Continue adding menu choices as needed by repeating the previous choices with new content.

The results are seen in the next few slides from the collapsed version in the Safari Browser, to fully expanded menu choices.

You'll find the results the same in the MSIE Browser.Unfortunately for now I don't have a fix for the Firefox

Browser, perhaps one of you will create a fix for me?

The Expand/Collapse Menu


CSS Styles Visibility by Professor Al Fichera http://profal2.com September 22, 201021



This Menu Can Hold Hidden ImagesImages can be used just as easily as text. Perhaps this

could be a new way to show off some of your larger images without taking up so much space on the page.

Simply insert an Image Tag in place of the menu text.



Collapse the Images From View



Show The Images With onClick


css styles visibility

Documents