Grow your CSS skills. Land your dream job.

Layout for interactive infographic

  • # February 12, 2013 at 9:10 am

    Dear web UI designers and developers,

    I have another tricky puzzle for you to solve. It would be challenge for you and you will help to make one nice project come true. I will briefly explain what I want from you.
    Assume this sketch as a final product:

    ![menu](http://i49.tinypic.com/2upwrjq.png)

    Here is grey picture with circle inside. Six buttons are placed around the circle. Each button is pointing on the circle with line. Here is button in detail:

    ![menu](http://i47.tinypic.com/2gxdw5j.png)

    Button consist of 3 different shapes. Inside first one will be placed icon, inside others some short text. The edge of the button should be limited by the geometry of shapes. User should know that by transformation of cursor. On hover the button should zoom in a bit. The line and dot preferably shouldn’t be a part of the button or background image and shouldn’t react on hover effect.

    Also the whole menu should be scalable to fit different resolutions.
    I would think for two ways of doing this buttons. First one is to make a whole button out of images, or as a second solution to make it from shapes with CSS. The lines probably should be also made as image or as CSS shape. And then everything should be assembled on top of the gray background picture using “absolute position” in CSS.

    I would be glad to get any kind of solutions for this puzzle! Thank you for your time!

    # February 12, 2013 at 9:26 am

    Absolute positioning should be avoided IMO.

    I wonder what work you have done on this so far?

    # February 12, 2013 at 9:31 am

    mostly conceptual part )

    # February 12, 2013 at 10:01 am

    >mostly conceptual part

    Hmm…although it’s a nice challenge there a LOT of options available.

    What sort of browser support is required?

    Are the dots supposed to reference something inside the circle or just visual ‘links’ to the circle?

    Is the ‘item’ a link in and of itself and the ‘info’ section another link?

    What does the whole thing look like at lower viewport sizes? Do you care?

    # February 12, 2013 at 10:06 am

    If you are concern about putting elements along a circle, Ana Tudor did this a couple of times for StackOverflow. Here is one of them, I couldn’t find the others: http://stackoverflow.com/questions/12813573/position-icons-into-circle

    # February 12, 2013 at 10:15 am

    I assume that IE definitely should be in the list. I know that IE have same issues with CSS, but the project is aimed to reach lot of people on various platforms and devices.

    The dots and lines at least should be visual links, in scaling the dots probably could travel some short distance, but don’t live the circle.

    all three shapes(icon, item, info) are combined in one button, witch will follow user to additional content.

    # February 12, 2013 at 10:18 am

    > along a circle

    thanks a lot

    it should be possible to place buttons in random order somehow

    # February 12, 2013 at 10:19 am

    Hmmm….I’m feeling used here but perhaps it’s just me.

    # February 12, 2013 at 10:20 am

    >it should be possible to place buttons in random order somehow

    NOT going to happen.

    # February 12, 2013 at 10:23 am

    Random doesn’t exist in CSS. You would need some JavaScript.

    Anyway, I really don’t see where you happen to be stuck in this whole thing. Did you at least start to code something?

    # February 12, 2013 at 10:28 am

    i’m sorry ) by saying RANDOM i mean not in circular, not like completely random ) .. i saw in example that they using rotate function..

    # February 12, 2013 at 10:30 am

    yes.. i’m making a web site.. this is menu for one page. the link above is very useful. what about buttons?

    # February 12, 2013 at 10:36 am

    >Anyway, I really don’t see where you happen to be stuck in this whole thing. Did you at least start to code something?

    +1

    # February 12, 2013 at 10:44 am

    My point is -even if a few things can be a little tricky- I don’t see anything that would require a huge amount of CSS skills except when it comes to optimize the way you position elements on a circle (see link above).

    From there, there are 2 options:
    * Either you haven’t started coding this, and my advice would be to do it cause I don’t think anybody here will do it for you,
    * Or you have started but you happen to be stuck somewhere, so the best to do would be to show us your code in order to help us help you.

    # February 12, 2013 at 10:45 am

    > Anyway, I really don’t see where you happen to be stuck in this whole thing. Did you at least start to code something?

    please read the description of the problem above, the problem is not only in circular pattern of the icons.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".