CSS STYLES VISIBILITY
description
Transcript of 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
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Content Control: overflow:hiddenHIDDEN— the browser clips off whatever content goes
"over the line."
div { width:150px; height:150px; overflow:hidden; }
September 22, 20104
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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 Styles Visibility by Professor Al Fichera http://profal2.com
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 Styles Visibility by Professor Al Fichera http://profal2.com
CSS Control: visibility:visiblespan { visibility: visible }
September 22, 20108
CSS Styles Visibility by Professor Al Fichera http://profal2.com
CSS Control: visibility:hiddenspan { visibility: hidden }
September 22, 20109
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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:<span class="hide1"> content here </span>
September 22, 201011
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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.
September 22, 201012
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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; }
#menu2 { display: none; margin-left:20px; }
#menu3 { display: none; margin-left:20px; }
#menu4 { display: none; margin-left:20px; }
</style>
September 22, 201013
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Create an onClick Event HandlerA small onClick event begins the project in the body of
the page.
<span onclick="if(document.all.menu1.style.display == 'block') {document.all.menu1.style.display = 'none';} else {document.all.menu1.style.display='block';}">
<b> DHTML Drop-Down Menu </b></span>
September 22, 201014
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Create the span Tag ContainerThen you’ll add the menu choices for the drop menu.
<b> DHTML Menu </b><br /> </span><span id="menu1"><a href="#">DHTML Link 01</a><br /><a href="#">DHTML Link 02</a><br /><a href="#">DHTML Link 03</a><br /><a href="#">DHTML Link 04</a><br />
</span><br />
September 22, 201015
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Create a Second onClick EventThe next Drop-Down link is created.<span onclick="if(document.all.menu2.style.display == 'block') {document.all.menu2.style.display = 'none';} else {document.all.menu2.style.display='block';}">
<b> JavaScript Menu </b> <br /></span>
September 22, 201016
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Create the 2nd span Tag ContainerThen you’ll add the menu choices for the drop menu.
<b> CSS-P Menu </b><br /> </span><span id="menu2"><a href="#">CSS-P Link 01</a><br /><a href="#">CSS-P Link 02</a><br /><a href="#">CSS-P Link 03</a><br /><a href="#">CSS-P Link 04</a><br />
</span><br />
September 22, 201017
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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
September 22, 201018
CSS Styles Visibility by Professor Al Fichera http://profal2.com
The Expand/Collapse Menu
September 22, 201019
CSS Styles Visibility by Professor Al Fichera http://profal2.com
The Expand/Collapse Menu
September 22, 201020
CSS Styles Visibility by Professor Al Fichera http://profal2.com September 22, 201021
The Expand/Collapse Menu
CSS Styles Visibility by Professor Al Fichera http://profal2.com
The Expand/Collapse Menu
September 22, 201022
CSS Styles Visibility by Professor Al Fichera http://profal2.com
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.
September 22, 201023
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Collapse the Images From View
September 22, 201024
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Show The Images With onClick
September 22, 201025