Hi,
I created a lockdown with SOTI with a background image, as well as several apps.
I also want to add another image as a "header" with a "clickable" html-link behind it.
Unfortunately I'm not able to add the banner, as it shown on the "whole" screen.
Also, when you "turn" the device from landscape to widescreen or vice versa the background image is shown "twice".
Any ideas?
Please find the html as well as the screen of the configuration as well as the lockdown screen itself.
Regards,
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lockdown</title>
<style type="text/css">
html, body { height: 99.3%; }
.body,html
{
position: fixed;
top: 0;
}
body {
margin: 4px 4px 0px 4px;
background-image: url('<MCImg_HORSCH_FarmingHero_Teaser_small.jpg>');
background-position: center;
background-size: cover;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#Header .Title {
font: bold 30px arial,sans-serif;
text-align: center;
line-height: 71px;
color: #000;
display:block;
}
#Main {
text-align:center;
margin: 4px 0 100px;
}
#Main .row {
display:table;
white-space:nowrap;
margin: 0px auto;
}
#Main .row ul {
list-style: none;
margin:0;
padding:0;
display: table-row;
white-space:nowrap;
}
#Main .row ul br {clear: both;}
#Main .row ul li {
width: 149px;
height: 153px;
padding: 2px;
/* border: 2px #666666 solid; */
margin: 2px 4px 2px 0px;
vertical-align: middle;
text-align: center;
position: relative;
display:table-cell;
float:left
}
#Main .row ul li img {
border: 0;
width: 86px;
height: 86px;
padding: 12px;
}
#Main .row ul li .txt {
color: #666666;
font: bold 16px arial,sans-serif;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#Main .row ul {display:inline-block;}
#Main .row ul{display:inline; }
#Main .row ul li{display:inline-block}
#Main .row ul li{ display:inline;}
#Main .row ul a{ display:inline-block;}
#Main{text-align:center}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="Header">
<span class="Title">HORSCH Lockdown</span>
</div>
<div id="Main">
<div class="row">
<ul>
<!-- To display the image for the item rather than use the EXE icon use this line instead
<li><A href ="<MCLink0>"><img src="<MCImg_wifi.png>" /><div class="txt"><MCDISP0></div></a></li>-->
<li><A href ="<MCLink0>"><img src ="<MCImg_wifi.png>" /><div class="txt"><MCDISP0></div></a></li>
<li><A href ="<MCLink1>"><img src="<MCExeIcon1>" onerror="this.style.display='none'" /><div class="txt"><MCDISP1></div></a></li>
</ul>
</div>
<div class="row">
<ul>
<li><A href ="<MCLink2>"><img src="<MCExeIcon2>" onerror="this.style.display='none'" /><div class="txt"><MCDISP2></div></a></li>
<li><A href ="<MCLink3>"><img src="<MCExeIcon3>" onerror="this.style.display='none'" /><div class="txt"><MCDISP3></div></a></li>
</ul>
</div>
<div class="row">
<ul>
<li><A href ="<MCLink4>"><img src="<MCExeIcon4>" onerror="this.style.display='none'" /><div class="txt"><MCDISP4></div></a></li>
<li><A href ="<MCLink5>"><img src="<MCExeIcon5>" onerror="this.style.display='none'" /><div class="txt"><MCDISP5></div></a></li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
</body>
</html>"
