CSS Positioning: Placing Elements on a Web Page

1. HTML For the World Wide Web Positioning Objects with CSS

2. Positioning Objects with CSS • CSS can be used to tell a browser where on a page to display an element. This was one of the earliest enhancements to CSS1 when CSS2 became the standard. • To place an element at a specific position on a page use the style: position: type: top: value; right: value; bottom: value; left: value Where type indicates the type of positioning applied to the element and the top, right, bottom, left styles indicate the coordinates of the element

3. Position Style • The position style has five possible values we will focus on two: • Absolute- enables you to place an element at specific coordinates on a page or in a containing element. • Relative- Used to move an element relative to its default position on the page. The default is where the browser would have placed it if no psisitioning was applied. • Static • Fixed • Inherited

4. Adding a Page to Online Scrapbooks • One purpose of the Online Scrapbook website is to teach new scrapbookers how to create beautiful and interesting pages. Every month Kathy wants to highlight a scrapbook page that displays some noteworthy features. • Kathy wants to augment the page by inserting callouts that highlight certain portions of the scrapbooking sample for the reader. • She wants each callout to be placed close to the feature that it is highlighting.

5. Insert Three Callout Notes • Download samples.htm to the scrapbook folder and open it with notepad. Enter your name and date in the comment section. • Directly above the h2 heading, Samples from Online Scrapbooks, insert the following <div id="note1" class="notes"> <p>Paste cut-out letters and words in your scrapbook to create a 3D effect. Online Scrapbooks sells professionally designed cut-out letters, words, and phrases for all occasions.</p> </div> <div id="note2" class="notes"> <p>Clippings, flyers, programs, and other memorabilia are valuable sources of information that can enhance your scrapbook pages. Make sure that any material is copied to acid-free paper. Newspaper clipping are especially susceptible to deterioration.</p> </div> <div id="note3" class="notes"> <p>Photographic cut-outs and textured backgrounds can add visual interest to your pages. See the outline store for our wide variety of textured and embossed papers.</p> </div>

6. Create a Style for the Notes • Because the styles for the notes will only apply to this one page you will use an embedded style sheet to the samples.htm file. • Kathy wants the text to appear in a brown 8 point sans-serif font on an ivory background. • She wants the note boxes to be displayed with a 3-pixel light gray inset border. • The notes should be 130 pixels wide with a margin space of 5 pixels around the paragraphs

7. Define the Style for the Notes • Scroll to the top of the samples.htm file in notepad. • Directly below the link element, insert the following embedded style sheet. <style type="text/css"> .notes {font-family: sans-serif; font-size: 8pt; color: brown; background-color: ivory; border: 3pt inset rgb(212, 212, 212); width: 130px} .notes p {margin: 5px} </style> Save your changes and open samples.htm in your browser. Verify that the three note boxes appear on the page. Next you will position the boxes where Kathy wants them on the page.

8. Position the Note Boxes • Return to the samples.htm file in notepad. • Add the following styles to the embedded style sheet: #note1 {position: absolute; left: 600px; top: 120px} #note2 {position: absolute; left: 170px; top: 400px} #note3 {position: absolute; left: 570px; top: 550px} Save you changes and refresh samples.htm in your browser. Verify that the note boxes have been positioned around the page.

9. Working with Overflow • You show Kathy the revised page. She likes the position of the note boxes but she thinks that they hide too much of the image. She would like you to see if there is a way to make them smaller. • To reduce the height of the note boxes you can specify the height in the style sheet. Unfortunately this will mean that some of the content will be hidden. You can tell the browser to handle the overflow using the overflow style overflow: type Where type is one of four values visable scroll hidden auto

10. Define the Overflow Style • Return to the samples.htm file in notepad • Add the following styles to the .notes selector .notes {font-family: sans-serif; font-size: 8pt; color: brown; background-color: ivory; border: 3pt inset rgb(212, 212, 212); width: 130px; height: 90px; overflow: auto} Save your changes and refresh your browser. Verify that the note boxes have a scroll bar to display hidden text.

11. Creating Styles for Output Devices • By default a style sheet is applied to all devices and each device must determine how best to match the styles to its own requirements. • For example, when you print a web page the web browser uses its built in styles to prepare the document for printing. • CSS2 gives the web designer more control to specify the output styles for particular devices like printers, handheld, projection, and tv.

12. Create a Style Sheet for Print Media • Kathy wants to use the print.css style sheet for any paged visual media (print and projected). She wants to use the scraps.css for visual media (screen and tv) • Open the print.css file in notepad. • Enter your name and date in the comment section. • Save your changes

13. Link the samples to print.css • Return to the samples.htm file in notepad. • Directly above the link element in the <head> section, insert the following link to the print.css style sheet: <link href="print.css" rel="stylesheet"; type="text/css"; media="print, projection" /> • Add the follwing media attribute to the scraps.css link <link href="scraps.css" rel="stylesheet"; type="text/css"; media="screen, tv" />

14. Create an Embedded Style Sheet for Print Media • Within the samples.htm file there is an embedded style sheet, insert the following HTML code directly above the embedded style sheet. <style type="text/css" media="print, projection"> </style> Add the media attribute to the existing style tag <style type="text/css" media="screen, tv, tty"> Save your changes and refresh the samples.htm file in your browser. Verify that no changes appear in on the computer screen version of the page.

15. Hiding Elements • Kathy would like to hide the list of links and address on the print output. CSS has two styles that you can use to keep an element from being displayed in the output: • display: type • visibility: type Where type is one of the following: visible- makes an element visible hidden- hides the element collapse – used with tables to hide a row or column inherit (default)- causes an element to inherit the visibility from its parent

16. Apply the Display Style • Return to the print.css file in notepad. • Add the following style declaration below the comment section: #head, #links, address {display: none} • Kathy still wants all headings to appear in sans-serif font in the printed version of the page. Add the following style to the sheet: h1, h2, h3, h4, h5, h6 {font-family: sans-serif} Save your changes

17. Set the Print Style for the Callout Notes • Kathy would like you to modify the style for the callout notes to list the items by applying the following style to the samples.htm file embedded style sheet: .notes {display: list-item; list-style-image: url("bullet.jpg"); font-family: sans-serif; font-size: 12pt; margin: 20px} Save your changes and refresh the samples.htm file in your browser. Verify that the appearance on the screen has not changed. Check the print preview in your browser. Verify that the print output has changed from the screen output.

18. Set the Size of the Print Page • Return to the print.css file in notepad. • Add the following style to the top of the style sheet to set the page size: @page {size: 8.5in 11in portrait: margin: 0.5in} Save your changes.

19. Final Changes to print.css • Kathy wants the list of notes to appear on one page and the scrapbook sample to appear on another. To do this you can insert a page break either at the end of the third note or at the beginning of the image. If you put it before the image you can add additional notes without needing to change the style. • Kathy also wants the sample image resized to 7 inches wide by 9.1 inches high.

20. Complete the Chanes to Print.css Add the following styles to the bottom of the print.css style sheet. #sample_image {page-break-before: always; text-align: center} #sample_image img {width: 7in; height: 9in} Save your changes refresh the samples.htm in your browser. Verify that the print output has changed in your browser print preview.

21. Turn in your work • Upload your Scrapbook folder to Google Drive • When the folder is finished uploading, click on the Share button. • Click on Advanced • Change the permission from Private to Anyone with the link can view. • Copy the link and past it into your Google Docs Journal.