Need help in metro style create floating icon

Asked By cooper rmyles 10 points N/A Posted on - 02/19/2013

I would like to create a simple GUI with floating icon elements with JQuery with HTML5 support.  I'm having problems in positioning the icon in the tiled divs elements.  I need CSS codes in metro style create floating icon.  I just upgraded to Windows 8 OS so I'm still figuring this out.  Thanks.

• Status: Open
• Question Views: 590
• Answer Count: 1
• Vote Up 0 Vote Down

• Answer Accepted: No
• Question Category: Development Software

Answered By Drake Vivian 30 points N/A #171040

Need help in metro style create floating icon

 

Hi there Cooper Rmyles,

 

A small peek into your already done code would be of a huge help to give you the exact css lines you should use.

 

However, the trick is in the positions. Your divs should be relatively positioned, while icons should be positioned absolutely. This will make a div a containing block and the icon will be floating inside of its parent div.

 

The code should look something like this:

 

.block > div {

    float: left;

    position: relative;

}

 

.block > div .icon {

    position: absolute;

    bottom: 0;

    left: 0

}

About Drake Vivian

Questions
0

Answers
820

Best Answers
186

• Vote Up 0 Vote Down

• Posted on - 03/03/2013
• Question Category: Development Software