CSS STYLES VISIBILITY

1. CSS STYLES VISIBILITY CIS67 Foundations for Creating Web Pages Professor Al Fichera Reference for CIS127 and CIS 137 Rev. September 22, 2010—All HTML code brought to XHTML standards.

2. Content Control with overflow • What 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: • visible • hidden • auto • scroll CSS Styles Visibility by Professor Al Fichera http://profal2.com

3. Content Control: overflow:visible • VISIBLE— all the content will be displayed, even if it goes outside the declared boundaries of the box. div { width:150px; height:150px; overflow:visible; } CSS Styles Visibility by Professor Al Fichera http://profal2.com

4. Content Control:overflow:hidden • HIDDEN— the browser clips off whatever content goes "over the line." div { width:150px; height:150px; overflow:hidden; } CSS Styles Visibility by Professor Al Fichera http://profal2.com

5. Content Control: overflow:auto • AUTO— 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; } CSS Styles Visibility by Professor Al Fichera http://profal2.com

6. Content Control: Overflow Scroll • SCROLL— 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; } CSS Styles Visibility by Professor Al Fichera http://profal2.com

7. 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. CSS Styles Visibility by Professor Al Fichera http://profal2.com

8. CSS Control: visibility:visible span { visibility: visible } CSS Styles Visibility by Professor Al Fichera http://profal2.com

9. CSS Control: visibility:hidden span { visibility: hidden } CSS Styles Visibility by Professor Al Fichera http://profal2.com

10. CSS Control: visibility:hidden • When 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”. CSS Styles Visibility by Professor Al Fichera http://profal2.com

11. Element Visibility • If 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 bodyplace the following:<span class="hide1"> content here </span> CSS Styles Visibility by Professor Al Fichera http://profal2.com

12. Drop-Down Menus • Here 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. CSS Styles Visibility by Professor Al Fichera http://profal2.com

13. Create in a StyleBlock • In 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> CSS Styles Visibility by Professor Al Fichera http://profal2.com

14. Create an onClick Event Handler • A small onClickeventbegins the project in the bodyof 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> CSS Styles Visibility by Professor Al Fichera http://profal2.com

15. Create the spanTag Container • Then 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 /> CSS Styles Visibility by Professor Al Fichera http://profal2.com

16. Create a Second onClick Event • The 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> CSS Styles Visibility by Professor Al Fichera http://profal2.com

17. Create the 2ndspanTag Container • Then 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 /> CSS Styles Visibility by Professor Al Fichera http://profal2.com

18. The Expand/Collapse Menu • 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? CSS Styles Visibility by Professor Al Fichera http://profal2.com

19. The Expand/Collapse Menu CSS Styles Visibility by Professor Al Fichera http://profal2.com

20. The Expand/Collapse Menu CSS Styles Visibility by Professor Al Fichera http://profal2.com

21. The Expand/Collapse Menu CSS Styles Visibility by Professor Al Fichera http://profal2.com

22. The Expand/Collapse Menu CSS Styles Visibility by Professor Al Fichera http://profal2.com

23. This Menu Can Hold Hidden Images • Images 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. CSS Styles Visibility by Professor Al Fichera http://profal2.com

24. Collapse the Images From View CSS Styles Visibility by Professor Al Fichera http://profal2.com

25. Show The Images With onClick CSS Styles Visibility by Professor Al Fichera http://profal2.com