Posicion y dimension de una imagen dentro de un cuadrado

jpalcaraz · #1 (**permalink**) 17/09/2015, 09:43

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

pateketrueke · #2 (**permalink**) 17/09/2015, 10:59

Lo que muestras es CSS ¿por qué lo publicaste en el foro de PHP?

xax8910 · #3 (**permalink**) 21/09/2015, 09:35

Hola jpalcaraz,

En el html añade un class, por ejemplo:

<img class="img-centro" src="http://i40.photobucket.com/albums/e229/danano7/j0435234.png"/>

Y luego en tu hoja de estilos prueba con la propiedad margin:

.img-centro {
margin: 0 auto;
}

Respecto al tamaño de la imagen es recomendable no utilizar las propiedades height y width ya que puedes deformarla, se aconseja utilizar la imagen con las medidas exactas directamente.

Espero que pueda ayudarte :)

AngelKrak · #4 (**permalink**) 21/09/2015, 12:09

me imagino que esto es lo que quieres o fue lo que entendí :)

Busca en tu CSS la propiedad li y agregas esto margin-left: 300px;

Por ultimo agregas esto a tu CSS:

Código CSS:

Ver originalimg {
  float: left;
  position: absolute;
  left: 0;
  top: 0;
}

Demo:
http://codepen.io/AngelKrak/pen/qONpYg