Tema: Mi Background se desplaza
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 30/05/2010, 05:42
midlox
 
Fecha de Ingreso: octubre-2009
Mensajes: 55
Antigüedad: 15 años
Puntos: 0
Respuesta: Mi Background se desplaza
Hola otra vez New:

Muchas gracias por tu ayuda.

Estoy haciendo justo lo que dices, pero no consigo subsanar el problema que me ha surgido al solucionar el primero. te voy a poner el código para ver que tengo mal, que con tantas letras ya uno no se pude fiar de su vista.

STYLE

Código CSS: 
Ver original
  1. <title>Pablo Basagoiti</title>
  2. <style type="text/css"> 
  3. #content { background-image:url(IMG/fondo2.jpg); background-position:relative; margin-top:-90px;  background-repeat:no-repeat; }
  4. </style>
  5. <style type="text/css"> 
  6.  
  7.  
  8. body{ background-color:#666;
  9.     }
  10.  
  11.     #top{ margin-left:490px; margin-top:00px; position:relative; float:left:; width:auto; height:auto;
  12.         } 
  13.         .logo2{  margin-top:80px;
  14.         }   
  15.         .logo{ margin-left:-200px; margin-top:-92px; 
  16.         }       
  17.         .presentacion{margin-left:354px; margin-top:-32px; }
  18.         
  19.         
  20.         
  21.     #menu{ margin-left:240px; margin-top:10px;      
  22.         }
  23.         .proyectos{ margin-left:20px; }
  24.         .formacion{ margin-left:140px; margin-top:-20px}
  25.         .experiencia{ margin-left:270px; margin-top:-19px}
  26.         .premios{margin-left:399px; margin-top:-18px}
  27.         .cv{margin-left:499px; margin-top:-16px}
  28.         .book{margin-left:552px; margin-top:-16px}
  29.         .flash{margin-left:667px; margin-top:-34px}
  30.             
  31.             
  32.     #contenido{ margin-left:290px;
  33.     margin-top:100px;       
  34.         }   
  35.         .intro{ color:#CCC;font-family:
  36.         Georgia, "Times New Roman", Times, serif;       
  37.         text-align:center;
  38.         width:200px;}   
  39.         .titulo{ font-size:22px; }  
  40.         .frase{ font-style:italic; color:#AA9717;}
  41.         .texto{ text-align:center; }
  42.         .logoprincipal{ margin-top:-460PX; margin-left:         283px;}
  43.         .lejos{ margin-left:-280px; margin-top:-450px;
  44.             
  45.             }
  46.         .reves{margin-left:1030px; margin-top:-680px;}
  47.         
  48.     #down{margin-left:236px; margin-top:415px;}
  49.         .encima{ margin-top:-343px; margin-left:770px;}
  50.                 
  51.     #footer{ margin-top:369px; margin-left:540px; font-family:Georgia; color:#999;
  52.     }   .correo{ margin-top:20px;
  53.         margin-left:310px;  }
  54.         .correo a{color:#999; text-decoration:none;}
  55.         .name{ font-family:Georgia; margin-top:-30px;
  56.          }
  57.         .number{ font-family:Georgia; margin-top:-8px; margin-left:-290px;
  58.          }
  59. </style>

CAPAS

Código HTML: 
Ver original
  1. <div id="content">
  2. <div id="top">
  3.  
  4. <div class="logo2">
  5. <img src="IMG/logo.png"  />
  6. </div>
  7.  
  8. <div class="logo">
  9. <img src="IMG/pablo_logo.png" width="41,4" height="110" />
  10. </div>
  11.  
  12. <div class="presentacion">
  13. <img src="IMG/texto_presentacion.png" />
  14. </div>
  15.  
  16. </div>
  17.  
  18. </head>
  19.  
  20. <body>
  21. <div id="menu">
  22. <div class="proyectos"><a href="proyectos.html"><img src="IMG/boton_trabajos.png" border="0"  width="100"/></a></div>
  23. <div class="formacion"><a href="formacion.html"><img src="IMG/boton_formacion.png"  border="0" width="105"/></a></div>
  24. <div class="experiencia"><a href="experiencia.html"><img src="IMG/boton_experiencia.png"  border="0" width="105"/></a></div>
  25. <div class="premios"><a href="premios.html"><img src="IMG/boton_premios.png"  border="0" width="73"/></a></div>
  26. <div class="cv"><a href="CV_Pablo_Basagoiti.pdf" target="_blank"><img src="IMG/boton_cv.png"  border="0" width="23"/></a></div>
  27. <div class="book"><a href="book"><img src="IMG/boton_book.png"  border="0" width="90"/></a></div>
  28. <div class="flash"><a href="http://www.pablobasagoiti.es/flash.html" target="_blank"><img src="IMG/boton_flash.png" width="85" border="0"/></a></div>
  29. </div>
  30.  
  31. <div id="contenido">
  32. <div class="intro">
  33. <div class="titulo">
  34. <p> ¡ BIENVENIDO !</p></div>
  35. <div class="frase">
  36. <p> "Yo soy lo que se hacer, no lo que digo que hago"</p>
  37. </div>
  38. <div class="texto">
  39. Bajo esta frase he desarrollado esta pagina, pues cansado de esribir de lo que soy capaz, me he propuesto demostrarlo. Visite cada una de las categorias y vea algunos de mis trabajos en los cuales hay, ante todo, mucho entusiasmo e ilusión. Es probable que la falta de experiencia sea un factor que corra en mi contra, sin embargo todo lo que me queda por aprender es el mayor que tengo a mi favor.</div>
  40. </div>
  41. <div class="logoprincipal">
  42. <img src="IMG/pablo_logo.png" width="150" />
  43. </div>
  44. <div class="lejos">
  45. <img src="IMG/LEJOS.png"  width="50"/>
  46. </div>
  47.  
  48. </div>
  49.  
  50. <div id="down">
  51. <img src="IMG/NOMBRE.png"  width="780"/>
  52.  
  53. </div>
  54. <div class="reves">
  55. <img src="IMG/REVES.png"  width="200"/>
  56. </div>
  57. <div class="encima">
  58. <img src="IMG/encima.png" />
  59. </div>
  60. </body>
  61.  
  62. <div id="footer">
  63. <div class="correo"><a href="mailto:[email protected]">[email protected]</a></div>
  64. <div class="name">Pablo Basagoiti Moreno</div>
  65. <div class="number">695.310.053</div>
  66. </div>
  67. </div>
  68. </html>



El poblema es el que te dije, que cada vez que quiero mover algún div, como por ejemplo el top, se me mueve toda la página al completo, en bloque, no me deja mover los div individualemnte. Por ejemplo, le doy al top un margin-top:150px; y el margin lo hace toda la página, el fondo incluido.

Puedes ver la página AQUÍ