Main
Make the following changes to the text below using TextWrangler. You may only edit the CSS.
- 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 appliesarrow.png
as a background image to each of theli
s. Adjust the padding on theli
s so the text does not overlap the arrows.
- Arrows list item
- Arrows list item
- Arrows list item
- The word Navigation below is an
h2
with an id ofimage-type
. Find the corresponding rule in the CSS file (h2#image-type
) and uncomment its first declaration. Reload the page to see the change - Uncomment the second declaration and reload the page again to see the background image revealed
- Now add a height declaration to the CSS rule to make the reveal the whole image
Navigation
- 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 - 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 thebackground-position
values to reveal the correct part of the image for each link. Hint: think negative! - 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.