CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML...
-
Upload
jazmyn-hodgetts -
Category
Documents
-
view
214 -
download
0
Transcript of CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML...
![Page 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.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/1.jpg)
C I S 6 7Fo u n d ati o n s fo r C re a ti n g We b Pa g e s
Professor Al Fichera
CSS STYLES VISIBILITY
Rev. September 22, 2010—All HTML code brought to XHTML standards.
Reference for CIS127 and CIS 137
![Page 2: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/2.jpg)
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
![Page 3: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/3.jpg)
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
![Page 4: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/4.jpg)
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
![Page 5: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/5.jpg)
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
![Page 6: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/6.jpg)
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
![Page 7: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/7.jpg)
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
![Page 8: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/8.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
CSS Control: visibility:visiblespan { visibility: visible }
September 22, 20108
![Page 9: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/9.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
CSS Control: visibility:hiddenspan { visibility: hidden }
September 22, 20109
![Page 10: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/10.jpg)
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
![Page 11: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/11.jpg)
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
![Page 12: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/12.jpg)
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
![Page 13: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/13.jpg)
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
![Page 14: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/14.jpg)
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
![Page 15: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/15.jpg)
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
![Page 16: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/16.jpg)
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
![Page 17: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/17.jpg)
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
![Page 18: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/18.jpg)
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
![Page 19: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/19.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
The Expand/Collapse Menu
September 22, 201019
![Page 20: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/20.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
The Expand/Collapse Menu
September 22, 201020
![Page 21: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/21.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com September 22, 201021
The Expand/Collapse Menu
![Page 22: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/22.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
The Expand/Collapse Menu
September 22, 201022
![Page 23: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/23.jpg)
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
![Page 24: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/24.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Collapse the Images From View
September 22, 201024
![Page 25: CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551b92c1550346a6148b6080/html5/thumbnails/25.jpg)
CSS Styles Visibility by Professor Al Fichera http://profal2.com
Show The Images With onClick
September 22, 201025