Display, Overflow, White Space, and Cursor Karl Kasischke WCC INP 150 Winter

Size: px

Start display at page:

Download "Display, Overflow, White Space, and Cursor Karl Kasischke WCC INP 150 Winter"

Ralph Barrett
6 years ago
Views:

1 Display, Overflow, White Space, and Cursor 2009 Karl Kasischke WCC INP 150 Winter

2 display Property overflow Property Minimum and Maximum Widths and Heights white-space Property cursor Property 2009 Karl Kasischke WCC INP 150 Winter

3 Determines how an element is rendered (X)HTML elements have pre-defined rendering (that you can override), but in XML the display property defaults to inline for all elements Values: block inline none list-item 2009 Karl Kasischke WCC INP 150 Winter

4 There are other values for this property, but they have limited browser support This property is not inherited, but... instructing a parent to 'display: none' will cause all children and descendants to be removed 2009 Karl Kasischke WCC INP 150 Winter

5 Determines how content is rendered (and how the block-level element responds) when the content exceeds the dimensions of the block-level element Only a concern when a height and/or width is set for an element 2009 Karl Kasischke WCC INP 150 Winter

6 This property is not inherited When defaulting to 'visible' IE 6 and below render differently from other browsers 2009 Karl Kasischke WCC INP 150 Winter

7 Values: ( default visible (the content keeps rendering past the height and/or width of the block-level element, except in IE hidden: content outside the height and/or width is clipped (not ( shown scroll scrollbars are always shown on the block-level element, even if not needed auto scrollbars are shown on the block-level element, if needed 2009 Karl Kasischke WCC INP 150 Winter

8 Setting minimum and maximum heights is used primarily in layouts to keep some areas from becoming too tall Set minimum and maximum widths to trying to keep lines of text from becoming too long ( wide ) Layouts set up in em's or percentages could become quite large or quite small 2009 Karl Kasischke WCC INP 150 Winter

9 For this to work properly the element must be block-level or displayed as block-level Internet Explorer 6 and below lack support 2009 Karl Kasischke WCC INP 150 Winter

10 min-height max-height min-width max-width Values: (% em, number and unit (e.g., px, negative values are not allowed 2009 Karl Kasischke WCC INP 150 Winter

11 How spaces in element's content are rendered Not all values are supported, or validate Values: ( default ) normal Only one space between characters is rendered pre Spaces are preserved, just like the <pre> tag pre-wrap White space is preserved and newlines in the source code cause wrapping 2009 Karl Kasischke WCC INP 150 Winter

12 Values (continued): pre-line White space is not preserved and newlines in the source code cause wrapping nowrap Keeps text on the same line, unless a line break is used, just like the nowrap attribute inherit Uses the white-space setting of the parent element 2009 Karl Kasischke WCC INP 150 Winter

13 Changes the default cursor that is used when an element is moused over Use sparingly, and be careful; you can really confuse a user with an inappropriate cursor Different values have different levels of support 2009 Karl Kasischke WCC INP 150 Winter

14 default use the default cursor for the element auto allow the browser to determine the cursor to use crosshair renders as a crosshair pointer renders as a pointer/hand 2009 Karl Kasischke WCC INP 150 Winter

15 move arrows pointing four directions (top, bottom, left, ( right e-resize a double-sided horizontal arrow ne-resize a double-sided arrow pointing diagonally to the top right / bottom left 2009 Karl Kasischke WCC INP 150 Winter

16 nw-resize a double-sided arrow pointing diagonally to the top left / bottom right n-resize a double-sided vertical arrow se-resize a double-sided arrow pointing diagonally to the bottom right / top left 2009 Karl Kasischke WCC INP 150 Winter

17 sw-resize a double-sided arrow pointing diagonally to the bottom left / top right s-resize a double-sided vertical arrow w-resize a double-sided horizontal arrow text a vertical bar, like a text input prompt 2009 Karl Kasischke WCC INP 150 Winter

18 wait usually renders as an hourglass; on the Mac it renders as a watch be careful; users expect something to be occurring help a question mark, potentially with another icon beside the question mark sometimes used for elements with a descriptive title attribute, such as <acronym> or <abbr> 2009 Karl Kasischke WCC INP 150 Winter

19 progress an arrow with an hourglass on most systems and as a spinning disc on Mac IE 5.x not-allowed a circle with a line through it no-drop a circle with a line through it; IE also shows a hand vertical-text text icon oriented horizontally rather than vertically 2009 Karl Kasischke WCC INP 150 Winter

20 all-scroll arrows pointing four directions col-resize two vertical bars with arrows pointing to the left and right row-resize two horizontal bars with arrows pointing to the top and bottom 2009 Karl Kasischke WCC INP 150 Winter

21 ( url(filename Specifies the address of a custom cursor Multiple custom graphical cursors can be specified, separated by commas Be sure to give a generic cursor as the last option Custom cursors are typically in.cur file format The latest Gecko-based browsers also support.png and.gif IE 6 & 7 have support for.ani files (but can run into ( issues 2009 Karl Kasischke WCC INP 150 Winter

22 hand renders as a hand, just like pointer works in Windows/Mac IE and Opera; will not validate 2009 Karl Kasischke WCC INP 150 Winter

23 Practice with Display, Overflow, White Space, and Cursor 2009 Karl Kasischke WCC INP 150 Winter

Cascading Style Sheet Quick Reference

Computer Technology 8/9 Cascading Style Sheet Quick Reference Properties Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are