Skip navigation
CCAC_Teacher
Currently Being Moderated

Links positioned on graphic background.  How?

Aug 7, 2012 11:48 AM

I'm working my way through the Adobe Fireworks CS5 version of "Classroom in a Book" and I've come to an impasse.

 

I'm in Chapter 8, page 199, step #4; the task is to use the CSS and Images Export.  At this point we have a web page with seven distinct regions.  One of these is a slice, a navigation banner with a graphic background and text for navigation links.

 

The instructions in the book are to change the img_nav slice type to Background Image and to hide the sublayer containing the text for the links.  The book explains that "...since the slice will become a background image, it cannot have HTML links applied to it."

 

It goes on to say that "...creating the navigation is not a job for Fireworks, and the navigation menu would need to be created later in a web-page editor."

 

How?  The links are sort of in the middle of the graphic.  When I try to add links in Dreamweaver I don't seem to have much control over there placement.  It is either at the beginning of the div or the end.  check_mag_home.jpg

 

Can someone point me to a resource that explains how to place a link on top of a graphic where I want it?  Also, since I'm learning, I'd like to stick with Best Practices and use CSS while minimizing the use of tables.

 

Thanks,

Dan Earley

 
Replies
  • Currently Being Moderated
    Aug 7, 2012 2:24 PM   in reply to CCAC_Teacher

    Perhaps it's time for you to purchase Dreamweaver CS5 "Classroom in a Book"!

     

    I'm not directly familiar with this textbook... If the navigation is the blue text (Features - Fashion - Calendar - Video - Blog), it would typically be handled in HTML using an unordered list (ul), with each list item (li) containing a link (a) that surrounds the text itself. CSS would be used to position the navigation, perhaps applying display: inline or float: left to the list items (li) to make the list run horizontally. The list itself might be positioned within a surrounding div using margin or padding—or even using absolute positioning (in a relative context), given that there's probably a specific height to the background image (the "check" logo).

     

    As far as links go, they're traditionally inline elements that wrap around other inline elements—like text within a paragraph or heading, or an image. However, I think as of HTML5, they're also allowed to be wrapped around multiple block-level elements. Regardless, the simplest way to add a link to an image is to surround the image (img) tag with a link (a) tag. However, like your book says, if an image is being applied via CSS as a background image, it cannot have a link applied to it, because it's not part of the HTML. But a background image must be applied to some HTML element, and perhaps the link could be applied to that element.

     

    A link can also be converted to a block-level element via CSS using a display: block rule. This will make it occupy the full-width of its container, which can make it more "clickable" by giving it a larger area of interactivity.

     

    Not sure if this information is helpful or not... I wonder if the book goes on to answer any of your questions later on. Often, these types of books complete a project step-by-step, chapter-by-chapter, eventually addressing issues brought up in earlier chapters.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 7, 2012 4:17 PM   in reply to CCAC_Teacher

    In Dreamweaver, if that image is in a cell of a table, for example, make it a background image for the cell. That will allow you to place links on top of it.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points