Hola buenas, estoy realizando una web para una interfaz en la raspberry y no se cual es la manera de posicionar una imagen en un sitio determinado y con el tamaño requerido.Se muy poco de programación web ya que estoy empezando ahora.Quiero poner la imagen del dado que aparece debajo de los botones, dentro de ese cuadro a la izquierda de los dos botones.Se que es muy sencillo pero he buscado por internet y no tengo ni idea de donde se coloca el código.
Código HTML:
<!DOCTYPE html>
<!-- saved from url=(0085)file:///C:/Users/Win7/Desktop/Nueva%20carpeta%20(3)/Domotica%20Controller%202013.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--
Domotica Web Interface door EngineerAtHome.com
http://www.engineerathome.com/elektronica/maak+een+web+interface+voor+je+arduino/26
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="cache-control" content="no-cache">
<title>
Domotica Controller 2013
</title>
<style>
body {
background-color: #1a1a1a;
font-family: Arial;
font-size: 18px;
margin: 0;
}
a {
text-decoration: none;
}
h2 {
clear: left;
color: #454545;
font-size: 60px;
font-weight: normal;
margin: 0 0 -24px 20px;
position: relative;
z-index: 1;
}
ul {
margin: 0;
padding: 0;
position: relative;
z-index: 10;
}
li {
display: block;
float: left;
height: 197px;
list-style: none;
margin: 10px;
width: 290px;
}
li, li p a {
background-color: #333333;
background: -moz-linear-gradient(top, #4d4d4d 0%, #333333 100%);
background: -webkit-linear-gradient(top, #4d4d4d 0%, #333333 100%);
background: linear-gradient(top, #4d4d4d 0%, #333333 100%);
border-radius: 5px;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}
li span {
border-radius: 5px 5px 0 0;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5);
color: #ffffff;
display: block;
height: 23px;
padding: 5px 10px;
}
li span, li p a.aan {
background-color: #004080;
background: -moz-linear-gradient(top, #0066cc 0%, #004080 100%);
background: -webkit-linear-gradient(top, #0066cc 0%, #004080 100%);
background: linear-gradient(top, #0066cc 0%, #004080 100%);
}
.automation li span, .automation li p a.aan {
background-color: #1a1a1a;
background: -moz-linear-gradient(top, #333333 0%, #1a1a1a 100%);
background: -webkit-linear-gradient(top, #333333 0%, #1a1a1a 100%);
background: linear-gradient(top, #333333 0%, #1a1a1a 100%);
}
li p a {
color: #ffffff;
display: inline-block;
margin-bottom: 20px;
padding: 10px;
text-decoration: none;
text-align: center;
width: 75px;
}
li p a.small {
width: 30px;
}
li p a.small:nth-child(2n) {
margin-left: 10px;
}
li p a:hover, li p a.aan {
-webkit-box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}
li p {
color: #ffffff;
margin: 25px;
text-align: right;
}
li p sup {
font-size: 11px;
line-height: 5px;
}
li p + p {
margin-top: -5px;
}
li p strong {
display: block;
font-size: 34px;
margin-top: 30px;
}
li p strong sup {
font-size: 21px;
line-height: 15px;
}
li div {
background: url('sprite.png') center 0px;
float: left;
height: 128px;
margin: 17px -20px 17px 10px;
width: 128px;
}
li div.scene { background-position: center -128px; }
li div.switch { background-position: center -256px; }
li div.bulb { background-position: center -384px; }
li div.electric { background-position: center -512px; }
li div.fire { background-position: center -640px; }
li div.thermos { background-position: center -768px; }
li div.sun { background-position: center -896px; }
li div.plant { background-position: center -1024px; }
li div.timer { background-position: center -1152px; }
li div.moon { background-position: center -1280px; }
li div.color { background-position: center -1408px; }
li div.dodeplant { background-position: center -1536px; }
li div.christmas { background-position: center -1664px; }
</style>
</head>
<body>
<h2>Dado</h2>
<ul class="devices">
<li>
<span>Dados</span>
<div class="house"></div>
<p>
<a href="" class=" ">ON</a>
<a href="" class=" ">OFF</a>
<img src="http://i40.photobucket.com/albums/e229/danano7/j0435234.png"
</p>
</li>
</ul>
</body></html> Muchas gracias