Tema: Elementos no conservan posición
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/09/2017, 14:36
Avatar de LordJhony
LordJhony
 
Fecha de Ingreso: septiembre-2010
Mensajes: 472
Antigüedad: 13 años, 7 meses
Puntos: 24
Respuesta: Elementos no conservan posición
Cita:
Iniciado por Rafael Ver Mensaje
Sin ver el código no se puede adivinar, pero se me hace que hay un problema con algún JavaScript que define la posición.
Hola.. No hay ningún javascript... la página solo es html y css.

Acá pongo parte del código

Código HTML: 
Ver original
  1. <body>       
  2.   <header class="intro-header"> 
  3.             <a href=""><img src='imagen.png'></a>   
  4.         <div class="container">
  5.             <div class="row">
  6.                 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
  7.                     <div class="page-heading">
  8.                         
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </header>
  14.    
  15.     <div class="container" id="contbody">
  16.         <div class="row">
  17.             <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">              
  18.        <div id="divindex">
  19.          <table>   
  20.                     <td class="tdview"><div class="post-preview">            
  21.                           <img src="imagen.jpg">
  22.                     <a href="#" rel="bookmark" title="Permalink to Windows y las intranets">
  23.                         <h2 class="post-title">
  24.                             Windows y las intranets
  25.                         </h2>
  26.                     </a>
  27.                     <img class="imgprev" src="icon.png"/>
  28.                     <a id="aautor" href="#">Bloguero Invitado</a>
  29.                     &nbsp;&nbsp;<img class="imgprev" src="calendar.png"/>
  30.                     <span>Tue 06 June 2017</span>            
  31.                          <p class="article-summary">
  32.                              Para nadie es un secreto que la tecnología en general ha venido dando pasos agigantados en su implementación y evolución. En relación...
  33.                         </p>
  34.                     <br /><br />
  35.                     <div class="divread">
  36.                     <a id="read-more" href="#">Seguir leyendo</a></div>     
  37.                     </div></td>         
  38.                     <td class="tdview"><div class="post-preview">            
  39.                           <img src="#">
  40.                     <a href="#" rel="bookmark" title="Permalink to Hablemos de teoría:">
  41.                         <h2 class="post-title">
  42.                             Hablemos de teoría: 
  43.                         </h2>
  44.                     </a>
  45.                     <img class="imgprev" src="#"/>
  46.                     <a id="aautor" href="#">Bloguero Invitado</a>
  47.                     &nbsp;&nbsp;<img class="imgprev" src="calendar.png"/>
  48.                     <span>Tue 30 May 2017</span>            
  49.                          <p class="article-summary">
  50.                              Desde que el Internet se consolidó como medio de comunicación global, unida a la progresiva dependencia de las personas a los múltiples...
  51.                         </p>
  52.                     <br /><br />
  53.                     <div class="divread">
  54.                     <a id="read-more" href="#">Seguir leyendo</a></div>     
  55.                     </div></td>     
  56.                 <td class="tdview"><div class="post-preview">            
  57.                       <img src="imagen.jpg">
  58.                 <a href="#" rel="bookmark" title="Permalink to otro articulo">
  59.                     <h2 class="post-title">
  60.                         otro articulo
  61.                     </h2>
  62.                 </a>
  63.                 <img class="imgprev" src="#"/>
  64.                 <a id="aautor" href="#">Bloguero Invitado</a>
  65.                 &nbsp;&nbsp;<img class="imgprev" src="calendar.png"/>
  66.                 <span>Tue 23 May 2017</span>            
  67.                      <p class="article-summary">
  68.                          Con más de 40 años desde su creación, Internet no es solo una innovación tecnológica que ofrece múltiples servicios a las personas que...
  69.                     </p>
  70.                 <br /><br />
  71.                 <div class="divread">
  72.                 <a id="read-more" href="#">Seguir leyendo</a></div>     
  73.                 </div></td></tr>    
  74.             </table></div>  
  75.             </div>
  76.         </div>
  77.     </div>   
  78.     <!-- Footer --> 
  79.     <br />
  80. <div class="footer">
  81.     <nav id="navfoot" class="" role="">
  82.         <ul id="ulfoot" class="">
  83.             <li id="" class="lifoot"><a href="#">Ubicación</a></li>
  84.             <li id="" class="lifoot"><a href="#">FACTS</a></li>
  85.             <li id="" class="lifoot"><a href="#">Empleos</a></li>
  86.             <li id="" class="lifoot"><a href="#">Publicaciones</a></li>   
  87.         </ul>      
  88.     </nav>
  89. </div>

El código css es

Código CSS: 
Ver original
  1. .intro-header {
  2.     background-color: #808080;
  3.     background: no-repeat center center;
  4.     background-attachment: scroll;
  5.     -webkit-background-size: cover;
  6.     -moz-background-size: cover;
  7.     background-size: cover;
  8.     -o-background-size: cover;
  9.     margin-bottom: 50px;
  10. }
  11. .container{
  12.     padding-right: 15px;
  13.     padding-left: 15px;
  14.     margin-right: auto;
  15.     margin-left: auto;
  16. }
  17. .row {
  18.     margin-right: -15px;
  19.     margin-left: -15px;
  20. }
  21. #contbody {
  22.     margin-top: -26%;
  23. }
  24. #divindex {
  25.     margin-right: -20%;
  26.     margin-left: -20%;
  27. } 
  28. #divindex table {
  29.     border-spacing: 30px;
  30. }
  31. .tdview {
  32.     position: relative;
  33.     width: 33.333333%;
  34. }