Foros del Web » Creando para Internet » CSS »

Elementos no conservan posición

Estas en el tema de Elementos no conservan posición en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/09/2017, 13:10
Avatar de LordJhony  
Fecha de Ingreso: septiembre-2010
Mensajes: 472
Antigüedad: 11 años, 8 meses
Puntos: 24
Elementos no conservan posición

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.
  #2 (permalink)  
Antiguo 11/09/2017, 13:53
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 19 años, 2 meses
Puntos: 1826
Respuesta: Elementos no conservan posición

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.
  #3 (permalink)  
Antiguo 11/09/2017, 14:36
Avatar de LordJhony  
Fecha de Ingreso: septiembre-2010
Mensajes: 472
Antigüedad: 11 años, 8 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. }
  #4 (permalink)  
Antiguo 12/09/2017, 09:38
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 19 años, 2 meses
Puntos: 1826
Respuesta: Elementos no conservan posición

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
  1.     <div></div>
  2.     <div></div>
  3.     <div></div>

y usa flex box.

Tampoco uses márgenes negativos o cosas de esas.

Etiquetas: elementos, img
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:21.