locked
How to display an image and 2 buttons windows 8 html5 metro app page?

    Question

  • In my metro app i am trying to create the home page with an image(first row) and 2 buttons under the image (means next row ).first button "More" should be on the left side of the screen and "Play" should be right side of the screen in second row.

    I want top 90%(height) of the screen should be covered with image(width should be the whole screen from left to right) and the rest 10%(which comes in the bottom of the screen) should only have those two buttons.

    I was trying to use two divisions one for displaying the image and another one for buttons. but currently it displays whole page with the image only and that too only half of the image was displayed.

    < div style="height:60%;" ><img src="images/games.jpg" style="width:100%;" /> </div>                                 <div style="vertical-align:bottom;background-color:orange;grid-cell-stacking:columns;margin:4px;padding-bottom:2px;padding-top:40%;padding-left:60%" > <input type="button" id="btnMore" name="Mute" value="More" /> <input type="button" id="btnPlay" name="Play" value="Play" /> </div>


    • Edited by Krrrishna Saturday, July 21, 2012 11:15 AM
    Saturday, July 21, 2012 11:14 AM

Answers

  • Hello!

    Here I have made the whole page a grid with two columns and two rows. The image is in the first row and spans two columns. The two buttons are in the second row, where the 'More' button is in the left column and the 'Play' button is in the right column.

    Hope this helps :)

    HTML:

    <body>
    	<div class="page">
    		<img class="image" src="/images/myImage.jpg">
    		<button class="moreButton" type="button">More</button>
    		<button class="playButton" type="button">Play</button>
    	</div>	
    </body>

    CSS:

    .page
    {
        display: -ms-grid;
        -ms-grid-rows: 1fr 50px;
        -ms-grid-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
    }
    
    .image {
    	-ms-grid-column-span: 2;
    	background-image: none;
    }
    
    .moreButton {
    	-ms-grid-row: 2;
    }
    
    .playButton {
    	-ms-grid-column: 2; 
    	-ms-grid-row: 2;
    }

    To test this, just create a blank Metro style app and replace the contents in the '<body>' tag in the default.html file with the HTML code from above. Also replace the CSS in the default.css file with the CSS code from above.

    • Marked as answer by Krrrishna Monday, July 23, 2012 11:57 AM
    Saturday, July 21, 2012 12:32 PM