Tema: Mi Background se desplaza
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 30/05/2010, 20:17
midlox
 
Fecha de Ingreso: octubre-2009
Mensajes: 55
Antigüedad: 15 años
Puntos: 0
Respuesta: Mi Background se desplaza
Hola de nuevo!

Mil gracias por tu ayuda !!!!

Ya he realizado la estructura lógica que me pones en el esquema de arriba. El códugo ha quedado asi:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
  6. <title>Pablo Basagoiti</title>

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

Código HTML: 
Ver original
  1. <body>
  2.  
  3.  
  4. <div id="top">
  5.  
  6.     <div class="logo2">
  7.     <img src="IMG/logo.png"  />
  8.     </div>
  9.  
  10.     <div class="logo">
  11.     <img src="IMG/pablo_logo.png" width="41,4" height="110" />
  12.     </div>
  13.  
  14.     <div class="presentacion"> <img src="IMG/texto_presentacion.png" /> </div>
  15.  
  16.  
  17.   <div id="menu">
  18.         <div class="proyectos"><a href="proyectos.html"><img src="IMG/boton_trabajos.png" border="0"  width="100"/></a></div>
  19.         <div class="formacion"><a href="formacion.html"><img src="IMG/boton_formacion.png"  border="0" width="105"/></a></div>
  20.         <div class="experiencia"><a href="experiencia.html"><img src="IMG/boton_experiencia.png"  border="0" width="105"/></a></div>
  21.         <div class="premios"><a href="premios.html"><img src="IMG/boton_premios.png"  border="0" width="73"/></a></div>
  22.         <div class="cv"><a href="CV_Pablo_Basagoiti.pdf" target="_blank"><img src="IMG/boton_cv.png"  border="0" width="23"/></a></div>
  23.         <div class="book"><a href="book.html"><img src="IMG/boton_book.png"  border="0" width="90"/></a></div>
  24.         <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>
  25.         <div class="presentacion2"><a href="index.html"><img src="IMG/texto_trans.png" width="85" border="0"/></a></div>
  26.   </div>
  27. </div>
  28.  
  29. <div id="main">  
  30.   <div id="mainleft">
  31.     <div class="lejos"> <img src="IMG/LEJOS.png"  width="50"/> </div>
  32.     <div class="texto">
  33.         <div class="titulo">
  34.             <p> ¡ BIENVENIDO !</p>
  35.         </div>
  36.         <div class="frase">
  37.             <p> "Yo soy lo que se hacer, no lo que digo que hago"</p>
  38.         </div>
  39.         <div class="texto2"> 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.
  40.         </div>
  41.     </div>
  42.            
  43.   </div>
  44.   
  45.   <div id="mainright">
  46.     <div class="logoprincipal"><img src="IMG/pablo_logo.png" width="150" /></div>
  47.    
  48.     <div class="encima"><img src="IMG/encima.png" /></div>
  49.   
  50.     <div class="reves">
  51.         <img src="IMG/REVES.png"  width="200"/>
  52.     </div>
  53.     </div>
  54. </div>
  55.  
  56.  
  57.  
  58. <div id="footer">
  59.     <div class="down"> <img src="IMG/NOMBRE.png"  width="780"/></div>
  60.     <div class="correo"><a href="mailto:[email protected]">[email protected]</a></div>
  61.     <div class="name">Pablo Basagoiti Moreno</div>
  62.     <div class="number">695.310.053</div>
  63. </div>
  64.  
  65. </body>
  66.  
  67. </html>


He intentado poner de nuevo el DIV content, pero me sigue ocurriendo lo mismo que antes, y no consigo mover solo el top, main o footer, lo mueve todo en bloque. A ver que puede ser. . .

Muchas gracias, de verdad.

Saludos....