Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 8

Transcription

1 Web Design for Print Designers

2

3 With CSS, you can use background images to replace linked text to make creative-looking links. This is the idea behind using sprites as we discussed last week. There are some things we need to consider in order to pull this off effectively. The styles we use in CSS need to be applied to the a element. This is the element that controls the hyperlink.

4 In-class project: Create a list with links to YouTube, Facebook and RSS.

5 In order to get the background image to appear properly, we need to set the height and width of the linked element using CSS. However, since a elements are typically inline elements meaning their height and width cannot typically be controlled we need to get it to behave like a block element.

6 This is done by using the display property. The display property specifies the type of box an element should generate. display: inline; Generates a block-like element as inline (no line breaks).! display: block; Generates an element as a visible block. Expands the full with of the container.

7 display: none; A none setting can be used to hide elements. Great way to hide elements in certain situations and expose them in others. Once we convert the a element to a block, we can then set the height and width. a.youtube { display:block; height:100px; width:100px; }

8 The next step is to apply the background image. We need to determine the proper placement of the part of the sprite we re using for the background of this link. a.youtube { display:block; height:100px; width:100px; background:url(spritecss.png) -200px 0 no-repeat; }

9 We have the link s background and block dimensions set. Now we need to disguise the actual text link so that only the background image appears. There are three declarations that get this to work: text-indent, white-space and overflow. We talked about text-indent back in week 5. We need to set the text-indent to 100%.

10 a.youtube { display:block; height:100px; width:100px; background:url(spritecss.png) -200px 0 no-repeat; text-indent:100%; } This pushes the text to the far right of the screen. But this does not get the text to actually disappear. That s where the other two declarations come in.

11 White-space property! white-space: normal nowrap pre pre-line pre-wrap; The white-space property specifies how white-space inside an element is handled. 1. normal: wrap text when necessary (default) 2. nowrap: text will be continuous line with no breaks 3. pre: includes all spaces and returns that appear in html 4. pre-line: will break line text based on html formatting 5. pre-wrap: will wrap text but preserve extra html spaces

12 Setting the white-space declaration to nowrap keeps the text from breaking to the next line. a.youtube { display:block; height:100px; width:100px; background:url(spritecss.png) -200px 0 no-repeat; text-indent:100%; white-space:nowrap; }

13 Overflow property declares what happens when content contained in a box exceeds the box element.! overflow: visible hidden scroll auto;! In CSS3 there are properties to control just the x or y value (not supported in IE before 9)! overflow-x: visible hidden scroll auto; overflow-y: visible hidden scroll auto;

14 By default, a box element will resize to fit the length of the content unless a specific height is set.

15 If the content exceeds the set height of the content, the text will flow outside of the box element.

16 Example where content exceeds set width.

17 The overflow property allows you to control what happens when the content exceeds the height or width parameters.! Scroll creates scroll bars when the content exceeds the set size.! Auto also has the same effect.

18 Hidden crops off the content at the edges of the box.! This applies to both the height and width if either are set.

19 Example where content is clipped horizontally.

20 Overflow keeps elements outside the box from appearing. a.youtube { display:block; height:100px; width:100px; background:url(spritecss.png) -200px 0 no-repeat; text-indent:100%; white-space:nowrap; overflow:hidden; }

21 Now that we have our static position set, how do we get the background to change when the user s cursor is over the link?

22 We need to create a new CSS declaration using the pseudoelement :hover. We need to simply change the position of the background image to the hover state. a.youtube:hover { background:url(spritecss.png) -200px -100px no-repeat; }! Now create styles for the Facebook and RSS links.

23 Class Assignment Set up your HTML document for this home page and add the content based on the elements we determined last week.

24 Next Week Layout and positioning in CSS Continue building the Callahan web page There is no class on Nov. 25 (three weeks from tonight).