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

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

Content Control: overflow:hidden HIDDEN— the browser clips off whatever content goes "over the line." div { width:150px; height:150px; overflow:hidden; } September 22, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

CSS Control: visibility:visible span { visibility: visible } September 22, CSS Styles Visibility by Professor Al Fichera

CSS Control: visibility:hidden span { visibility: hidden } September 22, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

The Expand/Collapse Menu September 22, CSS Styles Visibility by Professor Al Fichera

The Expand/Collapse Menu September 22, CSS Styles Visibility by Professor Al Fichera

September 22, 2010 CSS Styles Visibility by Professor Al Fichera 21 The Expand/Collapse Menu

September 22, CSS Styles Visibility by Professor Al Fichera

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, CSS Styles Visibility by Professor Al Fichera

Collapse the Images From View September 22, CSS Styles Visibility by Professor Al Fichera

Show The Images With onClick September 22, CSS Styles Visibility by Professor Al Fichera