Elementos no conservan posición

LordJhony · #1 (**permalink**) 11/09/2017, 13:10

Hola...

En el siguiente link se muestra una animación del problema que tengo.
En esta se puede apreciar como los elementos de la página cambian su posición con solo reducirle unos pocos milímetros el tamaño al navegador. Lo curioso, o mejor dicho, extraño, es que si recargo la página los elementos vuelven a su posición original.
¿Alguien sabe cual podría ser el problema? e intentado estableciendo position: absolute; pero me deforma los demás elementos como el footer de la misma.

Rafael · #2 (**permalink**) 11/09/2017, 13:53

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.

LordJhony · #3 (**permalink**) 11/09/2017, 14:36

Cita:

Iniciado por Rafael

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<body>       
  <header class="intro-header"> 
            <a href=""><img src='imagen.png'></a>   
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        
                    </div>
                </div>
            </div>
        </div>
    </header>
   
    <div class="container" id="contbody">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">              
       <div id="divindex">
         <table>   
                    <td class="tdview"><div class="post-preview">            
                          <img src="imagen.jpg">
                    <a href="#" rel="bookmark" title="Permalink to Windows y las intranets">
                        <h2 class="post-title">
                            Windows y las intranets
                        </h2>
                    </a>
                    <img class="imgprev" src="icon.png"/>
                    <a id="aautor" href="#">Bloguero Invitado</a>
                    &nbsp;&nbsp;<img class="imgprev" src="calendar.png"/>
                    <span>Tue 06 June 2017</span>            
                         <p class="article-summary">
                             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...
                        </p>
                    <br /><br />
                    <div class="divread">
                    <a id="read-more" href="#">Seguir leyendo</a></div>     
                    </div></td>         
                    <td class="tdview"><div class="post-preview">            
                          <img src="#">
                    <a href="#" rel="bookmark" title="Permalink to Hablemos de teoría:">
                        <h2 class="post-title">
                            Hablemos de teoría: 
                        </h2>
                    </a>
                    <img class="imgprev" src="#"/>
                    <a id="aautor" href="#">Bloguero Invitado</a>
                    &nbsp;&nbsp;<img class="imgprev" src="calendar.png"/>
                    <span>Tue 30 May 2017</span>            
                         <p class="article-summary">
                             Desde que el Internet se consolidó como medio de comunicación global, unida a la progresiva dependencia de las personas a los múltiples...
                        </p>
                    <br /><br />
                    <div class="divread">
                    <a id="read-more" href="#">Seguir leyendo</a></div>     
                    </div></td>     
                <td class="tdview"><div class="post-preview">            
                      <img src="imagen.jpg">
                <a href="#" rel="bookmark" title="Permalink to otro articulo">
                    <h2 class="post-title">
                        otro articulo
                    </h2>
                </a>
                <img class="imgprev" src="#"/>
                <a id="aautor" href="#">Bloguero Invitado</a>
                &nbsp;&nbsp;<img class="imgprev" src="calendar.png"/>
                <span>Tue 23 May 2017</span>            
                     <p class="article-summary">
                         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...
                    </p>
                <br /><br />
                <div class="divread">
                <a id="read-more" href="#">Seguir leyendo</a></div>     
                </div></td></tr>    
            </table></div>  
            </div>
        </div>
    </div>   
    <!-- Footer --> 
    <br />
<div class="footer">
    <nav id="navfoot" class="" role="">
        <ul id="ulfoot" class="">
            <li id="" class="lifoot"><a href="#">Ubicación</a></li>
            <li id="" class="lifoot"><a href="#">FACTS</a></li>
            <li id="" class="lifoot"><a href="#">Empleos</a></li>
            <li id="" class="lifoot"><a href="#">Publicaciones</a></li>   
        </ul>      
    </nav>
</div>

El código css es

Código CSS:

Ver original.intro-header {
    background-color: #808080;
    background: no-repeat center center;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    margin-bottom: 50px;
}
.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
#contbody {
    margin-top: -26%;
}
#divindex {
    margin-right: -20%;
    margin-left: -20%;
} 
#divindex table {
    border-spacing: 30px;
}
.tdview {
    position: relative;
    width: 33.333333%;
}

Rafael · #4 (**permalink**) 12/09/2017, 09:38

Huy, tu código está bastante incompleto:

Revisa este fiddle y hay que irlo modificando:

https://jsfiddle.net/9e418zpj/

Al parecer le faltan TR iniciales.

Pero las tablas ya no se usan desde hace 15 años.

Anida 3 divs

Código HTML:

Ver original<section>
    <div></div>
    <div></div>
    <div></div>
</section>

y usa flex box.

Tampoco uses márgenes negativos o cosas de esas.