Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and."— Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

14 Create an onClick Event Handler A small onClick event begins the project in the body of the page. DHTML Drop-Down Menu September 22, CSS Styles Visibility by Professor Al Fichera

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

16 Create a Second onClick Event The next Drop-Down link is created. JavaScript Menu September 22, CSS Styles Visibility by Professor Al Fichera

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

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

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

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

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

22 September 22, CSS Styles Visibility by Professor Al Fichera

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

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

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


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

Similar presentations


Ads by Google