Main

Make the following changes to the text below using TextWrangler. You may only edit the CSS.

  1. The first unordered list has an id of arrows. First write a CSS rule that removes the bullets from the list. Then write another rule that applies arrow.png as a background image to each of the lis. Adjust the padding on the lis so the text does not overlap the arrows.
  1. The word Navigation below is an h2 with an id of image-type. Find the corresponding rule in the CSS file (h2#image-type) and uncomment its first declaration. Reload the page to see the change
  2. Uncomment the second declaration and reload the page again to see the background image revealed
  3. Now add a height declaration to the CSS rule to make the reveal the whole image

Navigation

  1. The navigation links below have been marked up as an unordered list (ul id="image-nav"). The list has a set of corresponding CSS rules written but commented out. Uncomment each rule or set of rules, save the file, and reload the browser before uncommenting the next rule so you can see the effect of each rule on the list
  2. When you have all the CSS rules uncommented, you will see that the navigation buttons all say "Home." Open image-nav.png to see how it is constructed. Now change the background-position values to reveal the correct part of the image for each link. Hint: think negative!
  3. Now change the values for the hover rules to make the buttons change the their hover state on mouseover.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.