4 Replies Latest reply on Aug 7, 2012 7:06 PM by CCAC_Teacher

    Links positioned on graphic background.  How?

    CCAC_Teacher

      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

        • 1. Re: Links positioned on graphic background.  How?
          groove25 Level 4

          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.

          • 2. Re: Links positioned on graphic background.  How?
            Linda Nicholls Level 4

            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.

            • 3. Re: Links positioned on graphic background.  How?
              CCAC_Teacher Level 1

              Thank you groove25 and Ms. Nicholls,

               

              I'll try using a div within the graphic div tomorrow.  I think you see that my problem is how to position a link using CSS and without resorting to inline code.  I did a quick look for an answer to the problem later but didn't see one.

               

              I'll let you know how your suggestions work.

               

              Dan Earley

              • 4. Re: Links positioned on graphic background.  How?
                CCAC_Teacher Level 1

                P.S.  You are right, the blue text "Features - Fashion - Calendar - Video - Blog" are ment to be links, but that text was not exported as part of the background image.  It is meant to be added overtop of the background so that it can be changed in the future.

                 

                Dan Earley