Web Analytics Made Easy -
StatCounter Approach Needed - CodingForum

Announcement

Collapse
No announcement yet.

Approach Needed

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Approach Needed

    I am in need of an approach to achieve the finished look of the attached image. The image represents the content area of a web page. The icons representing the categories overlap the yellow strip and the background color, so I was wondering if I would have to create separate images containing the entire left-to-right yellow strip, along with some of the background color, and have the image span the entire left-to-right. Or.... could I achieve this some other way using CSS ? Since the iconic symbols are transparent, maybe I am stuck having to create images as I had mentioned.

    Any insight would be greatly appreciated.
    Attached Files

  • #2
    What about this?

    Hi,

    You only need one image for this; the rest can be done with CSS.

    Is this the kind of thing that you were looking for?: [ http://jsfiddle.net/dUGZZ/embedded/result/ ]

    Here is the code: [ http://jsfiddle.net/dUGZZ/ ]

    Hope this helps you,
    Joe

    Comment


    • #3
      Joe,

      Thank you sooo much for the great, helpful reply. The only problem I would have with a design like this is people viewing the site using an older web browser, such as Internet Explorer 6. I presume the mentality is possibly to forget about users browsing with IE 6, or advise IE 6 users to install the Google Chrome Framework for IE 6.

      Thanks again....

      Dave

      Comment


      • #4
        Joe,

        What is it about the code that causes the links within each category to appear as though they are positioned in columns?

        I dropped your code onto my sample site:
        http://gaboncentral.com/sample1

        Using a Macbook Pro and Safari 5.1 browser, I see the links as one vertical list.

        Dave

        Comment


        • #5
          Joe,

          You might notice that I prepared JPEG images for each of the category icons. Doing this will avoid any browsers without support for the PNG transparency.

          Dave

          Comment

          Working...
          X