winfredleonardo
New Member
I've written html code that includes style sheet. Image, Title comes under on class and i want to display Image on top of the Title.. now its comes below the Image layer. and also the Title doesn't fit inside data-layer. Help me..Here is the html code:\[code\]<div id="layout-panel"> <div id="tile-container"> <div id="tiles-panel" data-bind="foreach: data"> <div class='row-horizontal-tile'> <div class='data-layer'> <div><img data-bind="attr:{src:ImageUrl}" class="stick-image"/></div> <div class='text-title' data-bind="text: Title"> </div> </div> </div> </div> </div> </div>\[/code\]css for the above html code is given below:\[code\].row-horizontal-tile{ margin:10px 5px 8px 1%; width: 23%; height: 90%; display: inline-block; }.data-layer{ color:#ffffff; font-family:Calibri; text-align:inherit; color:Black; background-color: white; height: 100%; width:100%; border-width: 3px; border-style
utset; } .stick-image{ height: 100%; width:100%; background-color: white;} .text-title{ font-family: DokChampa; font-size: large; text-align:center;}#layout-panel{ background-color: #444444; width: 100%; height: 70%; }#tile-container{ height: 80%; width: 90%; background-color:#CCCCCC; position:relative; top: 10%; left: 5%; }#tiles-panel{ height: 100%; white-space:nowrap; overflow-x:hidden; overflow-y:hidden; }\[/code\]Thanks in advance..
utset; } .stick-image{ height: 100%; width:100%; background-color: white;} .text-title{ font-family: DokChampa; font-size: large; text-align:center;}#layout-panel{ background-color: #444444; width: 100%; height: 70%; }#tile-container{ height: 80%; width: 90%; background-color:#CCCCCC; position:relative; top: 10%; left: 5%; }#tiles-panel{ height: 100%; white-space:nowrap; overflow-x:hidden; overflow-y:hidden; }\[/code\]Thanks in advance..