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

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 September 22, 2010 2 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; } September 22, 2010 3 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; } September 22, 2010 4 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; } September 22, 2010 5 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; } September 22, 2010 6 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. September 22, 2010 7 CSS Styles Visibility by Professor Al Fichera http://profal2.com

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

9. CSS Control: visibility:hidden span { visibility: hidden } September 22, 2010 9 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”. September 22, 2010 10 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 body place the following: content here September 22, 2010 11 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. September 22, 2010 12 CSS Styles Visibility by Professor Al Fichera http://profal2.com

13. Create in a Style Block In the Head will have to create a small Style block to begin. #menu1 { display: none; margin-left:20px; } #menu2 { display: none; margin-left:20px; } #menu3 { display: none; margin-left:20px; } #menu4 { display: none; margin-left:20px; } September 22, 2010 13 CSS Styles Visibility by Professor Al Fichera http://profal2.com

14. Create an onClick Event Handler A 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';}"> DHTML Drop-Down Menu September 22, 2010 14 CSS Styles Visibility by Professor Al Fichera http://profal2.com

15. Create the span Tag Container Then you’ll add the menu choices for the drop menu. DHTML Menu DHTML Link 01 DHTML Link 02 DHTML Link 03 DHTML Link 04 September 22, 2010 15 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';}"> JavaScript Menu September 22, 2010 16 CSS Styles Visibility by Professor Al Fichera http://profal2.com

17. Create the 2 nd span Tag Container Then you’ll add the menu choices for the drop menu. CSS-P Menu CSS-P Link 01 CSS-P Link 02 CSS-P Link 03 CSS-P Link 04 September 22, 2010 17 CSS Styles Visibility by Professor Al Fichera http://profal2.com

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

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

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

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

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

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

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