Tema: Problema con el "margin"
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/12/2013, 14:24
Avatar de blancoarnau
blancoarnau
 
Fecha de Ingreso: junio-2013
Mensajes: 119
Antigüedad: 11 años, 7 meses
Puntos: 0
Problema con el "margin"
Hola, muy buenas.
Tengo un problema que no sé como solucionarlo. No manejo muy bien la clave "margin" y siempre se quedan todos los divs desordenados sin saber el por qué.
Hice un html con la función de que al escribir un número en una casilla y pulsar un botón, una barra aumentaba en tan por ciento al número escrito. Bueno, eso es Javascript y funciona perfectamente, el problema es que me ha quedado todo desalineado:

Código HTML: 
Ver original
  1. <html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Barra de carga</title>
  4. <head><h1><center>Barra de carga</center></h1></head>
  5. <body>
  6. <div id="recuadro"><div id="barra" /></div><input type="text" size="3" id="text"/>%<input type="button" value="Aplicar" onClick="calcular()" id="clic" />
  7. </body>
  8. <style type="text/css">
  9. body {
  10.     margin-left:500px;
  11.     margin-top:250px;
  12. }
  13. div#recuadro{
  14.     border-style:solid;
  15.     border-color:gray;
  16.     height:20px;
  17.     width:100px;
  18.     border-width:1px;
  19. }
  20. div#barra{
  21.     background-color:blue;
  22.     height:100%;
  23.     width:0%;
  24. }
  25. div#text{
  26.     margin-left:5px;
  27. }
  28. </style>
  29. <script type="text/javascript">
  30.     function calcular() {
  31.         var x = document.getElementById("text").value;
  32.         if(isNaN(x) || x>100) {
  33.             alert("Este número es mayor a 100 o no es un número");
  34.         }else{
  35.             document.getElementById("barra").style.width=x + "%";
  36.         }
  37.     }
  38. </script>
  39. </html>

Y me queda algo así:



¿Qué debo hacer para arreglarlo? Yo quiero que el título quede arriba y la barra más el text, el "%" y el botón queden alineados en medio de la pantalla.
¿Alguna ayudita? Gracias.