How do I create a picture like this?

Discussion in 'Web Design and Development' started by njmitchel0, Feb 7, 2013.

  1. macrumors member

    Joined:
    May 21, 2008
    #1
  2. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #2
    Bounding div with position: relative. Whole bunch of nested elements with position: absolute.

    All of those plus icons, and their associated text are the nested (position: absolute) items.

    Then they use javascript to hide all the text and display them on hover.
     
  3. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #3
    Start off easy, then start to make it more complicated.

    Code:
    <div style="position: relative; background: green; width: 500px; height: 400px;">
    <div style="position: absolute; top: 100px; left: 50px; width: 10px; height: 10px; background: blue;">
     
    </div>
    <div style="position: absolute; top: 200px; left: 450px; width: 10px; height: 10px; background: blue;">
     
    </div>
    </div><!-- green div -->
    
    This will make a green box with two small blue boxes inside of it positioned absolutely.

    If you don't understand that conceptually, you just need an HTML book.
     

Share This Page